diff --git a/dist/chromium/background.js b/dist/chromium/background.js
index 9408c0f..e1eae9a 100644
--- a/dist/chromium/background.js
+++ b/dist/chromium/background.js
@@ -175,6 +175,8 @@ function createMessageTypes() {
     requestInstallBase: "opportunitiesExtension.requestInstallBase",
     requestCustomerServiceRequest: "opportunitiesExtension.requestCustomerServiceRequest",
     requestWlActions: "opportunitiesExtension.requestWlActions",
+    requestWorkloads: "opportunitiesExtension.requestWorkloads",
+    requestWorkloadForecastUpdate: "opportunitiesExtension.requestWorkloadForecastUpdate",
     requestActionTeamMembers: "opportunitiesExtension.requestActionTeamMembers",
     requestActionFindLookup: "opportunitiesExtension.requestActionFindLookup",
     requestMgmtAction: "opportunitiesExtension.requestMgmtAction",
@@ -923,6 +925,140 @@ function createSpaWorkloadActions({ fetchJson }) {
   return { requestWlActions };
 }
 
+// Source: src/services/spa/workloads.js
+function createSpaWorkloads({ fetchJson, getCachedWorkloads, normalizeCacheMaxAge, invalidateWorkloadsCache }) {
+  async function requestWorkloadForecastUpdate(message) {
+    const debugRequests = [];
+    try {
+      const id = String(message.workloadId ?? "");
+      const token = message.authorization?.value;
+      if (!/^\d+$/.test(id)) throw new Error("A numeric workload ID is required.");
+      if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+      if (!Array.isArray(message.payload) || !message.payload.length) throw new Error("Monthly estimates are required.");
+      const periods = new Set();
+      const payload = message.payload.map(({ year, month, amount, updatedBy }) => {
+        if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12
+          || typeof amount !== "number" || !Number.isFinite(amount) || amount < 0
+          || typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("Invalid monthly estimate.");
+        const period = `${year}-${month}`;
+        if (periods.has(period)) throw new Error("Duplicate forecast month.");
+        periods.add(period);
+        return { year, month, amount, updatedBy: updatedBy.trim() };
+      });
+      const result = await fetchJson(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads/${id}/forecast`, {
+        method: "PATCH", credentials: "include",
+        headers: { Accept: "application/json", "Content-Type": "application/json", "wwb-provider-authorization": token.trim() },
+        body: JSON.stringify(payload)
+      }, "requestWorkloadForecastUpdate", debugRequests, { allowEmpty: true });
+      await invalidateWorkloadsCache().catch(() => {});
+      return { ok: true, result, debugRequests };
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+  async function requestWorkloads(message) {
+    const customerId = String(message.customerId ?? "").trim();
+    const token = message.authorization?.value;
+    if (!/^\d+$/.test(customerId)) throw new Error("A numeric CustomerAccount.PartyId is required.");
+    if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+    const result = await getCachedWorkloads(customerId, token.trim(), normalizeCacheMaxAge(message.cacheMaxAgeMs), message.principal);
+    return { ok: true, customerId, ...result };
+  }
+
+  async function fetchAllWorkloads(customerId, token) {
+    const debugRequests = [];
+    const workloads = new Map();
+    let offset = 0;
+    let limit = 500;
+    try {
+      for (let page = 0; page < 1000; page += 1) {
+        const url = new URL(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/customers/${customerId}/workloads`);
+        for (const [name, value] of Object.entries({ workloadStatus: "Pipeline,Implementation,Live", opportunityForecastType: "All",
+          includeForEstimates: "ALL", financialYear: "ROLLING_4_QTRS", offset, limit })) url.searchParams.set(name, String(value));
+        const result = await fetchJson(url.toString(), {
+          method: "GET", credentials: "include",
+          headers: { Accept: "application/json", "wwb-provider-authorization": token }
+        }, "requestWorkloads", debugRequests);
+        if (!result || !Array.isArray(result.workloads) || typeof result.hasNext !== "boolean"
+          || result.workloads.some(item => !item || !/^\d+$/.test(String(item.id ?? "")))) {
+          throw new Error("requestWorkloads returned an invalid collection.");
+        }
+        const countBefore = workloads.size;
+        for (const item of result.workloads) workloads.set(String(item.id), item);
+        if (!result.hasNext) return { workloads: [...workloads.values()], debugRequests };
+        const responseOffset = Number(result.offset ?? offset);
+        const responseLimit = Number(result.limit ?? limit);
+        if (workloads.size === countBefore || !Number.isSafeInteger(responseOffset) || responseOffset !== offset
+          || !Number.isSafeInteger(responseLimit) || responseLimit <= 0 || !Number.isSafeInteger(responseOffset + responseLimit)) {
+          throw new Error("requestWorkloads pagination did not advance.");
+        }
+        offset = responseOffset + responseLimit;
+        limit = responseLimit;
+      }
+      throw new Error("requestWorkloads exceeded the pagination limit.");
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+
+  return { requestWorkloads, fetchAllWorkloads, requestWorkloadForecastUpdate };
+}
+
+// Source: src/features/products/workloads-cache.js
+function createWorkloadsCache({ fetchAllWorkloads, storageLocalGet, storageLocalSet }) {
+  const KEY = "opportunitiesExtension.workloadsCache.v1";
+  let cachePromise = null;
+  let writePromise = Promise.resolve();
+  let generation = 0;
+  const inFlight = new Map();
+
+  function read() {
+    if (!cachePromise) cachePromise = storageLocalGet(KEY)
+      .then(result => result?.[KEY] && typeof result[KEY] === "object" && !Array.isArray(result[KEY]) ? result[KEY] : {})
+      .catch(() => ({}));
+    return cachePromise;
+  }
+  function write(cache) {
+    writePromise = writePromise.catch(() => {}).then(() => storageLocalSet({ [KEY]: cache }));
+    return writePromise;
+  }
+  async function invalidate() {
+    generation += 1;
+    inFlight.clear();
+    cachePromise = Promise.resolve({});
+    await write({});
+  }
+  async function get(customerId, token, maxAgeMs, principal) {
+    const scope = typeof principal === "string" ? principal.trim().toLowerCase() : "";
+    // isMyWorkload is user-specific. Never persist a result without a known principal.
+    if (!scope) return { ...await fetchAllWorkloads(customerId, token), fromCache: false, cachedAt: Date.now() };
+    const key = JSON.stringify([scope, customerId]);
+    const currentGeneration = generation;
+    const cache = await read();
+    if (generation !== currentGeneration) return get(customerId, token, maxAgeMs, principal);
+    const entry = cache[key];
+    const age = Date.now() - Number(entry?.fetchedAt);
+    if (Array.isArray(entry?.items) && age >= 0 && age < maxAgeMs) {
+      return { workloads: entry.items, cachedAt: Number(entry.fetchedAt), fromCache: true, debugRequests: [] };
+    }
+    if (!inFlight.has(key)) {
+      const flight = fetchAllWorkloads(customerId, token).then(async result => {
+        const cachedAt = Date.now();
+        if (generation === currentGeneration) {
+          cache[key] = { fetchedAt: cachedAt, items: result.workloads };
+          await write(cache).catch(() => {});
+        }
+        return { ...result, cachedAt, fromCache: false };
+      }).finally(() => { if (inFlight.get(key) === flight) inFlight.delete(key); });
+      inFlight.set(key, flight);
+    }
+    return inFlight.get(key);
+  }
+  return { get, invalidate };
+}
+
 // Source: src/services/spa/action-options.js
 function createSpaActionOptions({ fetchJson }) {
   const baseUrl = "https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads";
@@ -2520,6 +2656,9 @@ function registerBackgroundMessages({
   requestInstallBase,
   requestCustomerServiceRequest,
   requestWlActions,
+  requestWorkloads,
+  requestWorkloadForecastUpdate,
+  invalidateWorkloadsCache,
   requestActionTeamMembers,
   requestActionFindLookup,
   requestMgmtAction,
@@ -2597,7 +2736,7 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
     }
 
     if (message.type === messageTypes.invalidateProductsCache) {
-      invalidateProductsCache().then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
+      Promise.all([invalidateProductsCache(), invalidateWorkloadsCache()]).then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
       return true;
     }
     if (message.type === messageTypes.getXsrfToken) {
@@ -2686,6 +2825,15 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
       return true;
     }
 
+    if ([messageTypes.requestWorkloads, messageTypes.requestWorkloadForecastUpdate].includes(message.type)) {
+      const request = message.type === messageTypes.requestWorkloads ? requestWorkloads : requestWorkloadForecastUpdate;
+      request(message).then(sendResponse).catch(error => sendResponse({
+        ok: false, error: error.message || "Unable to load workloads.", httpStatus: error.httpStatus,
+        debugRequests: Array.isArray(error.debugRequests) ? error.debugRequests : []
+      }));
+      return true;
+    }
+
     if (message.type === messageTypes.requestWlActions) {
       requestWlActions(message).then(sendResponse).catch(error => sendResponse({
         ok: false, error: error.message || "Unable to load workload actions.",
@@ -2876,6 +3024,17 @@ function createBackgroundApplication(overrides = {}) {
   const requestAccountPlans = (...args) => spaAccounts.requestAccountPlans(...args);
   const requestInstallBase = (...args) => spaInstallBase.requestInstallBase(...args);
   const spaWorkloadActions = createSpaWorkloadActions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
+  const workloadsCache = createWorkloadsCache({
+    fetchAllWorkloads: (...args) => spaWorkloads.fetchAllWorkloads(...args),
+    storageLocalGet: (...args) => platformBackgroundApi.storageLocalGet(...args),
+    storageLocalSet: (...args) => platformBackgroundApi.storageLocalSet(...args)
+  });
+  const spaWorkloads = createSpaWorkloads({
+    invalidateWorkloadsCache: () => workloadsCache.invalidate(),
+    fetchJson: (...args) => httpBackgroundJson.fetchJson(...args),
+    getCachedWorkloads: (...args) => workloadsCache.get(...args),
+    normalizeCacheMaxAge: value => productsCache.normalizeCacheMaxAge(value)
+  });
   const requestWlActions = (...args) => spaWorkloadActions.requestWlActions(...args);
   const spaActionOptions = createSpaActionOptions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
   const requestActionTeamMembers = (...args) => spaActionOptions.requestActionTeamMembers(...args);
@@ -2907,6 +3066,9 @@ function createBackgroundApplication(overrides = {}) {
   function start() {
     srRequestHeaders.start();
     startBackgroundApplication({
+      requestWorkloads: message => spaWorkloads.requestWorkloads(message),
+      requestWorkloadForecastUpdate: message => spaWorkloads.requestWorkloadForecastUpdate(message),
+      invalidateWorkloadsCache: () => workloadsCache.invalidate(),
       invalidateResourceUser: () => fusionSrCreate.invalidateResourceUser(),
       requestWeekDetails: message => timeEntries.requestWeekDetails(message),
       requestTimeEntries: message => timeEntries.requestTimeEntries(message),
@@ -2934,6 +3096,8 @@ function createBackgroundApplication(overrides = {}) {
     httpBackgroundJson,
     productsBackgroundJobs,
     productsCache,
+    workloadsCache,
+    spaWorkloads,
     fusionProducts,
     authXsrfRecovery,
     authXsrfCookies,
diff --git a/dist/chromium/content.js b/dist/chromium/content.js
index 5674561..e2f6c4e 100644
--- a/dist/chromium/content.js
+++ b/dist/chromium/content.js
@@ -1,6 +1,6 @@
 (function () {
   "use strict";
-const redwoodStyles = "\n      .opportunities-extension-scroll-lock {\n        overflow: hidden !important;\n      }\n\n      .opportunities-extension-modal,\n      .opportunities-extension-modal * {\n        box-sizing: border-box;\n        font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n      }\n\n      .opportunities-extension-modal {\n        position: fixed;\n        inset: 0;\n        z-index: 2147483647;\n        background: #f5f4f2;\n        color: #000000;\n      }\n\n      .opportunities-extension-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-shell {\n        height: 100vh;\n        min-height: 0;\n        display: grid;\n        grid-template-rows: auto minmax(0, 1fr);\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-header {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 24px;\n        padding: 28px 40px 22px;\n        border-bottom: 1px solid #dedbd7;\n        background:\n          linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #ffffff;\n      }\n\n      .opportunities-extension-header::before {\n        position: absolute;\n        left: 40px;\n        bottom: -1px;\n        width: 64px;\n        height: 3px;\n        background: #00758f;\n        content: \"\";\n      }\n\n      .opportunities-extension-header h1 {\n        margin: 0;\n        color: #000000;\n        font-size: 24px;\n        font-weight: 700;\n        line-height: 1.2;\n        letter-spacing: 0;\n      }\n\n      .opportunities-extension-header p {\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        line-height: 1.4;\n      }\n\n      .opportunities-extension-subtitle-row {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        margin-top: 6px;\n      }\n\n      .opportunities-extension-auth-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        color: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-auth-badge-authenticated {\n        background: #3f6f17;\n      }\n\n      .opportunities-extension-auth-badge-unauthenticated {\n        background: #c5331f;\n      }\n\n      .opportunities-extension-auth-badge-pending {\n        background: #6f5a7f;\n      }\n\n      .opportunities-extension-products-progress {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-progress[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-cache-timestamp {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #f0eeeb;\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-cache-timestamp[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"running\"]::before {\n        width: 12px;\n        height: 12px;\n        margin-right: 6px;\n        border: 2px solid currentColor;\n        border-right-color: transparent;\n        border-radius: 50%;\n        content: \"\";\n        animation: opportunities-extension-spin .8s linear infinite;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-products-progress[data-state=\"error\"] {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      @keyframes opportunities-extension-spin {\n        to { transform: rotate(360deg); }\n      }\n\n      .opportunities-extension-icon-button {\n        width: 36px;\n        height: 36px;\n        flex: 0 0 36px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 18px;\n        font-weight: 600;\n        line-height: 1;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-header-actions {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .opportunities-extension-icon-button svg {\n        width: 18px;\n        height: 18px;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-icon-button:hover,\n      .opportunities-extension-icon-button:focus {\n        border-color: #b8b2ad;\n        background: #f5f4f2;\n        outline: none;\n      }\n\n      .opportunities-extension-body {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        gap: 16px;\n        padding: 22px 40px 36px;\n        background: #f5f4f2;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-form {\n        display: flex;\n        align-items: end;\n        flex-wrap: wrap;\n        gap: 24px;\n        min-height: 82px;\n        max-width: none;\n        margin: 0;\n        padding: 14px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-field {\n        display: grid;\n        max-width: max-content;\n        min-width: 270px;\n        width: max-content;\n        gap: 6px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-dashboard {\n        display: grid;\n        grid-template-columns: repeat(6, minmax(0, 1fr));\n        gap: 12px;\n      }\n\n      .opportunities-extension-stage-dashboard-card {\n        display: grid;\n        gap: 6px;\n        min-width: 0;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-top: 3px solid #5f5a55;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-stage-dashboard-card span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-stage-dashboard-value {\n        overflow: hidden;\n        color: #312d2a;\n        font-size: 22px;\n        font-weight: 700;\n        line-height: 1.2;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #008aa6;\n      }\n\n      .opportunities-extension-total-dashboard-card {\n        border-top-color: #312d2a;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #6f6863;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #c87b00;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #755b8b;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #4b7f22;\n      }\n\n      .opportunities-extension-stage-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-stage-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-stage-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #006b84;\n        background: #006b84;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #5f5a55;\n        background: #5f5a55;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #945400;\n        background: #945400;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #624e74;\n        background: #624e74;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #3f6f17;\n        background: #3f6f17;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-status-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-status-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-status-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-status-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-customer-filter {\n        position: relative;\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 220px;\n      }\n\n      .opportunities-extension-customer-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-customer-filter-trigger {\n        position: relative;\n        min-width: 220px;\n        min-height: 44px;\n        padding: 10px 38px 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-trigger::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-top: 6px solid #312d2a;\n        border-right: 5px solid transparent;\n        border-left: 5px solid transparent;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-customer-filter-trigger:disabled {\n        cursor: not-allowed;\n        background: #f5f4f2;\n        color: #7d7772;\n      }\n\n      .opportunities-extension-customer-filter-trigger:focus-visible {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-panel {\n        position: absolute;\n        top: calc(100% + 8px);\n        left: 0;\n        z-index: 4;\n        display: grid;\n        width: min(360px, calc(100vw - 80px));\n        gap: 10px;\n        padding: 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n      }\n\n      .opportunities-extension-customer-filter-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-customer-filter-search {\n        width: 100%;\n        min-height: 40px;\n        padding: 8px 10px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-customer-filter-search:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-customer-filter-option {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-customer-filter-select-all {\n        min-height: 32px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid #dedbd7;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n        width: 16px;\n        height: 16px;\n        flex: 0 0 16px;\n        accent-color: #00758f;\n      }\n\n      .opportunities-extension-customer-filter-list {\n        display: block;\n        max-height: 250px;\n        overflow: auto;\n      }\n\n      .opportunities-extension-customer-filter-option {\n        display: grid;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: start;\n        min-height: 0;\n        height: auto !important;\n        padding: 8px 4px;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n        margin-top: 1px;\n      }\n\n      .opportunities-extension-customer-filter-option span {\n        display: block;\n        min-width: 0;\n        line-height: 18px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n      }\n\n      .opportunities-extension-customer-filter-option:hover {\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-customer-filter-empty {\n        margin: 4px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-table-search-field {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        width: 260px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input {\n        width: 100%;\n        min-height: 44px;\n        padding: 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-select-wrap {\n        position: relative;\n        display: block;\n        width: 270px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-select-wrap::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 6px solid #000000;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-field select {\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        min-height: 44px;\n        box-sizing: border-box;\n        appearance: none;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #000000;\n        font-size: 14px;\n        line-height: 1.3;\n        padding: 11px 44px 11px 12px;\n      }\n\n      .opportunities-extension-field select:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-table-surface {\n        min-height: 0;\n        height: 100%;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n        overflow-x: auto;\n        overflow-y: auto;\n      }\n\n      .opportunities-extension-table {\n        width: 100%;\n        min-width: 0;\n        border-collapse: collapse;\n        table-layout: fixed;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-table thead {\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-table th {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        height: 44px;\n        border-bottom: 1px solid #b8b2ad;\n        background: #faf9f8;\n        color: #312d2a;\n        font-size: 12px;\n        font-weight: 700;\n        text-align: left;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td {\n        min-height: 48px;\n        padding: 12px 16px;\n        border-bottom: 1px solid #ebe8e5;\n        vertical-align: middle;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-table th:nth-child(1) {\n        width: 16%;\n      }\n\n      .opportunities-extension-table th:nth-child(2) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(3) {\n        width: 18%;\n      }\n\n      .opportunities-extension-table th:nth-child(4) {\n        width: 11%;\n      }\n\n      .opportunities-extension-table th:nth-child(5) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(6) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(7) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(8) {\n        width: 6%;\n      }\n\n      .opportunities-extension-table th:nth-child(9) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(10) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(11) {\n        width: 4%;\n      }\n\n      .opportunities-extension-table td:nth-child(2),\n      .opportunities-extension-table td:nth-child(5),\n      .opportunities-extension-table td:nth-child(6),\n      .opportunities-extension-table td:nth-child(8) {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .opportunities-extension-table td:nth-child(9) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(7) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(10) {\n        padding-right: 6px;\n        padding-left: 6px;\n        font-size: 12px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td:nth-child(11) {\n        padding-right: 6px;\n        padding-left: 6px;\n        text-align: center;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table tbody tr:hover {\n        background: #f7f6f4;\n      }\n\n      .opportunities-extension-table tbody tr:last-child td {\n        border-bottom: 0;\n      }\n\n      .opportunities-extension-table a {\n        color: #006b84;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 2px;\n      }\n\n      .opportunities-extension-table a:hover {\n        color: #004f63;\n      }\n\n      .opportunities-extension-opty-number-content {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-name-content {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-name-content > a {\n        min-width: 0;\n      }\n\n      .opportunities-extension-actions-content {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-products-count {\n        display: inline-grid;\n        width: auto;\n        min-width: 20px;\n        height: 20px;\n        place-items: center;\n        flex: 0 0 auto;\n        box-sizing: border-box;\n        padding: 0 3px;\n        border: 1px solid #7ca7b2;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 1;\n        text-align: center;\n        vertical-align: middle;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-products-count:hover,\n      .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n        outline: none;\n      }\n\n      .opportunities-extension-products-count-error {\n        border-color: #d8887e;\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-products-detail-row:hover {\n        background: transparent !important;\n      }\n\n      .opportunities-extension-products-detail-cell {\n        padding: 0 !important;\n      }\n\n      .opportunities-extension-products-detail {\n        padding: 14px 20px 18px;\n        border-bottom: 1px solid #c9c5c1;\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-products-detail-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 10px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-ai-summary {\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n        margin: 0 0 12px;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 6px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.5;\n        text-align: left;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-ai-summary strong {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n      }\n\n      .opportunities-extension-ai-summary p {\n        margin: 4px 0 0;\n        font: inherit;\n        white-space: pre-wrap;\n      }\n\n      .opportunities-extension-ai-summary-error {\n        color: #b42318;\n        border-color: #d9928b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n        background: #292827;\n        color: #f6f4f2;\n        border-color: #5f5a55;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n        color: #ffb4ab;\n        border-color: #a45c55;\n      }\n\n      .opportunities-extension-products-detail-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-products-detail-heading span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-products-table {\n        width: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border: 1px solid #dedbd7;\n        background: #ffffff;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-products-table th,\n      .opportunities-extension-products-table td {\n        position: static;\n        height: auto;\n        padding: 8px 10px;\n        border-bottom: 1px solid #ebe8e5;\n        background: transparent;\n        overflow-wrap: anywhere;\n        vertical-align: middle;\n        white-space: normal;\n      }\n\n      .opportunities-extension-products-table th {\n        background: #faf9f8;\n        font-size: 11px;\n      }\n\n      .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n      .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n      .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n      .opportunities-extension-products-empty {\n        margin: 0;\n        padding: 10px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-copy-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        width: 24px;\n        height: 24px;\n        padding: 3px;\n        border: 0;\n        border-radius: 3px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-copy-button svg {\n        width: 16px;\n        height: 16px;\n        fill: currentColor;\n      }\n\n      .opportunities-extension-copy-button:hover,\n      .opportunities-extension-copy-button:focus-visible {\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        padding: 5px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-action-button svg {\n        width: 21px;\n        height: 21px;\n      }\n\n      .opportunities-extension-action-button:hover,\n      .opportunities-extension-action-button:focus-visible {\n        border-color: #7ca7b2;\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button:disabled {\n        cursor: wait;\n        opacity: .72;\n      }\n\n      .opportunities-extension-action-button-loading svg {\n        animation: opportunities-extension-pulse 1s ease-in-out infinite;\n      }\n\n      @keyframes opportunities-extension-pulse {\n        50% { opacity: .35; }\n      }\n\n      .opportunities-extension-copy-toast {\n        position: fixed;\n        right: 28px;\n        bottom: 28px;\n        z-index: 3;\n        max-width: min(360px, calc(100vw - 56px));\n        padding: 12px 16px;\n        border-radius: 4px;\n        background: #2f6f18;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n        color: #ffffff;\n        font-size: 13px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-copy-toast-error {\n        background: #a52b1c;\n      }\n\n      .opportunities-extension-copy-toast[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-stage-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n        background: #d9f0f5;\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n        background: #fff0d8;\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n        background: #eee8f5;\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n        background: #e5f1d9;\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-status-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n        background: #e2f2e5;\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n        background: #e5e7eb;\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"LOST\"] {\n        background: #f9e3e1;\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"WON\"] {\n        background: #e3edf8;\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-sort-button {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        width: 100%;\n        min-height: 44px;\n        padding: 8px 42px 8px 16px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-weight: inherit;\n        letter-spacing: 0;\n        line-height: 1.2;\n        text-align: left;\n        white-space: normal;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-table-header-label {\n        display: inline-flex;\n        align-items: center;\n        min-height: 44px;\n        padding: 8px 6px;\n      }\n\n      .opportunities-extension-sort-button::after {\n        position: absolute;\n        right: 15px;\n        color: #5f5a55;\n        content: \"↕\";\n        font-size: 16px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n        color: #00758f;\n        content: \"↑\";\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n        color: #00758f;\n        content: \"↓\";\n      }\n\n      .opportunities-extension-sort-button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-sort-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-table-status {\n        height: 152px;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        display: grid;\n        place-items: center;\n        padding: 24px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-preferences-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 4;\n        display: grid;\n        place-items: center;\n        padding: 12px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-account-plans-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-dialog {\n        display: grid;\n        width: min(1180px, 100%);\n        height: min(760px, calc(100vh - 24px));\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plans-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 14px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-header h2 {\n        margin: 0;\n        font-size: 20px;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-account-plans-header p {\n        margin: 5px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-account-plans-content {\n        display: grid;\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n        grid-row: 1 / -1;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation {\n        position: relative;\n        min-width: 0;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tabs {\n        display: flex;\n        min-width: 0;\n        gap: 4px;\n        overflow-x: auto;\n        padding: 8px 20px 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button {\n        display: grid;\n        position: absolute;\n        z-index: 1;\n        top: 50%;\n        width: 32px;\n        height: 32px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n        transform: translateY(-50%);\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:first-child {\n        left: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:last-child {\n        right: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-account-plans-panels {\n        min-width: 0;\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plan-tab {\n        min-height: 38px;\n        flex: 0 0 auto;\n        padding: 7px 12px;\n        border: 0;\n        border-bottom: 3px solid transparent;\n        background: transparent;\n        color: #5f5a55;\n        font-size: 13px;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plan-tab:hover {\n        background: #f0eeeb;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #00758f;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-account-plan-tab:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-account-plan-panel {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        box-sizing: border-box;\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plan-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plan-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        margin: 0;\n      }\n\n      .opportunities-extension-account-plan-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        gap: 10px;\n        min-height: 42px;\n        align-items: center;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plan-details dt {\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-account-plan-details dd {\n        min-width: 0;\n        margin: 0;\n        color: #312d2a;\n        font-size: 13px;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-consumption-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 14px;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-trend-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 24px;\n      }\n\n      .opportunities-extension-consumption-periods {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-periods button {\n        min-height: 38px;\n        padding: 7px 14px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-periods button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #00758f;\n        background: #e7f6f8;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-periods button:focus-visible,\n      .opportunities-extension-consumption-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-consumption-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 4px;\n      }\n\n      .opportunities-extension-consumption-navigation {\n        display: grid;\n        grid-template-columns: 36px minmax(130px, auto) 36px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 40px;\n        margin-bottom: 2px;\n      }\n\n      .opportunities-extension-consumption-navigation strong {\n        color: #312d2a;\n        font-size: 13px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-navigation-button {\n        display: grid;\n        width: 36px;\n        height: 36px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-consumption-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-consumption-figure {\n        position: relative;\n        min-width: 0;\n        min-height: 0;\n        margin: 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-consumption-figure::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-consumption-visual {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 176px;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-consumption-svg {\n        display: block;\n        width: 100%;\n        height: 300px;\n        min-height: 0;\n        overflow: visible;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #dedbd7;\n        stroke-width: 1;\n        shape-rendering: crispEdges;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #5f5a55;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #312d2a;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #b77888;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #de7907;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #de7907;\n        stroke-width: 1.5;\n        stroke-dasharray: 6 6;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group {\n        cursor: default;\n        outline: none;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group rect {\n        transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        filter: brightness(1.06);\n        stroke: #312d2a;\n        stroke-width: 1.5;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-label {\n        opacity: 0;\n        animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-average {\n        opacity: 0;\n        animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n      }\n\n      @keyframes opportunities-extension-consumption-label-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      @keyframes opportunities-extension-consumption-average-in {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n\n      .opportunities-extension-consumption-legend {\n        display: grid;\n        align-content: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-legend button {\n        display: grid;\n        min-width: 0;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: center;\n        gap: 8px;\n        padding: 6px 4px;\n        border: 0;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.25;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-legend button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-legend button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 1px;\n      }\n\n      .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #77726d;\n        opacity: .55;\n      }\n\n      .opportunities-extension-consumption-legend-swatch {\n        display: block;\n        width: 12px;\n        height: 12px;\n        justify-self: center;\n      }\n\n      .opportunities-extension-consumption-legend-funded {\n        background: #b77888;\n      }\n\n      .opportunities-extension-consumption-legend-overage {\n        background: #de7907;\n      }\n\n      .opportunities-extension-consumption-legend-average {\n        height: 0;\n        border-top: 2px dashed #de7907;\n      }\n\n      .opportunities-extension-consumption-tooltip {\n        position: absolute;\n        z-index: 2;\n        display: grid;\n        min-width: 190px;\n        max-width: 260px;\n        gap: 4px;\n        padding: 10px 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.3;\n        pointer-events: none;\n      }\n\n      .opportunities-extension-consumption-tooltip[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-consumption-tooltip strong {\n        margin-bottom: 2px;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton {\n        height: 100%;\n        min-height: 0;\n        padding: 34px 62px 24px;\n        box-sizing: border-box;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot {\n        display: flex;\n        height: 100%;\n        min-height: 220px;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px;\n        border-bottom: 1px solid #dedbd7;\n        border-left: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot span {\n        width: min(38px, 6%);\n        border-radius: 2px 2px 0 0;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-consumption-chart-empty,\n      .opportunities-extension-consumption-chart-error {\n        display: grid;\n        min-height: 220px;\n        place-items: center;\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-chart-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-account-plan-status-indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #9b9691;\n        box-shadow: 0 0 0 3px #efedeb;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #3f6f17;\n        box-shadow: 0 0 0 3px #e2f2e5;\n      }\n\n      .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n        margin-right: 8px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs {\n        display: flex;\n        min-height: 46px;\n        align-items: center;\n        padding: 0 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-skeleton-panel {\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tab {\n        display: inline-flex;\n        align-items: center;\n        gap: 9px;\n        min-height: 38px;\n        padding: 0 12px;\n        border-bottom: 3px solid #00758f;\n      }\n\n      .opportunities-extension-account-plans-skeleton-status {\n        display: block;\n        width: 10px;\n        height: 10px;\n        flex: 0 0 auto;\n        border-radius: 50%;\n        background: #dedbd7;\n        box-shadow: 0 0 0 3px #efedeb;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        padding: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        align-items: center;\n        gap: 10px;\n        min-height: 42px;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plans-skeleton-bar {\n        display: block;\n        height: 12px;\n        border-radius: 3px;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n        height: 14px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-label {\n        width: 74%;\n        height: 10px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        margin: 14px 0 0;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend-header {\n        display: flex;\n        justify-content: flex-end;\n        min-height: 38px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n        height: 12px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-period-active {\n        height: 38px !important;\n        border: 1px solid #8cc8d3;\n        background: #e7f6f8;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation {\n        display: grid;\n        grid-template-columns: 32px 124px 32px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 54px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n        justify-self: center;\n      }\n\n      .opportunities-extension-account-plans-skeleton-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 150px;\n        align-items: center;\n        gap: 28px;\n        padding: 12px 14px 0 62px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot {\n        display: flex;\n        position: relative;\n        height: 300px;\n        min-height: 0;\n        box-sizing: border-box;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px 64px;\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        position: absolute;\n        display: block;\n        content: \"\";\n        background: #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before {\n        top: 0;\n        bottom: 64px;\n        left: 0;\n        width: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        right: 0;\n        bottom: 64px;\n        left: 0;\n        height: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n        width: min(38px, 7%);\n        flex: 0 1 38px;\n        border-radius: 2px 2px 0 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend {\n        display: grid;\n        align-content: center;\n        gap: 18px;\n        min-height: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n        height: 11px;\n      }\n\n      @keyframes opportunities-extension-skeleton-pulse {\n        from { opacity: .48; }\n        to { opacity: 1; }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .opportunities-extension-account-plans-skeleton-bar,\n        .opportunities-extension-consumption-chart-skeleton-plot span,\n        .opportunities-extension-consumption-svg .consumption-animated-label,\n        .opportunities-extension-consumption-svg .consumption-animated-average {\n          animation: none;\n          opacity: 1;\n        }\n      }\n\n      .opportunities-extension-account-plans-empty,\n      .opportunities-extension-account-plans-error {\n        margin: 0;\n        padding: 28px 20px;\n        color: #5f5a55;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-account-plans-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-preferences-dialog {\n        display: grid;\n        width: min(680px, 100%);\n        max-height: min(720px, calc(100vh - 48px));\n        grid-template-rows: auto minmax(0, 1fr) auto;\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-preferences-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 18px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-preferences-header h2 {\n        margin: 0;\n        font-size: 20px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-preferences-content {\n        min-height: 0;\n        overflow: auto;\n        padding: 20px;\n      }\n\n      .opportunities-extension-preferences-fieldset {\n        min-width: 0;\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-fieldset legend {\n        margin-bottom: 12px;\n        padding: 0;\n        color: #312d2a;\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-preferences-options {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 4px 20px;\n      }\n\n      .opportunities-extension-preferences-option {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        min-width: 0;\n        padding: 9px 8px;\n        border-radius: 4px;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.35;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-option:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-preferences-option input {\n        width: 18px;\n        height: 18px;\n        flex: 0 0 18px;\n        margin: 0;\n        accent-color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-cache-field {\n        display: grid;\n        width: min(280px, 100%);\n        gap: 6px;\n        margin-top: 24px;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-preferences-cache-field select {\n        width: 100%;\n        height: 40px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-preferences-cache-field select:focus {\n        border-color: #00758f;\n        outline: 2px solid #bde7ee;\n        outline-offset: 0;\n      }\n\n      .opportunities-extension-preferences-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 14px 20px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-button {\n        min-width: 88px;\n        min-height: 36px;\n        padding: 7px 16px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-button-primary {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-button-primary:hover,\n      .opportunities-extension-button-primary:focus-visible {\n        border-color: #005e73;\n        background: #005e73;\n        outline: none;\n      }\n\n      .opportunities-extension-debug-panel {\n        position: fixed;\n        right: 24px;\n        bottom: 24px;\n        z-index: 1;\n        width: min(640px, calc(100vw - 48px));\n        max-height: min(560px, calc(100vh - 120px));\n        overflow: auto;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n        padding: 16px;\n        color: #000000;\n      }\n\n      .opportunities-extension-debug-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-debug-panel h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1.25;\n      }\n\n      .opportunities-extension-debug-panel p {\n        margin: 4px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-panel-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 12px;\n      }\n\n      .opportunities-extension-debug-visibility-button {\n        width: 34px;\n        height: 34px;\n        flex: 0 0 34px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-debug-visibility-button svg {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-debug-list {\n        display: grid;\n        gap: 10px;\n      }\n\n      .opportunities-extension-debug-item {\n        border: 1px solid #dedbd7;\n        border-left-width: 4px;\n        border-radius: 4px;\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-debug-item[open] {\n        background: #ffffff;\n      }\n\n      .opportunities-extension-debug-item-success {\n        border-left-color: #3f6f17;\n      }\n\n      .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-debug-item-failed {\n        border-left-color: #c5331f;\n      }\n\n      .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-debug-item-pending {\n        border-left-color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n        background: #eee8f2;\n        color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        min-height: 42px;\n        padding: 9px 12px 9px 10px;\n        cursor: pointer;\n        list-style: none;\n      }\n\n      .opportunities-extension-debug-heading::-webkit-details-marker {\n        display: none;\n      }\n\n      .opportunities-extension-debug-heading::before {\n        content: \"⌄\";\n        width: 14px;\n        color: #5f5a55;\n        font-size: 16px;\n        line-height: 1;\n        transform: rotate(-90deg);\n        transition: transform .15s ease;\n      }\n\n      .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n        transform: rotate(0deg);\n      }\n\n      .opportunities-extension-debug-summary-meta {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-left: auto;\n      }\n\n      .opportunities-extension-debug-http-status,\n      .opportunities-extension-debug-status {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 0 8px;\n        border-radius: 999px;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-debug-http-status {\n        background: #e8f4f6;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-debug-status {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-debug-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-item pre {\n        margin: 0;\n        padding: 8px 12px 12px;\n        color: #312d2a;\n        font-family: Consolas, \"Courier New\", monospace;\n        font-size: 12px;\n        line-height: 1.45;\n        white-space: pre-wrap;\n        word-break: break-word;\n      }\n\n      .opportunities-extension-debug-empty {\n        padding: 14px;\n        border: 1px dashed #b8b2ad;\n        border-radius: 4px;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] {\n        background: #1f1f1f;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n        background: #1f1f1f;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n        border-bottom-color: #4e4a46;\n        background:\n          linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n        background: #5b5753;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n        border-color: #3f7580;\n        background: #23474e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n        background: #8f8a85;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #7fb05b;\n        box-shadow: 0 0 0 3px #314527;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n        border-color: #4e4a46;\n        background: #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n        background: #292827;\n        color: #918b86;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n        color: #b5b0ab;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n        border-bottom-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n        background: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n        background: #3b3937;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #43c4d5;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #43c4d5;\n        background: #173e43;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #43c4d5;\n        background: #3b3937;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #4e4a46;\n        color: #746f6a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        stroke: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #a8a39e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n        background: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n        background: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n        border-top-color: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n        accent-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n        border-color: #00a6be;\n        background: #008aa6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n        border-color: #43c4d5;\n        background: #006d7a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n        border-bottom-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n        border-color: #2f9bae;\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #43c4d5;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #244f2e;\n        color: #a8dfb7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n        border-color: #b13b34;\n        background: #5f2926;\n        color: #ffb4ad;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n        background: #3b3937;\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #d1cbc6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #ffbf62;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #d2b7e9;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #9bd46a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #c0b9b3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #ffb84d;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #cba7e7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #92cf5b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #008aa6;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #6f6863;\n        background: #6f6863;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #b96e00;\n        background: #b96e00;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #755b8b;\n        background: #755b8b;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #4b7f22;\n        background: #4b7f22;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #69c985;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #c3cad3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #ff9d94;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #83bfff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n        border-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n        color: #f6f4f2;\n      }\n\n      @media (min-width: 1201px) and (max-width: 1450px) {\n        .opportunities-extension-table th:nth-child(1) {\n          width: 16%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 18%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 12%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 7%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 8%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 10%;\n        }\n      }\n\n      @media (max-width: 1200px) {\n        .opportunities-extension-table {\n          min-width: 1180px;\n        }\n\n        .opportunities-extension-table th:nth-child(1) {\n          width: 15%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 17%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 13%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 6%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 9%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 11%;\n        }\n      }\n\n      @media (max-width: 700px) {\n        .opportunities-extension-header {\n          padding: 24px 20px 18px;\n        }\n\n        .opportunities-extension-header::before {\n          left: 20px;\n        }\n\n        .opportunities-extension-header h1 {\n          font-size: 22px;\n        }\n\n        .opportunities-extension-header p {\n          font-size: 14px;\n        }\n\n        .opportunities-extension-body {\n          padding: 16px 20px 24px;\n        }\n\n        .opportunities-extension-form {\n          align-items: stretch;\n          flex-wrap: wrap;\n          gap: 14px;\n          min-height: auto;\n          padding: 12px;\n        }\n\n        .opportunities-extension-field {\n          max-width: none;\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-trigger {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-panel {\n          width: min(360px, calc(100vw - 64px));\n        }\n\n        .opportunities-extension-table-search-field {\n          width: 100%;\n        }\n\n        .opportunities-extension-stage-dashboard {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .opportunities-extension-stage-dashboard-value {\n          font-size: 18px;\n        }\n\n        .opportunities-extension-preferences-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-account-plans-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-preferences-dialog {\n          max-height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plans-dialog {\n          height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plan-panel {\n          padding: 12px 14px;\n        }\n\n        .opportunities-extension-account-plan-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n        }\n\n        .opportunities-extension-account-plan-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 3px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n          padding: 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 5px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-trend {\n          margin: 14px 0 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          align-items: center;\n          gap: 6px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n          width: 100% !important;\n        }\n\n        .opportunities-extension-account-plans-skeleton-chart {\n          grid-template-columns: minmax(0, 1fr);\n          gap: 12px;\n          padding: 12px 8px 0 34px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-legend {\n          display: flex;\n          min-height: 24px;\n          align-items: center;\n          justify-content: center;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-trend-header {\n          align-items: stretch;\n        }\n\n        .opportunities-extension-consumption-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          gap: 3px;\n        }\n\n        .opportunities-extension-consumption-periods button {\n          min-width: 0;\n          padding: 7px 4px;\n          font-size: 12px;\n        }\n\n        .opportunities-extension-consumption-chart {\n          min-height: 0;\n        }\n\n        .opportunities-extension-consumption-svg {\n          width: 760px;\n          height: 245px;\n        }\n\n        .opportunities-extension-consumption-visual {\n          width: 920px;\n          grid-template-columns: 760px 144px;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-figure {\n          overflow-x: auto;\n          overscroll-behavior-inline: contain;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton {\n          min-height: 0;\n          padding: 24px 18px 18px;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton-plot {\n          min-height: 180px;\n          gap: 4px;\n          padding: 0 6px;\n        }\n\n        .opportunities-extension-preferences-options {\n          grid-template-columns: 1fr;\n        }\n\n        .opportunities-extension-stage-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-status-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-table-surface {\n          min-width: 0;\n          min-height: calc(100vh - 230px);\n        }\n\n        .opportunities-extension-debug-panel {\n          right: 12px;\n          bottom: 12px;\n          width: calc(100vw - 24px);\n          max-height: calc(100vh - 96px);\n        }\n      }\n    \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n  --debug-surface: #fff;\n  --debug-code: #f5f6f7;\n  --debug-text: #312d2a;\n  --debug-muted: #5f5a55;\n  --debug-border: #dedbd7;\n  --debug-success: #22613b;\n  --debug-success-bg: #e1f1e5;\n  --debug-failed: #a12721;\n  --debug-failed-bg: #fce8e6;\n  --debug-pending: #805000;\n  --debug-pending-bg: #fff1ce;\n  --debug-info: #075e87;\n  --debug-info-bg: #e5f1fa;\n  --debug-key: #075e87;\n  --debug-string: #22613b;\n  --debug-number: #865000;\n  --debug-literal: #73429b;\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr);\n  width: auto;\n  height: auto;\n  max-height: none;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: 0;\n  padding: 20px;\n  border: 0;\n  border-radius: 0;\n  background: var(--debug-surface);\n  color: var(--debug-text);\n  color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n  --debug-surface: #292827;\n  --debug-code: #222120;\n  --debug-text: #f6f4f2;\n  --debug-muted: #c9c5c1;\n  --debug-border: #514c47;\n  --debug-success: #a9e3bd;\n  --debug-success-bg: #214d34;\n  --debug-failed: #ffb4ab;\n  --debug-failed-bg: #582c2a;\n  --debug-pending: #ffe099;\n  --debug-pending-bg: #59441e;\n  --debug-info: #a8d9ff;\n  --debug-info-bg: #233f52;\n  --debug-key: #8ed6f0;\n  --debug-string: #a9e3bd;\n  --debug-number: #ffe099;\n  --debug-literal: #d6b7f1;\n  color: #f6f4f2;\n  color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n  align-content: start;\n  scrollbar-gutter: stable;\n  padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n  --debug-state: var(--debug-info);\n  --debug-state-bg: var(--debug-info-bg);\n  border-color: var(--debug-border);\n  border-left-color: var(--debug-state);\n  background: var(--debug-surface);\n  min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n  color: var(--debug-state);\n  background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n  color: var(--debug-info);\n  background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 4px;\n  font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n  min-width: 0;\n  margin: 0;\n  padding: 12px;\n  max-height: 380px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  color: var(--debug-text);\n  background: var(--debug-code);\n  line-height: 1.6;\n  tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n  .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n  .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n  max-width: 100%;\n  min-height: 32px;\n  padding: 6px 8px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n  background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  border-bottom-color: #00758f;\n  background: #e8f4f6;\n  color: #006b84;\n  font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline: 2px solid #00758f;\n  outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n  flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n  flex: 1 1 180px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n  color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n  color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n  border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n  background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  background: #173f48;\n  border-bottom-color: #8cc8d3;\n  color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n  color: #55514d;\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-products-progress,\n  .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n  border: 1px solid #408254;\n  color: #185b30;\n  background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n  align-items: end;\n  gap: 12px;\n  min-height: 0;\n  padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n  min-width: 0;\n  width: 100%;\n  max-width: none;\n  grid-template-rows: auto 32px;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n  width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 32px;\n  min-height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n  padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n  right: 10px;\n  border-left-width: 4px;\n  border-right-width: 4px;\n  border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n  flex-wrap: nowrap;\n  gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 28px;\n  min-height: 28px;\n  padding: 4px 7px;\n  border: 1px solid currentColor;\n  border-radius: 18px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  gap: 4px;\n  height: 20px;\n  min-height: 20px;\n  margin: 0;\n  padding: 0 6px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n  display: block;\n  order: -1;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 700px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n  .opportunities-extension-form .opportunities-extension-status-filter-controls {\n    flex-wrap: wrap;\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-template-rows: auto auto;\n  }\n}\n\n@media (max-width: 420px) {\n  .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n  grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n  column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n  min-width: 32px;\n  gap: 4px;\n  color: #185b30;\n  background: #fff;\n  cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n    display: flex;\n    grid-column: 1 / -1;\n    flex-wrap: wrap;\n    align-items: start;\n    gap: 12px 20px;\n  }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n    width: auto;\n    max-width: 100%;\n    grid-template-rows: auto auto;\n  }\n}\n@media (max-width: 700px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin: 0 0 0 2px;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: grid;\n  place-items: center;\n  padding: 12px;\n  background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n  box-sizing: border-box;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 24px);\n  overflow-y: auto;\n  background: #fff;\n  color: #312d2a;\n  border: 1px solid #b9b4ae;\n  border-radius: 6px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n  padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 12px 0 0;\n  font-size: 12px;\n  line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 8px;\n  font: inherit;\n  line-height: 20px;\n  color: inherit;\n  background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n  .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n  .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  max-height: 180px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n  background: #fff;\n  color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n  animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 7px 14px;\n  font: inherit;\n  font-size: 13px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n  color-scheme: dark;\n  background: #292725;\n  color: #eeeae6;\n  border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n  .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n  width: 100%;\n  min-width: 1120px;\n  table-layout: fixed;\n}\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n  padding: 10px 8px;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n  position: relative;\n  padding-right: 16px;\n  padding-left: 12px;\n  padding-bottom: 38px;\n  vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n  padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n  display: block;\n  min-width: 0;\n  min-height: 2.7em;\n  line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n  position: absolute;\n  left: 12px;\n  right: 16px;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n  flex: 0 0 24px;\n  width: 24px;\n  height: 24px;\n  padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n  min-width: 84px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n  min-width: 0;\n  max-width: 100%;\n  border: 1px solid #bba5cf;\n  background: #f0e8f7;\n  color: #63358a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n  background: #43334f;\n  color: #ead5fc;\n  border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #fde8e7;\n  color: #9f201b;\n  border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #542824;\n  color: #ffd9d5;\n  border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  gap: 6px;\n  padding: 10px 8px;\n  align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n  padding-left: 12px;\n  padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n  position: static;\n  justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n  padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n  background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n  font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n  display: grid; place-items: center; padding: 4px; border: 0;\n  background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n  min-width: 0;\n  flex: 1;\n}\n.opportunities-extension-title-row h1 {\n  display: block;\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n  box-sizing: border-box;\n  margin: 0;\n  min-height: 22px;\n  line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n  width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n  padding: 10px 12px;\n  gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n  font-size: 16px;\n  line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n  font-size: 12px;\n  line-height: 16px;\n  margin-top: 3px;\n  overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n  padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n  width: min(320px, 100%);\n  height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n  width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-partyName { width: 12%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n  padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n  display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n  width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n  padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n  display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n  padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n  border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n  box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n  display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n  border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n  .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n  align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n  line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  box-sizing: border-box;\n  height: 28px;\n  margin: 0;\n  flex: 0 0 auto;\n  padding: 0 8px;\n  border: 1px solid #8aaeb9;\n  border-radius: 4px;\n  background: #fff;\n  color: #006b80;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 20px;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 8;\n  display: flex;\n  justify-content: flex-end;\n  overflow: hidden;\n  overflow: clip;\n  background: rgba(0, 0, 0, 0);\n  transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #fff;\n  --ratecard-heading: #faf9f8;\n  --ratecard-text: #312d2a;\n  --ratecard-muted: #615a55;\n  --ratecard-border: #dedbd8;\n  --ratecard-accent: #00758f;\n  --ratecard-skeleton: #eae7e4;\n  display: grid;\n  grid-template-rows: auto auto auto minmax(0, 1fr);\n  width: min(1520px, calc(100% - 48px));\n  height: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n  transform: translateX(100%);\n  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n  width: min(360px, 100%);\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--ratecard-muted);\n  border-radius: 4px;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n  padding: 11px 10px;\n  border-bottom: 1px solid var(--ratecard-border);\n  vertical-align: top;\n  overflow-wrap: anywhere;\n  text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  align-items: center;\n  gap: 5px;\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #292725;\n  --ratecard-heading: #35322f;\n  --ratecard-text: #f5f3f1;\n  --ratecard-muted: #c2bcb6;\n  --ratecard-border: #514c47;\n  --ratecard-accent: #59d1e5;\n  --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n  .opportunities-extension-ratecard-drawer { width: 100%; }\n  .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n  .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n  grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n  box-sizing: border-box;\n  width: min(420px, 100%);\n  min-width: 0;\n  height: 38px;\n  padding: 8px 12px;\n  border: 1px solid #8f8a85;\n  border-radius: 4px;\n  background: #fff;\n  color: #312d2a;\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n  --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n  --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n  --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n  --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n  --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n  min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n  border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n  --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n  --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n  --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n  --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n  --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n  background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n  .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n  .opportunities-extension-views { min-height: 480px; }\n  .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n  .opportunities-extension-calendar .fc { min-width: 0; }\n  .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n  .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n  .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n  .opportunities-calendar-day-count { top: 25px; }\n  .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n";
+const redwoodStyles = "\n      .opportunities-extension-scroll-lock {\n        overflow: hidden !important;\n      }\n\n      .opportunities-extension-modal,\n      .opportunities-extension-modal * {\n        box-sizing: border-box;\n        font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n      }\n\n      .opportunities-extension-modal {\n        position: fixed;\n        inset: 0;\n        z-index: 2147483647;\n        background: #f5f4f2;\n        color: #000000;\n      }\n\n      .opportunities-extension-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-shell {\n        height: 100vh;\n        min-height: 0;\n        display: grid;\n        grid-template-rows: auto minmax(0, 1fr);\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-header {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 24px;\n        padding: 28px 40px 22px;\n        border-bottom: 1px solid #dedbd7;\n        background:\n          linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #ffffff;\n      }\n\n      .opportunities-extension-header::before {\n        position: absolute;\n        left: 40px;\n        bottom: -1px;\n        width: 64px;\n        height: 3px;\n        background: #00758f;\n        content: \"\";\n      }\n\n      .opportunities-extension-header h1 {\n        margin: 0;\n        color: #000000;\n        font-size: 24px;\n        font-weight: 700;\n        line-height: 1.2;\n        letter-spacing: 0;\n      }\n\n      .opportunities-extension-header p {\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        line-height: 1.4;\n      }\n\n      .opportunities-extension-subtitle-row {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        margin-top: 6px;\n      }\n\n      .opportunities-extension-auth-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        color: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-auth-badge-authenticated {\n        background: #3f6f17;\n      }\n\n      .opportunities-extension-auth-badge-unauthenticated {\n        background: #c5331f;\n      }\n\n      .opportunities-extension-auth-badge-pending {\n        background: #6f5a7f;\n      }\n\n      .opportunities-extension-products-progress {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-progress[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-cache-timestamp {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #f0eeeb;\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-cache-timestamp[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"running\"]::before {\n        width: 12px;\n        height: 12px;\n        margin-right: 6px;\n        border: 2px solid currentColor;\n        border-right-color: transparent;\n        border-radius: 50%;\n        content: \"\";\n        animation: opportunities-extension-spin .8s linear infinite;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-products-progress[data-state=\"error\"] {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      @keyframes opportunities-extension-spin {\n        to { transform: rotate(360deg); }\n      }\n\n      .opportunities-extension-icon-button {\n        width: 36px;\n        height: 36px;\n        flex: 0 0 36px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 18px;\n        font-weight: 600;\n        line-height: 1;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-header-actions {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .opportunities-extension-icon-button svg {\n        width: 18px;\n        height: 18px;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-icon-button:hover,\n      .opportunities-extension-icon-button:focus {\n        border-color: #b8b2ad;\n        background: #f5f4f2;\n        outline: none;\n      }\n\n      .opportunities-extension-body {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        gap: 16px;\n        padding: 22px 40px 36px;\n        background: #f5f4f2;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-form {\n        display: flex;\n        align-items: end;\n        flex-wrap: wrap;\n        gap: 24px;\n        min-height: 82px;\n        max-width: none;\n        margin: 0;\n        padding: 14px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-field {\n        display: grid;\n        max-width: max-content;\n        min-width: 270px;\n        width: max-content;\n        gap: 6px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-dashboard {\n        display: grid;\n        grid-template-columns: repeat(6, minmax(0, 1fr));\n        gap: 12px;\n      }\n\n      .opportunities-extension-stage-dashboard-card {\n        display: grid;\n        gap: 6px;\n        min-width: 0;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-top: 3px solid #5f5a55;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-stage-dashboard-card span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-stage-dashboard-value {\n        overflow: hidden;\n        color: #312d2a;\n        font-size: 22px;\n        font-weight: 700;\n        line-height: 1.2;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #008aa6;\n      }\n\n      .opportunities-extension-total-dashboard-card {\n        border-top-color: #312d2a;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #6f6863;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #c87b00;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #755b8b;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #4b7f22;\n      }\n\n      .opportunities-extension-stage-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-stage-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-stage-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #006b84;\n        background: #006b84;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #5f5a55;\n        background: #5f5a55;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #945400;\n        background: #945400;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #624e74;\n        background: #624e74;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #3f6f17;\n        background: #3f6f17;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-status-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-status-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-status-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-status-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-customer-filter {\n        position: relative;\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 220px;\n      }\n\n      .opportunities-extension-customer-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-customer-filter-trigger {\n        position: relative;\n        min-width: 220px;\n        min-height: 44px;\n        padding: 10px 38px 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-trigger::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-top: 6px solid #312d2a;\n        border-right: 5px solid transparent;\n        border-left: 5px solid transparent;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-customer-filter-trigger:disabled {\n        cursor: not-allowed;\n        background: #f5f4f2;\n        color: #7d7772;\n      }\n\n      .opportunities-extension-customer-filter-trigger:focus-visible {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-panel {\n        position: absolute;\n        top: calc(100% + 8px);\n        left: 0;\n        z-index: 4;\n        display: grid;\n        width: min(360px, calc(100vw - 80px));\n        gap: 10px;\n        padding: 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n      }\n\n      .opportunities-extension-customer-filter-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-customer-filter-search {\n        width: 100%;\n        min-height: 40px;\n        padding: 8px 10px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-customer-filter-search:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-customer-filter-option {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-customer-filter-select-all {\n        min-height: 32px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid #dedbd7;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n        width: 16px;\n        height: 16px;\n        flex: 0 0 16px;\n        accent-color: #00758f;\n      }\n\n      .opportunities-extension-customer-filter-list {\n        display: block;\n        max-height: 250px;\n        overflow: auto;\n      }\n\n      .opportunities-extension-customer-filter-option {\n        display: grid;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: start;\n        min-height: 0;\n        height: auto !important;\n        padding: 8px 4px;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n        margin-top: 1px;\n      }\n\n      .opportunities-extension-customer-filter-option span {\n        display: block;\n        min-width: 0;\n        line-height: 18px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n      }\n\n      .opportunities-extension-customer-filter-option:hover {\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-customer-filter-empty {\n        margin: 4px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-table-search-field {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        width: 260px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input {\n        width: 100%;\n        min-height: 44px;\n        padding: 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-select-wrap {\n        position: relative;\n        display: block;\n        width: 270px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-select-wrap::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 6px solid #000000;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-field select {\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        min-height: 44px;\n        box-sizing: border-box;\n        appearance: none;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #000000;\n        font-size: 14px;\n        line-height: 1.3;\n        padding: 11px 44px 11px 12px;\n      }\n\n      .opportunities-extension-field select:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-table-surface {\n        min-height: 0;\n        height: 100%;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n        overflow-x: auto;\n        overflow-y: auto;\n      }\n\n      .opportunities-extension-table {\n        width: 100%;\n        min-width: 0;\n        border-collapse: collapse;\n        table-layout: fixed;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-table thead {\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-table th {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        height: 44px;\n        border-bottom: 1px solid #b8b2ad;\n        background: #faf9f8;\n        color: #312d2a;\n        font-size: 12px;\n        font-weight: 700;\n        text-align: left;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td {\n        min-height: 48px;\n        padding: 12px 16px;\n        border-bottom: 1px solid #ebe8e5;\n        vertical-align: middle;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-table th:nth-child(1) {\n        width: 16%;\n      }\n\n      .opportunities-extension-table th:nth-child(2) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(3) {\n        width: 18%;\n      }\n\n      .opportunities-extension-table th:nth-child(4) {\n        width: 11%;\n      }\n\n      .opportunities-extension-table th:nth-child(5) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(6) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(7) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(8) {\n        width: 6%;\n      }\n\n      .opportunities-extension-table th:nth-child(9) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(10) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(11) {\n        width: 4%;\n      }\n\n      .opportunities-extension-table td:nth-child(2),\n      .opportunities-extension-table td:nth-child(5),\n      .opportunities-extension-table td:nth-child(6),\n      .opportunities-extension-table td:nth-child(8) {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .opportunities-extension-table td:nth-child(9) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(7) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(10) {\n        padding-right: 6px;\n        padding-left: 6px;\n        font-size: 12px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td:nth-child(11) {\n        padding-right: 6px;\n        padding-left: 6px;\n        text-align: center;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table tbody tr:hover {\n        background: #f7f6f4;\n      }\n\n      .opportunities-extension-table tbody tr:last-child td {\n        border-bottom: 0;\n      }\n\n      .opportunities-extension-table a {\n        color: #006b84;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 2px;\n      }\n\n      .opportunities-extension-table a:hover {\n        color: #004f63;\n      }\n\n      .opportunities-extension-opty-number-content {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-name-content {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-name-content > a {\n        min-width: 0;\n      }\n\n      .opportunities-extension-actions-content {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-products-count {\n        display: inline-grid;\n        width: auto;\n        min-width: 20px;\n        height: 20px;\n        place-items: center;\n        flex: 0 0 auto;\n        box-sizing: border-box;\n        padding: 0 3px;\n        border: 1px solid #7ca7b2;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 1;\n        text-align: center;\n        vertical-align: middle;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-products-count:hover,\n      .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n        outline: none;\n      }\n\n      .opportunities-extension-products-count-error {\n        border-color: #d8887e;\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-products-detail-row:hover {\n        background: transparent !important;\n      }\n\n      .opportunities-extension-products-detail-cell {\n        padding: 0 !important;\n      }\n\n      .opportunities-extension-products-detail {\n        padding: 14px 20px 18px;\n        border-bottom: 1px solid #c9c5c1;\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-products-detail-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 10px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-ai-summary {\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n        margin: 0 0 12px;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 6px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.5;\n        text-align: left;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-ai-summary strong {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n      }\n\n      .opportunities-extension-ai-summary p {\n        margin: 4px 0 0;\n        font: inherit;\n        white-space: pre-wrap;\n      }\n\n      .opportunities-extension-ai-summary-error {\n        color: #b42318;\n        border-color: #d9928b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n        background: #292827;\n        color: #f6f4f2;\n        border-color: #5f5a55;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n        color: #ffb4ab;\n        border-color: #a45c55;\n      }\n\n      .opportunities-extension-products-detail-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-products-detail-heading span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-products-table {\n        width: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border: 1px solid #dedbd7;\n        background: #ffffff;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-products-table th,\n      .opportunities-extension-products-table td {\n        position: static;\n        height: auto;\n        padding: 8px 10px;\n        border-bottom: 1px solid #ebe8e5;\n        background: transparent;\n        overflow-wrap: anywhere;\n        vertical-align: middle;\n        white-space: normal;\n      }\n\n      .opportunities-extension-products-table th {\n        background: #faf9f8;\n        font-size: 11px;\n      }\n\n      .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n      .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n      .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n      .opportunities-extension-products-empty {\n        margin: 0;\n        padding: 10px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-copy-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        width: 24px;\n        height: 24px;\n        padding: 3px;\n        border: 0;\n        border-radius: 3px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-copy-button svg {\n        width: 16px;\n        height: 16px;\n        fill: currentColor;\n      }\n\n      .opportunities-extension-copy-button:hover,\n      .opportunities-extension-copy-button:focus-visible {\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        padding: 5px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-action-button svg {\n        width: 21px;\n        height: 21px;\n      }\n\n      .opportunities-extension-action-button:hover,\n      .opportunities-extension-action-button:focus-visible {\n        border-color: #7ca7b2;\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button:disabled {\n        cursor: wait;\n        opacity: .72;\n      }\n\n      .opportunities-extension-action-button-loading svg {\n        animation: opportunities-extension-pulse 1s ease-in-out infinite;\n      }\n\n      @keyframes opportunities-extension-pulse {\n        50% { opacity: .35; }\n      }\n\n      .opportunities-extension-copy-toast {\n        position: fixed;\n        right: 28px;\n        bottom: 28px;\n        z-index: 3;\n        max-width: min(360px, calc(100vw - 56px));\n        padding: 12px 16px;\n        border-radius: 4px;\n        background: #2f6f18;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n        color: #ffffff;\n        font-size: 13px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-copy-toast-error {\n        background: #a52b1c;\n      }\n\n      .opportunities-extension-copy-toast[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-stage-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n        background: #d9f0f5;\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n        background: #fff0d8;\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n        background: #eee8f5;\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n        background: #e5f1d9;\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-status-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n        background: #e2f2e5;\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n        background: #e5e7eb;\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"LOST\"] {\n        background: #f9e3e1;\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"WON\"] {\n        background: #e3edf8;\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-sort-button {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        width: 100%;\n        min-height: 44px;\n        padding: 8px 42px 8px 16px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-weight: inherit;\n        letter-spacing: 0;\n        line-height: 1.2;\n        text-align: left;\n        white-space: normal;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-table-header-label {\n        display: inline-flex;\n        align-items: center;\n        min-height: 44px;\n        padding: 8px 6px;\n      }\n\n      .opportunities-extension-sort-button::after {\n        position: absolute;\n        right: 15px;\n        color: #5f5a55;\n        content: \"↕\";\n        font-size: 16px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n        color: #00758f;\n        content: \"↑\";\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n        color: #00758f;\n        content: \"↓\";\n      }\n\n      .opportunities-extension-sort-button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-sort-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-table-status {\n        height: 152px;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        display: grid;\n        place-items: center;\n        padding: 24px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-preferences-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 4;\n        display: grid;\n        place-items: center;\n        padding: 12px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-account-plans-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-dialog {\n        display: grid;\n        width: min(1180px, 100%);\n        height: min(760px, calc(100vh - 24px));\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plans-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 14px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-header h2 {\n        margin: 0;\n        font-size: 20px;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-account-plans-header p {\n        margin: 5px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-account-plans-content {\n        display: grid;\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n        grid-row: 1 / -1;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation {\n        position: relative;\n        min-width: 0;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tabs {\n        display: flex;\n        min-width: 0;\n        gap: 4px;\n        overflow-x: auto;\n        padding: 8px 20px 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button {\n        display: grid;\n        position: absolute;\n        z-index: 1;\n        top: 50%;\n        width: 32px;\n        height: 32px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n        transform: translateY(-50%);\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:first-child {\n        left: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:last-child {\n        right: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-account-plans-panels {\n        min-width: 0;\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plan-tab {\n        min-height: 38px;\n        flex: 0 0 auto;\n        padding: 7px 12px;\n        border: 0;\n        border-bottom: 3px solid transparent;\n        background: transparent;\n        color: #5f5a55;\n        font-size: 13px;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plan-tab:hover {\n        background: #f0eeeb;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #00758f;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-account-plan-tab:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-account-plan-panel {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        box-sizing: border-box;\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plan-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plan-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        margin: 0;\n      }\n\n      .opportunities-extension-account-plan-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        gap: 10px;\n        min-height: 42px;\n        align-items: center;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plan-details dt {\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-account-plan-details dd {\n        min-width: 0;\n        margin: 0;\n        color: #312d2a;\n        font-size: 13px;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-consumption-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 14px;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-trend-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 24px;\n      }\n\n      .opportunities-extension-consumption-periods {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-periods button {\n        min-height: 38px;\n        padding: 7px 14px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-periods button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #00758f;\n        background: #e7f6f8;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-periods button:focus-visible,\n      .opportunities-extension-consumption-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-consumption-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 4px;\n      }\n\n      .opportunities-extension-consumption-navigation {\n        display: grid;\n        grid-template-columns: 36px minmax(130px, auto) 36px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 40px;\n        margin-bottom: 2px;\n      }\n\n      .opportunities-extension-consumption-navigation strong {\n        color: #312d2a;\n        font-size: 13px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-navigation-button {\n        display: grid;\n        width: 36px;\n        height: 36px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-consumption-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-consumption-figure {\n        position: relative;\n        min-width: 0;\n        min-height: 0;\n        margin: 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-consumption-figure::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-consumption-visual {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 176px;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-consumption-svg {\n        display: block;\n        width: 100%;\n        height: 300px;\n        min-height: 0;\n        overflow: visible;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #dedbd7;\n        stroke-width: 1;\n        shape-rendering: crispEdges;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #5f5a55;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #312d2a;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #b77888;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #de7907;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #de7907;\n        stroke-width: 1.5;\n        stroke-dasharray: 6 6;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group {\n        cursor: default;\n        outline: none;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group rect {\n        transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        filter: brightness(1.06);\n        stroke: #312d2a;\n        stroke-width: 1.5;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-label {\n        opacity: 0;\n        animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-average {\n        opacity: 0;\n        animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n      }\n\n      @keyframes opportunities-extension-consumption-label-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      @keyframes opportunities-extension-consumption-average-in {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n\n      .opportunities-extension-consumption-legend {\n        display: grid;\n        align-content: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-legend button {\n        display: grid;\n        min-width: 0;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: center;\n        gap: 8px;\n        padding: 6px 4px;\n        border: 0;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.25;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-legend button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-legend button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 1px;\n      }\n\n      .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #77726d;\n        opacity: .55;\n      }\n\n      .opportunities-extension-consumption-legend-swatch {\n        display: block;\n        width: 12px;\n        height: 12px;\n        justify-self: center;\n      }\n\n      .opportunities-extension-consumption-legend-funded {\n        background: #b77888;\n      }\n\n      .opportunities-extension-consumption-legend-overage {\n        background: #de7907;\n      }\n\n      .opportunities-extension-consumption-legend-average {\n        height: 0;\n        border-top: 2px dashed #de7907;\n      }\n\n      .opportunities-extension-consumption-tooltip {\n        position: absolute;\n        z-index: 2;\n        display: grid;\n        min-width: 190px;\n        max-width: 260px;\n        gap: 4px;\n        padding: 10px 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.3;\n        pointer-events: none;\n      }\n\n      .opportunities-extension-consumption-tooltip[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-consumption-tooltip strong {\n        margin-bottom: 2px;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton {\n        height: 100%;\n        min-height: 0;\n        padding: 34px 62px 24px;\n        box-sizing: border-box;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot {\n        display: flex;\n        height: 100%;\n        min-height: 220px;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px;\n        border-bottom: 1px solid #dedbd7;\n        border-left: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot span {\n        width: min(38px, 6%);\n        border-radius: 2px 2px 0 0;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-consumption-chart-empty,\n      .opportunities-extension-consumption-chart-error {\n        display: grid;\n        min-height: 220px;\n        place-items: center;\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-chart-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-account-plan-status-indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #9b9691;\n        box-shadow: 0 0 0 3px #efedeb;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #3f6f17;\n        box-shadow: 0 0 0 3px #e2f2e5;\n      }\n\n      .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n        margin-right: 8px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs {\n        display: flex;\n        min-height: 46px;\n        align-items: center;\n        padding: 0 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-skeleton-panel {\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tab {\n        display: inline-flex;\n        align-items: center;\n        gap: 9px;\n        min-height: 38px;\n        padding: 0 12px;\n        border-bottom: 3px solid #00758f;\n      }\n\n      .opportunities-extension-account-plans-skeleton-status {\n        display: block;\n        width: 10px;\n        height: 10px;\n        flex: 0 0 auto;\n        border-radius: 50%;\n        background: #dedbd7;\n        box-shadow: 0 0 0 3px #efedeb;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        padding: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        align-items: center;\n        gap: 10px;\n        min-height: 42px;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plans-skeleton-bar {\n        display: block;\n        height: 12px;\n        border-radius: 3px;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n        height: 14px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-label {\n        width: 74%;\n        height: 10px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        margin: 14px 0 0;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend-header {\n        display: flex;\n        justify-content: flex-end;\n        min-height: 38px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n        height: 12px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-period-active {\n        height: 38px !important;\n        border: 1px solid #8cc8d3;\n        background: #e7f6f8;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation {\n        display: grid;\n        grid-template-columns: 32px 124px 32px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 54px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n        justify-self: center;\n      }\n\n      .opportunities-extension-account-plans-skeleton-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 150px;\n        align-items: center;\n        gap: 28px;\n        padding: 12px 14px 0 62px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot {\n        display: flex;\n        position: relative;\n        height: 300px;\n        min-height: 0;\n        box-sizing: border-box;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px 64px;\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        position: absolute;\n        display: block;\n        content: \"\";\n        background: #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before {\n        top: 0;\n        bottom: 64px;\n        left: 0;\n        width: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        right: 0;\n        bottom: 64px;\n        left: 0;\n        height: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n        width: min(38px, 7%);\n        flex: 0 1 38px;\n        border-radius: 2px 2px 0 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend {\n        display: grid;\n        align-content: center;\n        gap: 18px;\n        min-height: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n        height: 11px;\n      }\n\n      @keyframes opportunities-extension-skeleton-pulse {\n        from { opacity: .48; }\n        to { opacity: 1; }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .opportunities-extension-account-plans-skeleton-bar,\n        .opportunities-extension-consumption-chart-skeleton-plot span,\n        .opportunities-extension-consumption-svg .consumption-animated-label,\n        .opportunities-extension-consumption-svg .consumption-animated-average {\n          animation: none;\n          opacity: 1;\n        }\n      }\n\n      .opportunities-extension-account-plans-empty,\n      .opportunities-extension-account-plans-error {\n        margin: 0;\n        padding: 28px 20px;\n        color: #5f5a55;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-account-plans-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-preferences-dialog {\n        display: grid;\n        width: min(680px, 100%);\n        max-height: min(720px, calc(100vh - 48px));\n        grid-template-rows: auto minmax(0, 1fr) auto;\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-preferences-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 18px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-preferences-header h2 {\n        margin: 0;\n        font-size: 20px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-preferences-content {\n        min-height: 0;\n        overflow: auto;\n        padding: 20px;\n      }\n\n      .opportunities-extension-preferences-fieldset {\n        min-width: 0;\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-fieldset legend {\n        margin-bottom: 12px;\n        padding: 0;\n        color: #312d2a;\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-preferences-options {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 4px 20px;\n      }\n\n      .opportunities-extension-preferences-option {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        min-width: 0;\n        padding: 9px 8px;\n        border-radius: 4px;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.35;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-option:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-preferences-option input {\n        width: 18px;\n        height: 18px;\n        flex: 0 0 18px;\n        margin: 0;\n        accent-color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-cache-field {\n        display: grid;\n        width: min(280px, 100%);\n        gap: 6px;\n        margin-top: 24px;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-preferences-cache-field select {\n        width: 100%;\n        height: 40px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-preferences-cache-field select:focus {\n        border-color: #00758f;\n        outline: 2px solid #bde7ee;\n        outline-offset: 0;\n      }\n\n      .opportunities-extension-preferences-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 14px 20px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-button {\n        min-width: 88px;\n        min-height: 36px;\n        padding: 7px 16px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-button-primary {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-button-primary:hover,\n      .opportunities-extension-button-primary:focus-visible {\n        border-color: #005e73;\n        background: #005e73;\n        outline: none;\n      }\n\n      .opportunities-extension-debug-panel {\n        position: fixed;\n        right: 24px;\n        bottom: 24px;\n        z-index: 1;\n        width: min(640px, calc(100vw - 48px));\n        max-height: min(560px, calc(100vh - 120px));\n        overflow: auto;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n        padding: 16px;\n        color: #000000;\n      }\n\n      .opportunities-extension-debug-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-debug-panel h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1.25;\n      }\n\n      .opportunities-extension-debug-panel p {\n        margin: 4px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-panel-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 12px;\n      }\n\n      .opportunities-extension-debug-visibility-button {\n        width: 34px;\n        height: 34px;\n        flex: 0 0 34px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-debug-visibility-button svg {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-debug-list {\n        display: grid;\n        gap: 10px;\n      }\n\n      .opportunities-extension-debug-item {\n        border: 1px solid #dedbd7;\n        border-left-width: 4px;\n        border-radius: 4px;\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-debug-item[open] {\n        background: #ffffff;\n      }\n\n      .opportunities-extension-debug-item-success {\n        border-left-color: #3f6f17;\n      }\n\n      .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-debug-item-failed {\n        border-left-color: #c5331f;\n      }\n\n      .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-debug-item-pending {\n        border-left-color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n        background: #eee8f2;\n        color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        min-height: 42px;\n        padding: 9px 12px 9px 10px;\n        cursor: pointer;\n        list-style: none;\n      }\n\n      .opportunities-extension-debug-heading::-webkit-details-marker {\n        display: none;\n      }\n\n      .opportunities-extension-debug-heading::before {\n        content: \"⌄\";\n        width: 14px;\n        color: #5f5a55;\n        font-size: 16px;\n        line-height: 1;\n        transform: rotate(-90deg);\n        transition: transform .15s ease;\n      }\n\n      .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n        transform: rotate(0deg);\n      }\n\n      .opportunities-extension-debug-summary-meta {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-left: auto;\n      }\n\n      .opportunities-extension-debug-http-status,\n      .opportunities-extension-debug-status {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 0 8px;\n        border-radius: 999px;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-debug-http-status {\n        background: #e8f4f6;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-debug-status {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-debug-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-item pre {\n        margin: 0;\n        padding: 8px 12px 12px;\n        color: #312d2a;\n        font-family: Consolas, \"Courier New\", monospace;\n        font-size: 12px;\n        line-height: 1.45;\n        white-space: pre-wrap;\n        word-break: break-word;\n      }\n\n      .opportunities-extension-debug-empty {\n        padding: 14px;\n        border: 1px dashed #b8b2ad;\n        border-radius: 4px;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] {\n        background: #1f1f1f;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n        background: #1f1f1f;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n        border-bottom-color: #4e4a46;\n        background:\n          linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n        background: #5b5753;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n        border-color: #3f7580;\n        background: #23474e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n        background: #8f8a85;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #7fb05b;\n        box-shadow: 0 0 0 3px #314527;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n        border-color: #4e4a46;\n        background: #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n        background: #292827;\n        color: #918b86;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n        color: #b5b0ab;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n        border-bottom-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n        background: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n        background: #3b3937;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #43c4d5;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #43c4d5;\n        background: #173e43;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #43c4d5;\n        background: #3b3937;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #4e4a46;\n        color: #746f6a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        stroke: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #a8a39e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n        background: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n        background: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n        border-top-color: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n        accent-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n        border-color: #00a6be;\n        background: #008aa6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n        border-color: #43c4d5;\n        background: #006d7a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n        border-bottom-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n        border-color: #2f9bae;\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #43c4d5;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #244f2e;\n        color: #a8dfb7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n        border-color: #b13b34;\n        background: #5f2926;\n        color: #ffb4ad;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n        background: #3b3937;\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #d1cbc6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #ffbf62;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #d2b7e9;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #9bd46a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #c0b9b3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #ffb84d;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #cba7e7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #92cf5b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #008aa6;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #6f6863;\n        background: #6f6863;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #b96e00;\n        background: #b96e00;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #755b8b;\n        background: #755b8b;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #4b7f22;\n        background: #4b7f22;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #69c985;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #c3cad3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #ff9d94;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #83bfff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n        border-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n        color: #f6f4f2;\n      }\n\n      @media (min-width: 1201px) and (max-width: 1450px) {\n        .opportunities-extension-table th:nth-child(1) {\n          width: 16%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 18%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 12%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 7%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 8%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 10%;\n        }\n      }\n\n      @media (max-width: 1200px) {\n        .opportunities-extension-table {\n          min-width: 1180px;\n        }\n\n        .opportunities-extension-table th:nth-child(1) {\n          width: 15%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 17%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 13%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 6%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 9%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 11%;\n        }\n      }\n\n      @media (max-width: 700px) {\n        .opportunities-extension-header {\n          padding: 24px 20px 18px;\n        }\n\n        .opportunities-extension-header::before {\n          left: 20px;\n        }\n\n        .opportunities-extension-header h1 {\n          font-size: 22px;\n        }\n\n        .opportunities-extension-header p {\n          font-size: 14px;\n        }\n\n        .opportunities-extension-body {\n          padding: 16px 20px 24px;\n        }\n\n        .opportunities-extension-form {\n          align-items: stretch;\n          flex-wrap: wrap;\n          gap: 14px;\n          min-height: auto;\n          padding: 12px;\n        }\n\n        .opportunities-extension-field {\n          max-width: none;\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-trigger {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-panel {\n          width: min(360px, calc(100vw - 64px));\n        }\n\n        .opportunities-extension-table-search-field {\n          width: 100%;\n        }\n\n        .opportunities-extension-stage-dashboard {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .opportunities-extension-stage-dashboard-value {\n          font-size: 18px;\n        }\n\n        .opportunities-extension-preferences-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-account-plans-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-preferences-dialog {\n          max-height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plans-dialog {\n          height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plan-panel {\n          padding: 12px 14px;\n        }\n\n        .opportunities-extension-account-plan-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n        }\n\n        .opportunities-extension-account-plan-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 3px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n          padding: 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 5px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-trend {\n          margin: 14px 0 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          align-items: center;\n          gap: 6px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n          width: 100% !important;\n        }\n\n        .opportunities-extension-account-plans-skeleton-chart {\n          grid-template-columns: minmax(0, 1fr);\n          gap: 12px;\n          padding: 12px 8px 0 34px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-legend {\n          display: flex;\n          min-height: 24px;\n          align-items: center;\n          justify-content: center;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-trend-header {\n          align-items: stretch;\n        }\n\n        .opportunities-extension-consumption-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          gap: 3px;\n        }\n\n        .opportunities-extension-consumption-periods button {\n          min-width: 0;\n          padding: 7px 4px;\n          font-size: 12px;\n        }\n\n        .opportunities-extension-consumption-chart {\n          min-height: 0;\n        }\n\n        .opportunities-extension-consumption-svg {\n          width: 760px;\n          height: 245px;\n        }\n\n        .opportunities-extension-consumption-visual {\n          width: 920px;\n          grid-template-columns: 760px 144px;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-figure {\n          overflow-x: auto;\n          overscroll-behavior-inline: contain;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton {\n          min-height: 0;\n          padding: 24px 18px 18px;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton-plot {\n          min-height: 180px;\n          gap: 4px;\n          padding: 0 6px;\n        }\n\n        .opportunities-extension-preferences-options {\n          grid-template-columns: 1fr;\n        }\n\n        .opportunities-extension-stage-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-status-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-table-surface {\n          min-width: 0;\n          min-height: calc(100vh - 230px);\n        }\n\n        .opportunities-extension-debug-panel {\n          right: 12px;\n          bottom: 12px;\n          width: calc(100vw - 24px);\n          max-height: calc(100vh - 96px);\n        }\n      }\n    \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n  --debug-surface: #fff;\n  --debug-code: #f5f6f7;\n  --debug-text: #312d2a;\n  --debug-muted: #5f5a55;\n  --debug-border: #dedbd7;\n  --debug-success: #22613b;\n  --debug-success-bg: #e1f1e5;\n  --debug-failed: #a12721;\n  --debug-failed-bg: #fce8e6;\n  --debug-pending: #805000;\n  --debug-pending-bg: #fff1ce;\n  --debug-info: #075e87;\n  --debug-info-bg: #e5f1fa;\n  --debug-key: #075e87;\n  --debug-string: #22613b;\n  --debug-number: #865000;\n  --debug-literal: #73429b;\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr);\n  width: auto;\n  height: auto;\n  max-height: none;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: 0;\n  padding: 20px;\n  border: 0;\n  border-radius: 0;\n  background: var(--debug-surface);\n  color: var(--debug-text);\n  color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n  --debug-surface: #292827;\n  --debug-code: #222120;\n  --debug-text: #f6f4f2;\n  --debug-muted: #c9c5c1;\n  --debug-border: #514c47;\n  --debug-success: #a9e3bd;\n  --debug-success-bg: #214d34;\n  --debug-failed: #ffb4ab;\n  --debug-failed-bg: #582c2a;\n  --debug-pending: #ffe099;\n  --debug-pending-bg: #59441e;\n  --debug-info: #a8d9ff;\n  --debug-info-bg: #233f52;\n  --debug-key: #8ed6f0;\n  --debug-string: #a9e3bd;\n  --debug-number: #ffe099;\n  --debug-literal: #d6b7f1;\n  color: #f6f4f2;\n  color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n  align-content: start;\n  scrollbar-gutter: stable;\n  padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n  --debug-state: var(--debug-info);\n  --debug-state-bg: var(--debug-info-bg);\n  border-color: var(--debug-border);\n  border-left-color: var(--debug-state);\n  background: var(--debug-surface);\n  min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n  color: var(--debug-state);\n  background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n  color: var(--debug-info);\n  background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 4px;\n  font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n  min-width: 0;\n  margin: 0;\n  padding: 12px;\n  max-height: 380px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  color: var(--debug-text);\n  background: var(--debug-code);\n  line-height: 1.6;\n  tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n  .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n  .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n  max-width: 100%;\n  min-height: 32px;\n  padding: 6px 8px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n  background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  border-bottom-color: #00758f;\n  background: #e8f4f6;\n  color: #006b84;\n  font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline: 2px solid #00758f;\n  outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n  flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n  flex: 1 1 180px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n  color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n  color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n  border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n  background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  background: #173f48;\n  border-bottom-color: #8cc8d3;\n  color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n  color: #55514d;\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-products-progress,\n  .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n  border: 1px solid #408254;\n  color: #185b30;\n  background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n  align-items: end;\n  gap: 12px;\n  min-height: 0;\n  padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n  min-width: 0;\n  width: 100%;\n  max-width: none;\n  grid-template-rows: auto 32px;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n  width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 32px;\n  min-height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n  padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n  right: 10px;\n  border-left-width: 4px;\n  border-right-width: 4px;\n  border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n  flex-wrap: nowrap;\n  gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 28px;\n  min-height: 28px;\n  padding: 4px 7px;\n  border: 1px solid currentColor;\n  border-radius: 18px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  gap: 4px;\n  height: 20px;\n  min-height: 20px;\n  margin: 0;\n  padding: 0 6px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n  display: block;\n  order: -1;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 700px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n  .opportunities-extension-form .opportunities-extension-status-filter-controls {\n    flex-wrap: wrap;\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-template-rows: auto auto;\n  }\n}\n\n@media (max-width: 420px) {\n  .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n  grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n  column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n  min-width: 32px;\n  gap: 4px;\n  color: #185b30;\n  background: #fff;\n  cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n    display: flex;\n    grid-column: 1 / -1;\n    flex-wrap: wrap;\n    align-items: start;\n    gap: 12px 20px;\n  }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n    width: auto;\n    max-width: 100%;\n    grid-template-rows: auto auto;\n  }\n}\n@media (max-width: 700px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin: 0 0 0 2px;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: grid;\n  place-items: center;\n  padding: 12px;\n  background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n  box-sizing: border-box;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 24px);\n  overflow-y: auto;\n  background: #fff;\n  color: #312d2a;\n  border: 1px solid #b9b4ae;\n  border-radius: 6px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n  padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 12px 0 0;\n  font-size: 12px;\n  line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 8px;\n  font: inherit;\n  line-height: 20px;\n  color: inherit;\n  background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n  .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n  .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  max-height: 180px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n  background: #fff;\n  color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n  animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 7px 14px;\n  font: inherit;\n  font-size: 13px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n  color-scheme: dark;\n  background: #292725;\n  color: #eeeae6;\n  border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n  .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n  width: 100%;\n  min-width: 1120px;\n  table-layout: fixed;\n}\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n  padding: 10px 8px;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n  position: relative;\n  padding-right: 16px;\n  padding-left: 12px;\n  padding-bottom: 38px;\n  vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n  padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n  display: block;\n  min-width: 0;\n  min-height: 2.7em;\n  line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n  position: absolute;\n  left: 12px;\n  right: 16px;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n  flex: 0 0 24px;\n  width: 24px;\n  height: 24px;\n  padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n  min-width: 84px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n  min-width: 0;\n  max-width: 100%;\n  border: 1px solid #bba5cf;\n  background: #f0e8f7;\n  color: #63358a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n  background: #43334f;\n  color: #ead5fc;\n  border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #fde8e7;\n  color: #9f201b;\n  border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #542824;\n  color: #ffd9d5;\n  border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  gap: 6px;\n  padding: 10px 8px;\n  align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n  padding-left: 12px;\n  padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n  position: static;\n  justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n  padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n  background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n  font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n  display: grid; place-items: center; padding: 4px; border: 0;\n  background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n  min-width: 0;\n  flex: 1;\n}\n.opportunities-extension-title-row h1 {\n  display: block;\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n  box-sizing: border-box;\n  margin: 0;\n  min-height: 22px;\n  line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n  width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n  padding: 10px 12px;\n  gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n  font-size: 16px;\n  line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n  font-size: 12px;\n  line-height: 16px;\n  margin-top: 3px;\n  overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n  padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n  width: min(320px, 100%);\n  height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n  width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-partyName { width: 12%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n  padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n  display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n  width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n  padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n  display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n  padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n  border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n  box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n  display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n  border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n  .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n  align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n  line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  box-sizing: border-box;\n  height: 28px;\n  margin: 0;\n  flex: 0 0 auto;\n  padding: 0 8px;\n  border: 1px solid #8aaeb9;\n  border-radius: 4px;\n  background: #fff;\n  color: #006b80;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 20px;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 8;\n  display: flex;\n  justify-content: flex-end;\n  overflow: hidden;\n  overflow: clip;\n  background: rgba(0, 0, 0, 0);\n  transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #fff;\n  --ratecard-heading: #faf9f8;\n  --ratecard-text: #312d2a;\n  --ratecard-muted: #615a55;\n  --ratecard-border: #dedbd8;\n  --ratecard-accent: #00758f;\n  --ratecard-skeleton: #eae7e4;\n  display: grid;\n  grid-template-rows: auto auto auto minmax(0, 1fr);\n  width: min(1520px, calc(100% - 48px));\n  height: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n  transform: translateX(100%);\n  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n  width: min(360px, 100%);\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--ratecard-muted);\n  border-radius: 4px;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n  padding: 11px 10px;\n  border-bottom: 1px solid var(--ratecard-border);\n  vertical-align: top;\n  overflow-wrap: anywhere;\n  text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  align-items: center;\n  gap: 5px;\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #292725;\n  --ratecard-heading: #35322f;\n  --ratecard-text: #f5f3f1;\n  --ratecard-muted: #c2bcb6;\n  --ratecard-border: #514c47;\n  --ratecard-accent: #59d1e5;\n  --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n  .opportunities-extension-ratecard-drawer { width: 100%; }\n  .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n  .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n  grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n  box-sizing: border-box;\n  width: min(420px, 100%);\n  min-width: 0;\n  height: 38px;\n  padding: 8px 12px;\n  border: 1px solid #8f8a85;\n  border-radius: 4px;\n  background: #fff;\n  color: #312d2a;\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n  --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n  --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n  --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n  --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n  --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n  min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n  border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n  --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n  --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n  --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n  --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n  --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n  background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n  .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n  .opportunities-extension-views { min-height: 480px; }\n  .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n  .opportunities-extension-calendar .fc { min-width: 0; }\n  .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n  .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n  .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n  .opportunities-calendar-day-count { top: 25px; }\n  .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n  .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n  .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n  .opportunities-extension-projection-body { padding: 12px 12px 0; }\n  .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n  .opportunities-extension-projection-footer { padding: 12px; }\n}\n";
 function loadOpportunityCalendarLibrary() {
 /* MIT License
 
@@ -615,6 +615,8 @@ function createMessageTypes() {
     requestInstallBase: "opportunitiesExtension.requestInstallBase",
     requestCustomerServiceRequest: "opportunitiesExtension.requestCustomerServiceRequest",
     requestWlActions: "opportunitiesExtension.requestWlActions",
+    requestWorkloads: "opportunitiesExtension.requestWorkloads",
+    requestWorkloadForecastUpdate: "opportunitiesExtension.requestWorkloadForecastUpdate",
     requestActionTeamMembers: "opportunitiesExtension.requestActionTeamMembers",
     requestActionFindLookup: "opportunitiesExtension.requestActionFindLookup",
     requestMgmtAction: "opportunitiesExtension.requestMgmtAction",
@@ -814,11 +816,12 @@ function createFormRequestCache({ getHours, getUserId }) {
   let generation = 0;
   let owner = "";
   const queries = new Set([
+    "requestWorkloads",
     "requestWeekDetails", "requestTimeEntries", "requestActiveServiceRequests", "requestServiceRequestExpand", "requestLookupTaskType",
     "requestActionTeamMembers", "requestActionFindLookup", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage",
     "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestLookupTypePlatform", "requestInternalSrServices"
   ]);
-  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest"]);
+  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest", "requestWorkloadForecastUpdate"]);
   function invalidate() { generation++; entries.clear(); pending.clear(); }
   function maxAge() {
     const hours = Number(getHours());
@@ -844,7 +847,10 @@ function createFormRequestCache({ getHours, getUserId }) {
       if (result?.ok && writes.has(operation) && !(operation === "requestPostServiceRequest" && message.phase === "prepare")) invalidate();
       return result;
     }
-    const key = JSON.stringify(stable(message));
+    // Workloads are scoped to the user/account, not the rotating WWB token or the selected Reference.
+    const key = JSON.stringify(stable(operation === "requestWorkloads"
+      ? { type: message.type, customerId: String(message.customerId), principal: String(message.principal || userId).trim().toLowerCase() }
+      : message));
     const hit = entries.get(key);
     if (hit && Date.now() >= hit.fetchedAt && Date.now() - hit.fetchedAt < duration) {
       return { ...copy(hit.result), debugRequests: [], fromCache: true, cachedAt: hit.fetchedAt };
@@ -856,10 +862,14 @@ function createFormRequestCache({ getHours, getUserId }) {
     }
     const version = generation;
     const promise = transport(request).then(result => {
-      if (result?.ok && version === generation) {
+      const workload = operation === "requestWorkloads";
+      const fetchedAt = workload && Number.isFinite(result?.cachedAt) ? result.cachedAt : Date.now();
+      const cacheable = !workload || (Array.isArray(result?.workloads) && (!result.fromCache || Number.isFinite(result.cachedAt)));
+      if (result?.ok && cacheable && version === generation) {
         // Keep this per-page cache bounded and avoid persisting credentials or customer data to disk.
         if (entries.size >= 500) entries.delete(entries.keys().next().value);
-        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt: Date.now() });
+        // Reusing a persistent workload entry must not restart its original TTL.
+        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt });
       }
       return result;
     });
@@ -876,6 +886,8 @@ function createProductsContentState() {
     currentProductsRequestId: "",
     productsRenderQueued: false,
     opptyProductsByNumber: new Map(),
+    workloadCustomerIds: [],
+    workloadsByCustomer: new Map(),
     expandedProductOptyNumbers: new Set(),
     productsProgress: {
     state: "idle",
@@ -1838,7 +1850,49 @@ function createContentIcons({
     svg.append(path);
     return svg;
   }
-  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon };
+  function createAlertIcon() {
+    /* Lucide triangle-alert (https://lucide.dev/icons/triangle-alert), ISC License.
+     * Copyright (c) 2026 Lucide Icons and Contributors
+     * Permission to use, copy, modify, and/or distribute this software for any
+     * purpose with or without fee is hereby granted, provided that the above
+     * copyright notice and this permission notice appear in all copies.
+     * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+     * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+     * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+     * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+     * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+     * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+     * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+     *
+     * Derived from Feather alert-triangle, MIT License.
+     * Copyright (c) 2013-present Cole Bemis
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     * The above copyright notice and this permission notice shall be included in all
+     * copies or substantial portions of the Software.
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+     * SOFTWARE.
+     */
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for (const [name, value] of Object.entries({ viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false",
+      fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })) svg.setAttribute(name, value);
+    for (const d of ["m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3", "M12 9v4", "M12 17h.01"]) {
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+    }
+    return svg;
+  }
+  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon, createAlertIcon };
 }
 
 // Source: src/content/svg.js
@@ -2336,6 +2390,7 @@ function createOpportunitiesController({
   requestOpportunitiesPage,
   resetCrmServiceRequests,
   resetWorkloadActions,
+  resetWorkloads,
   requestOpptyProductsInBackground,
   requestTokenRelayOnce,
   ensureCurrentUser,
@@ -2345,6 +2400,7 @@ function createOpportunitiesController({
     const dateRange = getFiscalPeriodRange(period, new Date());
     const requestVersion = ++opportunitiesQueryState.periodRequestVersion;
     resetWorkloadActions();
+    resetWorkloads();
     await ensureCurrentUser();
     if (!isCurrentPeriodRequest(requestVersion)) return;
 
@@ -2430,6 +2486,7 @@ function createOpportunitiesController({
 
   function resetOpportunitiesTable() {
     resetWorkloadActions();
+    resetWorkloads();
     resetCrmServiceRequests();
     opportunitiesFilterState.selectedStages = new Set(STAGE_OPTIONS);
     opportunitiesFilterState.selectedStatuses = new Set(STATUS_OPTIONS);
@@ -4691,6 +4748,7 @@ function createOpportunitiesTable({
   createDetailLink,
   createProductsCountButton,
   createProductsRampBadge,
+  createProjectionIndicator,
   createCrmServiceRequestBadge,
   closeCrmSrPopover,
   createWorkloadActionsBadge,
@@ -4827,6 +4885,9 @@ function createOpportunitiesTable({
               if (srBadge) productActions.append(srBadge);
               const actionsBadge = createWorkloadActionsBadge(item.OptyNumber);
               if (actionsBadge) productActions.append(actionsBadge);
+              const projectionIndicator = createProjectionIndicator(productsResult, item,
+                productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber)));
+              if (projectionIndicator) productActions.append(projectionIndicator);
               nameCellContent.append(opportunityLink, productActions);
               cell.append(nameCellContent);
             } else if (column.key === "optyNumber" && item.OptyNumber) {
@@ -6309,6 +6370,8 @@ function createProductsContentJobs({
   renderOpportunitiesTable,
   beginProductActivities,
   completeProductActivities,
+  loadWorkloads,
+  joinWorkloads,
   sendRuntimeMessage,
   environment
 }) {
@@ -6365,6 +6428,8 @@ function createProductsContentJobs({
     };
     renderProductsProgress();
 
+    loadWorkloads(opportunities, requestId);
+
     if (optyNumbers.length === 0) {
       return;
     }
@@ -6421,6 +6486,7 @@ function createProductsContentJobs({
           cachedAt: Number(message.cachedAt) || 0,
           error: message.error || ""
         });
+        joinWorkloads(message.optyNumber);
       }
 
       productsContentState.productsProgress = {
@@ -6503,11 +6569,92 @@ function createProductsContentJobs({
   return { requestOpptyProductsInBackground, ensureProductsBackgroundMessageHandler, renderProductsProgress, formatProductsCacheTimestamp, queueProductsTableRender };
 }
 
+// Source: src/features/products/workloads.js
+function createProductWorkloads({ productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+  requestConsumerTokenServiceOnce, sendRuntimeMessage, appendBackgroundRequestLog, getPrincipal, queueProductsTableRender }) {
+  let cycle = null;
+  function reset() {
+    cycle = null;
+    productsContentState.workloadCustomerIds = [];
+    productsContentState.workloadsByCustomer = new Map();
+  }
+  function isCurrent(current) {
+    return cycle === current && current.requestId === productsContentState.currentProductsRequestId
+      && current.version === opportunitiesQueryState.periodRequestVersion;
+  }
+  function joinProducts(optyNumber) {
+    if (!cycle || !isCurrent(cycle)) return;
+    const key = String(optyNumber);
+    const products = productsContentState.opptyProductsByNumber.get(key);
+    if (!products) return;
+    const customerId = cycle.customerByOpportunity.get(key);
+    const record = productsContentState.workloadsByCustomer.get(customerId);
+    products.items = products.items.map(product => ({ ...product,
+      workload: record?.status === "ready" ? record.byId.get(String(product.RevnId ?? "")) || null : null }));
+  }
+  async function load(opportunities, requestId) {
+    reset();
+    const current = { requestId, version: opportunitiesQueryState.periodRequestVersion,
+      customerByOpportunity: new Map(), opportunitiesByCustomer: new Map() };
+    cycle = current;
+    for (const opportunity of opportunities) {
+      const customerId = String(opportunity?.CustomerAccount?.PartyId ?? "").trim();
+      if (!/^\d+$/.test(customerId)) continue;
+      if (!current.opportunitiesByCustomer.has(customerId)) current.opportunitiesByCustomer.set(customerId, new Set());
+      if (opportunity.OptyNumber) {
+        const number = String(opportunity.OptyNumber);
+        current.customerByOpportunity.set(number, customerId);
+        current.opportunitiesByCustomer.get(customerId).add(number);
+      }
+    }
+    const ids = [...current.opportunitiesByCustomer.keys()];
+    productsContentState.workloadCustomerIds = ids;
+    const records = productsContentState.workloadsByCustomer;
+    for (const id of ids) records.set(id, { status: "loading", workloads: [], byId: new Map() });
+    if (!ids.length || !isCurrent(current)) return;
+    const principal = getPrincipal();
+    const cacheMaxAgeMs = preferencesState.opptyProductsCacheHours * 60 * 60 * 1000;
+    try {
+      const authorizations = await requestConsumerTokenServiceOnce();
+      if (!isCurrent(current)) return;
+      let next = 0;
+      const worker = async () => {
+        while (isCurrent(current) && next < ids.length) {
+          const customerId = ids[next++];
+          const record = records.get(customerId);
+          try {
+            const result = await sendRuntimeMessage({ type: messageTypes.requestWorkloads, customerId,
+              authorization: authorizations?.workloadActions, cacheMaxAgeMs, principal });
+            if (!isCurrent(current)) return;
+            appendBackgroundRequestLog(result?.debugRequests);
+            if (!result?.ok || !Array.isArray(result.workloads)) throw new Error(result?.error || "Unable to load workloads.");
+            Object.assign(record, { status: "ready", workloads: result.workloads,
+              byId: new Map(result.workloads.map(workload => [String(workload.id), workload])),
+              fromCache: Boolean(result.fromCache), cachedAt: Number(result.cachedAt) || 0 });
+          } catch (error) {
+            if (!isCurrent(current)) return;
+            record.status = "error";
+            record.error = error.message || "Unable to load workloads.";
+          }
+          for (const number of current.opportunitiesByCustomer.get(customerId)) joinProducts(number);
+          queueProductsTableRender();
+        }
+      };
+      await Promise.all(Array.from({ length: Math.min(4, ids.length) }, worker));
+    } catch (error) {
+      if (!isCurrent(current)) return;
+      for (const record of records.values()) { record.status = "error"; record.error = error.message || "Unable to load workloads."; }
+    }
+  }
+  return { load, joinProducts, reset };
+}
+
 // Source: src/features/products/details.js
 function createProductsDetails({
   OPPORTUNITIES_COLUMNS,
   setBadgeContent,
   createAiSummaryAlert,
+  createProjectionIndicator,
   formatOracleResponseDate,
   productsContentState,
   renderOpportunitiesTable,
@@ -6530,6 +6677,14 @@ function createProductsDetails({
     return badge;
   }
 
+  function expandProducts(optyNumber) {
+    const number = String(optyNumber);
+    if (productsContentState.expandedProductOptyNumbers.has(number)) return;
+    productsContentState.expandedProductOptyNumbers.add(number);
+    requestGenerateAiSummary(number);
+    renderOpportunitiesTable();
+  }
+
   function createProductsCountButton(optyNumber, productsResult) {
     const normalizedOptyNumber = String(optyNumber);
     const button = document.createElement("button");
@@ -6550,8 +6705,8 @@ function createProductsDetails({
       if (isExpanded) {
         productsContentState.expandedProductOptyNumbers.delete(normalizedOptyNumber);
       } else {
-        productsContentState.expandedProductOptyNumbers.add(normalizedOptyNumber);
-        requestGenerateAiSummary(normalizedOptyNumber);
+        expandProducts(normalizedOptyNumber);
+        return;
       }
 
       renderOpportunitiesTable();
@@ -6611,7 +6766,8 @@ function createProductsDetails({
         { label: "Close date", value: (item) => formatOracleResponseDate(item.EffectiveDate) || "-" },
         { label: "Consumption Start", value: (item) => formatOracleResponseDate(item.ConsumptionStartDate_c) || "-" },
         { label: "Ramp Months", value: (item) => item.RampMonths_c === null || item.RampMonths_c === undefined || String(item.RampMonths_c).trim() === ""
-          ? "N/D" : formatProductNumber(item.RampMonths_c) }
+          ? "N/D" : formatProductNumber(item.RampMonths_c) },
+        { label: "Projection", render: (item) => createProjectionIndicator(item, opportunity) }
       ];
 
       const head = document.createElement("thead");
@@ -6629,7 +6785,10 @@ function createProductsDetails({
         const productRow = document.createElement("tr");
         columns.forEach((column) => {
           const productCell = document.createElement("td");
-          productCell.textContent = String(column.value(product));
+          if (column.render) {
+            productCell.className = "opportunities-extension-projection-cell";
+            productCell.append(column.render(product));
+          } else productCell.textContent = String(column.value(product));
           productRow.append(productCell);
         });
         body.append(productRow);
@@ -6671,7 +6830,339 @@ function createProductsDetails({
     return Number.isFinite(number) ? `${number}%` : "-";
   }
 
-  return { createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+  return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+}
+
+// Source: src/features/products/ramp-projection.js
+function createRampProjection() {
+  function number(value) {
+    if ((typeof value !== "number" && typeof value !== "string") || String(value).trim() === "") return null;
+    const result = Number(value);
+    return Number.isFinite(result) ? result : null;
+  }
+  function startDate(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})(?:T|$)/.exec(String(value ?? ""));
+    if (!match) return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return null;
+    return { year, month, day, days: new Date(Date.UTC(year, month, 0)).getUTCDate() };
+  }
+  function monthlyAmount(annual, ramp, month) {
+    if (month < 1) return 0;
+    // calculadora rampa.xlsx, rampas!D6:P17: exact values, before currency rounding.
+    return (2 * annual / (24 - ramp)) * Math.min(month / (ramp + 1), 1);
+  }
+  function cents(value) { return Math.round((value + Number.EPSILON * Math.abs(value)) * 100); }
+  function compare(product) {
+    const workload = product?.workload;
+    const unavailable = reason => ({ status: "unavailable", reason, rows: [], divergentCount: 0 });
+    if (!workload) return unavailable("Workload data is not available for this product.");
+    const annual = number(workload.adjustedACR);
+    const ramp = number(product.RampMonths_c);
+    const start = startDate(workload.consumptionStartDate);
+    if (annual === null || annual < 0) return unavailable("Annual value (adjustedACR) is missing or invalid.");
+    if (ramp === null || !Number.isInteger(ramp) || ramp < 0 || ramp > 11) {
+      return unavailable("RampMonths_c must be an integer from 0 to 11, as covered by the reference workbook.");
+    }
+    if (!start) return unavailable("Consumption start date is missing or invalid.");
+    if (!Array.isArray(workload.forecast) || !workload.forecast.length) return unavailable("Monthly forecast data is not available.");
+    const periods = new Set();
+    const rows = workload.forecast.map(forecast => {
+      const year = number(forecast?.year), month = number(forecast?.month);
+      const actual = number(forecast?.adjustedConsumptionAmount);
+      if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12) return null;
+      const key = `${year}-${String(month).padStart(2, "0")}`;
+      if (periods.has(key)) return null;
+      periods.add(key);
+      const index = (year - start.year) * 12 + month - start.month + 1;
+      const prorated = index === 1 && start.day > 1;
+      const exact = monthlyAmount(annual, ramp, index) * (index === 1 ? (start.days - start.day + 1) / start.days : 1);
+      const calculatedCents = cents(exact);
+      const actualCents = actual === null ? null : cents(actual);
+      if (!Number.isSafeInteger(calculatedCents) || (actualCents !== null && !Number.isSafeInteger(actualCents))) return null;
+      const differenceCents = actualCents === null ? null : actualCents - calculatedCents;
+      return { key, year, month, index, prorated, actual: actualCents === null ? null : actualCents / 100,
+        calculated: calculatedCents / 100, difference: differenceCents === null ? null : differenceCents / 100,
+        divergent: differenceCents !== null && differenceCents !== 0 };
+    });
+    if (rows.some(row => row === null)) return unavailable("Forecast contains invalid or duplicate months, or values outside the supported numeric range.");
+    rows.sort((a, b) => a.key.localeCompare(b.key));
+    const divergentCount = rows.filter(row => row.divergent).length;
+    const missingCount = rows.filter(row => row.actual === null).length;
+    return { status: divergentCount ? "divergent" : missingCount ? "unavailable" : "matched",
+      reason: missingCount ? "Some months have no adjusted consumption amount." : "", rows, divergentCount, missingCount,
+      annual, ramp, start: `${start.year}-${String(start.month).padStart(2, "0")}-${String(start.day).padStart(2, "0")}`,
+      firstMonthDays: start.days - start.day + 1, firstMonthTotalDays: start.days };
+  }
+  return { compare, monthlyAmount };
+}
+
+// Source: src/features/products/forecast-update.js
+function createWorkloadForecastUpdate({ compare, ensureCurrentUser, getCurrentUserId, requestAuthorization,
+  sendRuntimeMessage, messageTypes, appendBackgroundRequestLog, productsContentState, queueProductsTableRender }) {
+  const pending = new Set();
+  async function save(product) {
+    const id = String(product?.workload?.id ?? "");
+    if (!/^\d+$/.test(id) || id !== String(product.RevnId)) throw new Error("The product does not have a matching workload ID.");
+    if (pending.has(id)) throw new Error("Estimates are already being updated.");
+    const comparison = compare(product);
+    if (comparison.status !== "divergent") throw new Error("No forecast differences are available to update.");
+    pending.add(id);
+    try {
+      await ensureCurrentUser();
+      const updatedBy = getCurrentUserId();
+      if (typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("The current user ID is unavailable.");
+      // Keep zero months before consumption unchanged, unless they also need correcting.
+      const payload = comparison.rows.filter(row => row.index >= 1 || row.divergent)
+        .map(row => ({ year: row.year, month: row.month, amount: row.calculated, updatedBy }));
+      const authorizations = await requestAuthorization();
+      const response = await sendRuntimeMessage({ type: messageTypes.requestWorkloadForecastUpdate,
+        workloadId: id, payload, authorization: authorizations?.workloadActions });
+      appendBackgroundRequestLog(response?.debugRequests);
+      if (!response?.ok) throw new Error(response?.error || "Unable to update workload estimates.");
+      const amounts = new Map(payload.map(item => [`${item.year}-${item.month}`, item.amount]));
+      const update = workload => {
+        if (String(workload?.id) !== id) return workload;
+        return { ...workload, forecast: workload.forecast.map(month => {
+          const key = `${Number(month.year)}-${Number(month.month)}`;
+          return amounts.has(key) ? { ...month, adjustedConsumptionAmount: amounts.get(key) } : month;
+        }) };
+      };
+      product.workload = update(product.workload);
+      for (const record of productsContentState.workloadsByCustomer.values()) {
+        if (record.status !== "ready") continue;
+        record.workloads = record.workloads.map(update);
+        record.byId = new Map(record.workloads.map(workload => [String(workload.id), workload]));
+      }
+      for (const record of productsContentState.opptyProductsByNumber.values()) {
+        record.items = record.items.map(item => ({ ...item, workload: update(item.workload) }));
+      }
+      queueProductsTableRender();
+      return response;
+    } finally {
+      pending.delete(id);
+    }
+  }
+  return { save };
+}
+
+// Source: src/features/products/ramp-projection-view.js
+function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCloseIcon, expandProducts, saveEstimates, notify, formatAmount, formatDate, environment }) {
+  const { document } = environment;
+  let active = null;
+  function node(tag, className, text) {
+    const item = document.createElement(tag);
+    if (className) item.className = className;
+    if (text !== undefined) item.textContent = text;
+    return item;
+  }
+  function close(restoreFocus = true) {
+    if (!active) return false;
+    if (active.saving && restoreFocus) return true;
+    const previous = active;
+    active = null;
+    previous.modal.remove();
+    previous.siblings.forEach(([element, inert]) => { element.inert = inert; });
+    if (restoreFocus && previous.trigger?.isConnected) previous.trigger.focus();
+    return true;
+  }
+  function createIndicator(product, opportunity) {
+    const result = compare(product);
+    if (result.status !== "divergent") {
+      const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-");
+      text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason;
+      return text;
+    }
+    const button = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert");
+    button.type = "button";
+    button.title = `Consumption forecast differs in ${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"}. View comparison.`;
+    button.setAttribute("aria-label", button.title);
+    button.setAttribute("aria-haspopup", "dialog");
+    button.append(createAlertIcon());
+    button.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      open(product, opportunity, button);
+    });
+    return button;
+  }
+  function createOpportunityIndicator(productsResult, opportunity, isExpanded) {
+    const products = productsResult?.items || [];
+    const count = products.filter(product => compare(product).status === "divergent").length;
+    if (!count) return null;
+    const singleProduct = products.length === 1;
+    const indicator = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert opportunities-extension-opportunity-projection-alert");
+    indicator.type = "button";
+    indicator.title = `Consumption forecast differs in ${count} product${count === 1 ? "" : "s"}. ${singleProduct ? "View comparison." : "View products."}`;
+    if (singleProduct) indicator.setAttribute("aria-haspopup", "dialog");
+    else indicator.setAttribute("aria-expanded", String(Boolean(isExpanded)));
+    indicator.setAttribute("aria-label", indicator.title);
+    indicator.append(createAlertIcon());
+    indicator.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      if (singleProduct) open(products[0], opportunity, indicator);
+      else expandProducts(opportunity.OptyNumber);
+    });
+    return indicator;
+  }
+  function open(product, opportunity, trigger) {
+    const host = document.getElementById(MODAL_ID);
+    const result = compare(product);
+    if (!host || host.hidden || result.status !== "divergent") return;
+    close(false);
+    const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal");
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    modal.setAttribute("aria-labelledby", "opportunities-extension-projection-title");
+    const dialog = node("div", "opportunities-extension-action-form-dialog opportunities-extension-projection-dialog");
+    const header = node("header", "opportunities-extension-account-plans-header");
+    const heading = node("div", "opportunities-extension-action-form-heading");
+    const title = node("h2", "", "Consumption projection");
+    title.id = "opportunities-extension-projection-title";
+    heading.append(title, node("p", "", `${opportunity.OptyNumber} - ${product.WorkloadName_c || product.workload.name || product.ProdGroupName || "Workload"}`));
+    const dismiss = node("button", "opportunities-extension-icon-button");
+    dismiss.type = "button";
+    dismiss.title = "Close consumption projection";
+    dismiss.setAttribute("aria-label", dismiss.title);
+    dismiss.append(createCloseIcon());
+    dismiss.addEventListener("click", () => close());
+    header.append(heading, dismiss);
+    const body = node("div", "opportunities-extension-projection-body");
+    const details = node("dl", "opportunities-extension-projection-context");
+    const currency = product.RevnAmountCurcyCode || "USD";
+    for (const [label, value] of [
+      ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"],
+      ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)],
+      ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`]
+    ]) details.append(node("dt", "", label), node("dd", "", value));
+    body.append(details);
+    const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`);
+    body.append(summary);
+    if (result.reason) body.append(node("p", "opportunities-extension-projection-notice", result.reason));
+    const viewport = node("div", "opportunities-extension-projection-viewport");
+    viewport.tabIndex = 0;
+    viewport.setAttribute("role", "region");
+    viewport.setAttribute("aria-label", "Monthly consumption comparison");
+    const table = node("table", "opportunities-extension-projection-table");
+    const caption = node("caption", "opportunities-extension-visually-hidden", `Monthly consumption comparison (${currency}). Difference is forecast minus calculated.`);
+    const head = node("thead"), headRow = node("tr"), tbody = node("tbody");
+    for (const label of ["Month", "Forecast", "Calculated", "Difference"]) {
+      const th = node("th", "", label); th.scope = "col"; headRow.append(th);
+    }
+    head.append(headRow);
+    for (const item of result.rows) {
+      const tr = node("tr");
+      tr.setAttribute("data-divergent", String(item.divergent));
+      const month = node("th", "", `${String(item.month).padStart(2, "0")}/${item.year}`);
+      month.scope = "row";
+      if (item.prorated) month.append(node("span", "opportunities-extension-projection-prorated", " (Prorated)"));
+      tr.append(month);
+      for (const value of [item.actual, item.calculated, item.difference]) tr.append(node("td", "", value === null ? "-" : formatAmount(value, currency)));
+      tbody.append(tr);
+    }
+    table.append(caption, head, tbody);
+    viewport.append(table);
+    body.append(viewport);
+    const errorMessage = node("p", "opportunities-extension-projection-error");
+    errorMessage.setAttribute("role", "alert");
+    errorMessage.hidden = true;
+    body.append(errorMessage);
+    const footer = node("footer", "opportunities-extension-projection-footer");
+    const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates");
+    updateButton.type = "button";
+    footer.append(node("span", "", "Difference = forecast - calculated."), updateButton);
+    dialog.append(header, body, footer);
+    modal.append(dialog);
+    const siblings = Array.from(host.children).map(element => [element, element.inert]);
+    siblings.forEach(([element]) => { element.inert = true; });
+    const current = { modal, siblings, trigger, saving: false };
+    active = current;
+    async function updateEstimates() {
+      if (current.saving) return;
+      current.saving = true;
+      updateButton.disabled = true;
+      dismiss.disabled = true;
+      updateButton.textContent = "Updating...";
+      modal.setAttribute("aria-busy", "true");
+      errorMessage.hidden = true;
+      try {
+        await saveEstimates(product);
+        current.saving = false;
+        if (active === current) close();
+        notify("Workload estimates updated successfully.");
+      } catch (error) {
+        const message = error.message || "Unable to update workload estimates.";
+        if (active === current) {
+          errorMessage.textContent = message;
+          errorMessage.hidden = false;
+        }
+        notify(message, true);
+      } finally {
+        current.saving = false;
+        updateButton.disabled = false;
+        dismiss.disabled = false;
+        updateButton.textContent = "Update estimates";
+        modal.setAttribute("aria-busy", "false");
+      }
+    }
+    updateButton.addEventListener("click", () => {
+      if (current.saving || current.confirmation) return;
+      const overlay = node("div", "opportunities-extension-action-form-modal");
+      const confirmation = node("section", "opportunities-extension-action-form-dialog opportunities-extension-projection-confirm");
+      confirmation.setAttribute("role", "alertdialog");
+      confirmation.setAttribute("aria-modal", "true");
+      confirmation.setAttribute("aria-labelledby", "projection-confirm-title");
+      confirmation.setAttribute("aria-describedby", "projection-confirm-message");
+      const title = node("h2", "", "Update estimates");
+      title.id = "projection-confirm-title";
+      const message = node("p", "", "The estimates will be updated directly in the SPA using the values in the Calculated column. Would you like to confirm the update?");
+      message.id = "projection-confirm-message";
+      const actions = node("div", "opportunities-extension-projection-confirm-actions");
+      const cancel = node("button", "opportunities-extension-projection-cancel", "Cancel");
+      const confirm = node("button", "opportunities-extension-projection-update", "Confirm update");
+      cancel.type = confirm.type = "button";
+      function dismissConfirmation() {
+        overlay.remove();
+        current.confirmation = null;
+        dialog.inert = false;
+        updateButton.focus();
+      }
+      cancel.addEventListener("click", dismissConfirmation);
+      confirm.addEventListener("click", () => {
+        if (current.confirmation !== overlay || active !== current) return;
+        dismissConfirmation();
+        return updateEstimates();
+      });
+      overlay.addEventListener("keydown", event => {
+        if (event.key === "Escape") {
+          event.preventDefault(); event.stopPropagation(); dismissConfirmation();
+        } else if (event.key === "Tab") {
+          event.preventDefault(); event.stopPropagation();
+          (document.activeElement === cancel ? confirm : cancel).focus();
+        }
+      });
+      actions.append(cancel, confirm);
+      confirmation.append(title, message, actions);
+      overlay.append(confirmation);
+      current.confirmation = overlay;
+      dialog.inert = true;
+      modal.append(overlay);
+      cancel.focus();
+    });
+    host.append(modal);
+    modal.addEventListener("keydown", event => {
+      if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); }
+      if (event.key === "Tab") {
+        const controls = [dismiss, viewport, updateButton].filter(control => !control.disabled);
+        const index = controls.indexOf(document.activeElement);
+        if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) {
+          event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus();
+        }
+      }
+    });
+    dismiss.focus();
+  }
+  return { createIndicator, createOpportunityIndicator, open, close };
 }
 
 // Source: src/features/ai-summary/content.js
@@ -9604,7 +10095,7 @@ function createContentApplication(overrides = {}) {
   const contentModal = createContentModal({
     createManageTimeButton: () => manageTime.createButton(),
     prepareSrSession: () => srSessionPreparation.ensure(),
-    closeActionForm: (...args) => manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
+    closeActionForm: (...args) => rampProjectionView.close(...args) || manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
     mountOpportunityViews: (...args) => opportunityCalendar.mount(...args),
     createActivityFilterControls: (...args) => activityFilters.createControls(...args),
     closeCrmSrPopover: () => crmSrPopover.close(),
@@ -9779,6 +10270,7 @@ function createContentApplication(overrides = {}) {
   const opportunitiesController = createOpportunitiesController({
     ensureCurrentUser: () => currentUser.ensure(),
     resetWorkloadActions: (...args) => opportunityWorkloadActions.reset(...args),
+    resetWorkloads: () => { rampProjectionView.close(false); productWorkloads.reset(); },
     STAGE_OPTIONS: contracts.STAGE_OPTIONS,
     STATUS_OPTIONS: contracts.STATUS_OPTIONS,
     authSessionState,
@@ -9922,6 +10414,7 @@ function createContentApplication(overrides = {}) {
     createDetailLink: (...args) => opportunitiesLinks.createDetailLink(...args),
     createProductsCountButton: (...args) => productsDetails.createProductsCountButton(...args),
     createProductsRampBadge: (...args) => productsDetails.createProductsRampBadge(...args),
+    createProjectionIndicator: (...args) => rampProjectionView.createOpportunityIndicator(...args),
     createCrmServiceRequestBadge: (...args) => opportunityCrmServiceRequests.createBadge(...args),
     createProductsDetailRow: (...args) => productsDetails.createProductsDetailRow(...args),
     createStageBadge: (...args) => opportunitiesLinks.createStageBadge(...args),
@@ -10021,6 +10514,8 @@ function createContentApplication(overrides = {}) {
     resetRelatedData: () => {
       opportunityCrmServiceRequests.reset();
       opportunityWorkloadActions.reset();
+      productWorkloads.reset();
+      rampProjectionView.close(false);
       consumptionPlansView.closeAccountPlansModal();
       installBaseView.closeInstallBaseModal();
       serviceRequestsView.closeServiceRequestsModal();
@@ -10064,6 +10559,8 @@ function createContentApplication(overrides = {}) {
     }
   });
   const productsContentJobs = createProductsContentJobs({
+    loadWorkloads: (...args) => productWorkloads.load(...args),
+    joinWorkloads: number => productWorkloads.joinProducts(number),
     beginProductActivities: (...args) => productActivities.begin(...args),
     completeProductActivities: (...args) => productActivities.complete(...args),
     appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
@@ -10077,6 +10574,14 @@ function createContentApplication(overrides = {}) {
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
     environment
   });
+  const productWorkloads = createProductWorkloads({
+    productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+    requestConsumerTokenServiceOnce: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    getPrincipal: () => currentUser.getUserId() || authSessionState.principal,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
   const workloadActionOptions = createWorkloadActionOptions({
     requestConsumerTokenServiceOnce: (...args) => authContentSession.requestConsumerTokenServiceOnce(...args),
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
@@ -10115,6 +10620,7 @@ function createContentApplication(overrides = {}) {
     productsContentState, messageTypes, environment
   });
   const productsDetails = createProductsDetails({
+    createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args),
     setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args),
     OPPORTUNITIES_COLUMNS: columns,
     createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args),
@@ -10124,6 +10630,30 @@ function createContentApplication(overrides = {}) {
     requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args),
     environment
   });
+  const rampProjection = createRampProjection();
+  const workloadForecastUpdate = createWorkloadForecastUpdate({
+    compare: product => rampProjection.compare(product),
+    ensureCurrentUser: () => currentUser.ensure(),
+    getCurrentUserId: () => currentUser.getUserId(),
+    requestAuthorization: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    messageTypes,
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    productsContentState,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
+  const rampProjectionView = createRampProjectionView({
+    saveEstimates: product => workloadForecastUpdate.save(product),
+    notify: (...args) => opportunitiesLinks.showCopyConfirmation(...args),
+    MODAL_ID: contracts.MODAL_ID,
+    compare: product => rampProjection.compare(product),
+    expandProducts: number => productsDetails.expandProducts(number),
+    createAlertIcon: () => contentIcons.createAlertIcon(),
+    createCloseIcon: () => contentIcons.createCloseIcon(),
+    formatAmount: (...args) => productsDetails.formatProductAmount(...args),
+    formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value),
+    environment
+  });
   const aiSummaryContent = createAiSummaryContent({
     aiSummaryState,
     invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args),
@@ -10318,12 +10848,16 @@ function createContentApplication(overrides = {}) {
     preferencesStorage,
     preferencesView,
     productsContentJobs,
+    productWorkloads,
     productActivities,
     activityProgress,
     srSessionPreparation,
     refreshAll,
     activityCache,
     productsDetails,
+    rampProjection,
+    workloadForecastUpdate,
+    rampProjectionView,
     aiSummaryContent,
     consumptionPlansAction,
     installBaseAction,
diff --git a/dist/firefox/background.js b/dist/firefox/background.js
index 9408c0f..e1eae9a 100644
--- a/dist/firefox/background.js
+++ b/dist/firefox/background.js
@@ -175,6 +175,8 @@ function createMessageTypes() {
     requestInstallBase: "opportunitiesExtension.requestInstallBase",
     requestCustomerServiceRequest: "opportunitiesExtension.requestCustomerServiceRequest",
     requestWlActions: "opportunitiesExtension.requestWlActions",
+    requestWorkloads: "opportunitiesExtension.requestWorkloads",
+    requestWorkloadForecastUpdate: "opportunitiesExtension.requestWorkloadForecastUpdate",
     requestActionTeamMembers: "opportunitiesExtension.requestActionTeamMembers",
     requestActionFindLookup: "opportunitiesExtension.requestActionFindLookup",
     requestMgmtAction: "opportunitiesExtension.requestMgmtAction",
@@ -923,6 +925,140 @@ function createSpaWorkloadActions({ fetchJson }) {
   return { requestWlActions };
 }
 
+// Source: src/services/spa/workloads.js
+function createSpaWorkloads({ fetchJson, getCachedWorkloads, normalizeCacheMaxAge, invalidateWorkloadsCache }) {
+  async function requestWorkloadForecastUpdate(message) {
+    const debugRequests = [];
+    try {
+      const id = String(message.workloadId ?? "");
+      const token = message.authorization?.value;
+      if (!/^\d+$/.test(id)) throw new Error("A numeric workload ID is required.");
+      if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+      if (!Array.isArray(message.payload) || !message.payload.length) throw new Error("Monthly estimates are required.");
+      const periods = new Set();
+      const payload = message.payload.map(({ year, month, amount, updatedBy }) => {
+        if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12
+          || typeof amount !== "number" || !Number.isFinite(amount) || amount < 0
+          || typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("Invalid monthly estimate.");
+        const period = `${year}-${month}`;
+        if (periods.has(period)) throw new Error("Duplicate forecast month.");
+        periods.add(period);
+        return { year, month, amount, updatedBy: updatedBy.trim() };
+      });
+      const result = await fetchJson(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads/${id}/forecast`, {
+        method: "PATCH", credentials: "include",
+        headers: { Accept: "application/json", "Content-Type": "application/json", "wwb-provider-authorization": token.trim() },
+        body: JSON.stringify(payload)
+      }, "requestWorkloadForecastUpdate", debugRequests, { allowEmpty: true });
+      await invalidateWorkloadsCache().catch(() => {});
+      return { ok: true, result, debugRequests };
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+  async function requestWorkloads(message) {
+    const customerId = String(message.customerId ?? "").trim();
+    const token = message.authorization?.value;
+    if (!/^\d+$/.test(customerId)) throw new Error("A numeric CustomerAccount.PartyId is required.");
+    if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+    const result = await getCachedWorkloads(customerId, token.trim(), normalizeCacheMaxAge(message.cacheMaxAgeMs), message.principal);
+    return { ok: true, customerId, ...result };
+  }
+
+  async function fetchAllWorkloads(customerId, token) {
+    const debugRequests = [];
+    const workloads = new Map();
+    let offset = 0;
+    let limit = 500;
+    try {
+      for (let page = 0; page < 1000; page += 1) {
+        const url = new URL(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/customers/${customerId}/workloads`);
+        for (const [name, value] of Object.entries({ workloadStatus: "Pipeline,Implementation,Live", opportunityForecastType: "All",
+          includeForEstimates: "ALL", financialYear: "ROLLING_4_QTRS", offset, limit })) url.searchParams.set(name, String(value));
+        const result = await fetchJson(url.toString(), {
+          method: "GET", credentials: "include",
+          headers: { Accept: "application/json", "wwb-provider-authorization": token }
+        }, "requestWorkloads", debugRequests);
+        if (!result || !Array.isArray(result.workloads) || typeof result.hasNext !== "boolean"
+          || result.workloads.some(item => !item || !/^\d+$/.test(String(item.id ?? "")))) {
+          throw new Error("requestWorkloads returned an invalid collection.");
+        }
+        const countBefore = workloads.size;
+        for (const item of result.workloads) workloads.set(String(item.id), item);
+        if (!result.hasNext) return { workloads: [...workloads.values()], debugRequests };
+        const responseOffset = Number(result.offset ?? offset);
+        const responseLimit = Number(result.limit ?? limit);
+        if (workloads.size === countBefore || !Number.isSafeInteger(responseOffset) || responseOffset !== offset
+          || !Number.isSafeInteger(responseLimit) || responseLimit <= 0 || !Number.isSafeInteger(responseOffset + responseLimit)) {
+          throw new Error("requestWorkloads pagination did not advance.");
+        }
+        offset = responseOffset + responseLimit;
+        limit = responseLimit;
+      }
+      throw new Error("requestWorkloads exceeded the pagination limit.");
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+
+  return { requestWorkloads, fetchAllWorkloads, requestWorkloadForecastUpdate };
+}
+
+// Source: src/features/products/workloads-cache.js
+function createWorkloadsCache({ fetchAllWorkloads, storageLocalGet, storageLocalSet }) {
+  const KEY = "opportunitiesExtension.workloadsCache.v1";
+  let cachePromise = null;
+  let writePromise = Promise.resolve();
+  let generation = 0;
+  const inFlight = new Map();
+
+  function read() {
+    if (!cachePromise) cachePromise = storageLocalGet(KEY)
+      .then(result => result?.[KEY] && typeof result[KEY] === "object" && !Array.isArray(result[KEY]) ? result[KEY] : {})
+      .catch(() => ({}));
+    return cachePromise;
+  }
+  function write(cache) {
+    writePromise = writePromise.catch(() => {}).then(() => storageLocalSet({ [KEY]: cache }));
+    return writePromise;
+  }
+  async function invalidate() {
+    generation += 1;
+    inFlight.clear();
+    cachePromise = Promise.resolve({});
+    await write({});
+  }
+  async function get(customerId, token, maxAgeMs, principal) {
+    const scope = typeof principal === "string" ? principal.trim().toLowerCase() : "";
+    // isMyWorkload is user-specific. Never persist a result without a known principal.
+    if (!scope) return { ...await fetchAllWorkloads(customerId, token), fromCache: false, cachedAt: Date.now() };
+    const key = JSON.stringify([scope, customerId]);
+    const currentGeneration = generation;
+    const cache = await read();
+    if (generation !== currentGeneration) return get(customerId, token, maxAgeMs, principal);
+    const entry = cache[key];
+    const age = Date.now() - Number(entry?.fetchedAt);
+    if (Array.isArray(entry?.items) && age >= 0 && age < maxAgeMs) {
+      return { workloads: entry.items, cachedAt: Number(entry.fetchedAt), fromCache: true, debugRequests: [] };
+    }
+    if (!inFlight.has(key)) {
+      const flight = fetchAllWorkloads(customerId, token).then(async result => {
+        const cachedAt = Date.now();
+        if (generation === currentGeneration) {
+          cache[key] = { fetchedAt: cachedAt, items: result.workloads };
+          await write(cache).catch(() => {});
+        }
+        return { ...result, cachedAt, fromCache: false };
+      }).finally(() => { if (inFlight.get(key) === flight) inFlight.delete(key); });
+      inFlight.set(key, flight);
+    }
+    return inFlight.get(key);
+  }
+  return { get, invalidate };
+}
+
 // Source: src/services/spa/action-options.js
 function createSpaActionOptions({ fetchJson }) {
   const baseUrl = "https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads";
@@ -2520,6 +2656,9 @@ function registerBackgroundMessages({
   requestInstallBase,
   requestCustomerServiceRequest,
   requestWlActions,
+  requestWorkloads,
+  requestWorkloadForecastUpdate,
+  invalidateWorkloadsCache,
   requestActionTeamMembers,
   requestActionFindLookup,
   requestMgmtAction,
@@ -2597,7 +2736,7 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
     }
 
     if (message.type === messageTypes.invalidateProductsCache) {
-      invalidateProductsCache().then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
+      Promise.all([invalidateProductsCache(), invalidateWorkloadsCache()]).then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
       return true;
     }
     if (message.type === messageTypes.getXsrfToken) {
@@ -2686,6 +2825,15 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
       return true;
     }
 
+    if ([messageTypes.requestWorkloads, messageTypes.requestWorkloadForecastUpdate].includes(message.type)) {
+      const request = message.type === messageTypes.requestWorkloads ? requestWorkloads : requestWorkloadForecastUpdate;
+      request(message).then(sendResponse).catch(error => sendResponse({
+        ok: false, error: error.message || "Unable to load workloads.", httpStatus: error.httpStatus,
+        debugRequests: Array.isArray(error.debugRequests) ? error.debugRequests : []
+      }));
+      return true;
+    }
+
     if (message.type === messageTypes.requestWlActions) {
       requestWlActions(message).then(sendResponse).catch(error => sendResponse({
         ok: false, error: error.message || "Unable to load workload actions.",
@@ -2876,6 +3024,17 @@ function createBackgroundApplication(overrides = {}) {
   const requestAccountPlans = (...args) => spaAccounts.requestAccountPlans(...args);
   const requestInstallBase = (...args) => spaInstallBase.requestInstallBase(...args);
   const spaWorkloadActions = createSpaWorkloadActions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
+  const workloadsCache = createWorkloadsCache({
+    fetchAllWorkloads: (...args) => spaWorkloads.fetchAllWorkloads(...args),
+    storageLocalGet: (...args) => platformBackgroundApi.storageLocalGet(...args),
+    storageLocalSet: (...args) => platformBackgroundApi.storageLocalSet(...args)
+  });
+  const spaWorkloads = createSpaWorkloads({
+    invalidateWorkloadsCache: () => workloadsCache.invalidate(),
+    fetchJson: (...args) => httpBackgroundJson.fetchJson(...args),
+    getCachedWorkloads: (...args) => workloadsCache.get(...args),
+    normalizeCacheMaxAge: value => productsCache.normalizeCacheMaxAge(value)
+  });
   const requestWlActions = (...args) => spaWorkloadActions.requestWlActions(...args);
   const spaActionOptions = createSpaActionOptions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
   const requestActionTeamMembers = (...args) => spaActionOptions.requestActionTeamMembers(...args);
@@ -2907,6 +3066,9 @@ function createBackgroundApplication(overrides = {}) {
   function start() {
     srRequestHeaders.start();
     startBackgroundApplication({
+      requestWorkloads: message => spaWorkloads.requestWorkloads(message),
+      requestWorkloadForecastUpdate: message => spaWorkloads.requestWorkloadForecastUpdate(message),
+      invalidateWorkloadsCache: () => workloadsCache.invalidate(),
       invalidateResourceUser: () => fusionSrCreate.invalidateResourceUser(),
       requestWeekDetails: message => timeEntries.requestWeekDetails(message),
       requestTimeEntries: message => timeEntries.requestTimeEntries(message),
@@ -2934,6 +3096,8 @@ function createBackgroundApplication(overrides = {}) {
     httpBackgroundJson,
     productsBackgroundJobs,
     productsCache,
+    workloadsCache,
+    spaWorkloads,
     fusionProducts,
     authXsrfRecovery,
     authXsrfCookies,
diff --git a/dist/firefox/content.js b/dist/firefox/content.js
index 5674561..e2f6c4e 100644
--- a/dist/firefox/content.js
+++ b/dist/firefox/content.js
@@ -1,6 +1,6 @@
 (function () {
   "use strict";
-const redwoodStyles = "\n      .opportunities-extension-scroll-lock {\n        overflow: hidden !important;\n      }\n\n      .opportunities-extension-modal,\n      .opportunities-extension-modal * {\n        box-sizing: border-box;\n        font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n      }\n\n      .opportunities-extension-modal {\n        position: fixed;\n        inset: 0;\n        z-index: 2147483647;\n        background: #f5f4f2;\n        color: #000000;\n      }\n\n      .opportunities-extension-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-shell {\n        height: 100vh;\n        min-height: 0;\n        display: grid;\n        grid-template-rows: auto minmax(0, 1fr);\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-header {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 24px;\n        padding: 28px 40px 22px;\n        border-bottom: 1px solid #dedbd7;\n        background:\n          linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #ffffff;\n      }\n\n      .opportunities-extension-header::before {\n        position: absolute;\n        left: 40px;\n        bottom: -1px;\n        width: 64px;\n        height: 3px;\n        background: #00758f;\n        content: \"\";\n      }\n\n      .opportunities-extension-header h1 {\n        margin: 0;\n        color: #000000;\n        font-size: 24px;\n        font-weight: 700;\n        line-height: 1.2;\n        letter-spacing: 0;\n      }\n\n      .opportunities-extension-header p {\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        line-height: 1.4;\n      }\n\n      .opportunities-extension-subtitle-row {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        margin-top: 6px;\n      }\n\n      .opportunities-extension-auth-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        color: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-auth-badge-authenticated {\n        background: #3f6f17;\n      }\n\n      .opportunities-extension-auth-badge-unauthenticated {\n        background: #c5331f;\n      }\n\n      .opportunities-extension-auth-badge-pending {\n        background: #6f5a7f;\n      }\n\n      .opportunities-extension-products-progress {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-progress[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-cache-timestamp {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #f0eeeb;\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-cache-timestamp[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"running\"]::before {\n        width: 12px;\n        height: 12px;\n        margin-right: 6px;\n        border: 2px solid currentColor;\n        border-right-color: transparent;\n        border-radius: 50%;\n        content: \"\";\n        animation: opportunities-extension-spin .8s linear infinite;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-products-progress[data-state=\"error\"] {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      @keyframes opportunities-extension-spin {\n        to { transform: rotate(360deg); }\n      }\n\n      .opportunities-extension-icon-button {\n        width: 36px;\n        height: 36px;\n        flex: 0 0 36px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 18px;\n        font-weight: 600;\n        line-height: 1;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-header-actions {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .opportunities-extension-icon-button svg {\n        width: 18px;\n        height: 18px;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-icon-button:hover,\n      .opportunities-extension-icon-button:focus {\n        border-color: #b8b2ad;\n        background: #f5f4f2;\n        outline: none;\n      }\n\n      .opportunities-extension-body {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        gap: 16px;\n        padding: 22px 40px 36px;\n        background: #f5f4f2;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-form {\n        display: flex;\n        align-items: end;\n        flex-wrap: wrap;\n        gap: 24px;\n        min-height: 82px;\n        max-width: none;\n        margin: 0;\n        padding: 14px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-field {\n        display: grid;\n        max-width: max-content;\n        min-width: 270px;\n        width: max-content;\n        gap: 6px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-dashboard {\n        display: grid;\n        grid-template-columns: repeat(6, minmax(0, 1fr));\n        gap: 12px;\n      }\n\n      .opportunities-extension-stage-dashboard-card {\n        display: grid;\n        gap: 6px;\n        min-width: 0;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-top: 3px solid #5f5a55;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-stage-dashboard-card span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-stage-dashboard-value {\n        overflow: hidden;\n        color: #312d2a;\n        font-size: 22px;\n        font-weight: 700;\n        line-height: 1.2;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #008aa6;\n      }\n\n      .opportunities-extension-total-dashboard-card {\n        border-top-color: #312d2a;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #6f6863;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #c87b00;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #755b8b;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #4b7f22;\n      }\n\n      .opportunities-extension-stage-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-stage-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-stage-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #006b84;\n        background: #006b84;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #5f5a55;\n        background: #5f5a55;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #945400;\n        background: #945400;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #624e74;\n        background: #624e74;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #3f6f17;\n        background: #3f6f17;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-status-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-status-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-status-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-status-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-customer-filter {\n        position: relative;\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 220px;\n      }\n\n      .opportunities-extension-customer-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-customer-filter-trigger {\n        position: relative;\n        min-width: 220px;\n        min-height: 44px;\n        padding: 10px 38px 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-trigger::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-top: 6px solid #312d2a;\n        border-right: 5px solid transparent;\n        border-left: 5px solid transparent;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-customer-filter-trigger:disabled {\n        cursor: not-allowed;\n        background: #f5f4f2;\n        color: #7d7772;\n      }\n\n      .opportunities-extension-customer-filter-trigger:focus-visible {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-panel {\n        position: absolute;\n        top: calc(100% + 8px);\n        left: 0;\n        z-index: 4;\n        display: grid;\n        width: min(360px, calc(100vw - 80px));\n        gap: 10px;\n        padding: 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n      }\n\n      .opportunities-extension-customer-filter-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-customer-filter-search {\n        width: 100%;\n        min-height: 40px;\n        padding: 8px 10px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-customer-filter-search:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-customer-filter-option {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-customer-filter-select-all {\n        min-height: 32px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid #dedbd7;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n        width: 16px;\n        height: 16px;\n        flex: 0 0 16px;\n        accent-color: #00758f;\n      }\n\n      .opportunities-extension-customer-filter-list {\n        display: block;\n        max-height: 250px;\n        overflow: auto;\n      }\n\n      .opportunities-extension-customer-filter-option {\n        display: grid;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: start;\n        min-height: 0;\n        height: auto !important;\n        padding: 8px 4px;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n        margin-top: 1px;\n      }\n\n      .opportunities-extension-customer-filter-option span {\n        display: block;\n        min-width: 0;\n        line-height: 18px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n      }\n\n      .opportunities-extension-customer-filter-option:hover {\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-customer-filter-empty {\n        margin: 4px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-table-search-field {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        width: 260px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input {\n        width: 100%;\n        min-height: 44px;\n        padding: 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-select-wrap {\n        position: relative;\n        display: block;\n        width: 270px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-select-wrap::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 6px solid #000000;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-field select {\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        min-height: 44px;\n        box-sizing: border-box;\n        appearance: none;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #000000;\n        font-size: 14px;\n        line-height: 1.3;\n        padding: 11px 44px 11px 12px;\n      }\n\n      .opportunities-extension-field select:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-table-surface {\n        min-height: 0;\n        height: 100%;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n        overflow-x: auto;\n        overflow-y: auto;\n      }\n\n      .opportunities-extension-table {\n        width: 100%;\n        min-width: 0;\n        border-collapse: collapse;\n        table-layout: fixed;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-table thead {\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-table th {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        height: 44px;\n        border-bottom: 1px solid #b8b2ad;\n        background: #faf9f8;\n        color: #312d2a;\n        font-size: 12px;\n        font-weight: 700;\n        text-align: left;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td {\n        min-height: 48px;\n        padding: 12px 16px;\n        border-bottom: 1px solid #ebe8e5;\n        vertical-align: middle;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-table th:nth-child(1) {\n        width: 16%;\n      }\n\n      .opportunities-extension-table th:nth-child(2) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(3) {\n        width: 18%;\n      }\n\n      .opportunities-extension-table th:nth-child(4) {\n        width: 11%;\n      }\n\n      .opportunities-extension-table th:nth-child(5) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(6) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(7) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(8) {\n        width: 6%;\n      }\n\n      .opportunities-extension-table th:nth-child(9) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(10) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(11) {\n        width: 4%;\n      }\n\n      .opportunities-extension-table td:nth-child(2),\n      .opportunities-extension-table td:nth-child(5),\n      .opportunities-extension-table td:nth-child(6),\n      .opportunities-extension-table td:nth-child(8) {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .opportunities-extension-table td:nth-child(9) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(7) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(10) {\n        padding-right: 6px;\n        padding-left: 6px;\n        font-size: 12px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td:nth-child(11) {\n        padding-right: 6px;\n        padding-left: 6px;\n        text-align: center;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table tbody tr:hover {\n        background: #f7f6f4;\n      }\n\n      .opportunities-extension-table tbody tr:last-child td {\n        border-bottom: 0;\n      }\n\n      .opportunities-extension-table a {\n        color: #006b84;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 2px;\n      }\n\n      .opportunities-extension-table a:hover {\n        color: #004f63;\n      }\n\n      .opportunities-extension-opty-number-content {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-name-content {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-name-content > a {\n        min-width: 0;\n      }\n\n      .opportunities-extension-actions-content {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-products-count {\n        display: inline-grid;\n        width: auto;\n        min-width: 20px;\n        height: 20px;\n        place-items: center;\n        flex: 0 0 auto;\n        box-sizing: border-box;\n        padding: 0 3px;\n        border: 1px solid #7ca7b2;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 1;\n        text-align: center;\n        vertical-align: middle;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-products-count:hover,\n      .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n        outline: none;\n      }\n\n      .opportunities-extension-products-count-error {\n        border-color: #d8887e;\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-products-detail-row:hover {\n        background: transparent !important;\n      }\n\n      .opportunities-extension-products-detail-cell {\n        padding: 0 !important;\n      }\n\n      .opportunities-extension-products-detail {\n        padding: 14px 20px 18px;\n        border-bottom: 1px solid #c9c5c1;\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-products-detail-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 10px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-ai-summary {\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n        margin: 0 0 12px;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 6px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.5;\n        text-align: left;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-ai-summary strong {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n      }\n\n      .opportunities-extension-ai-summary p {\n        margin: 4px 0 0;\n        font: inherit;\n        white-space: pre-wrap;\n      }\n\n      .opportunities-extension-ai-summary-error {\n        color: #b42318;\n        border-color: #d9928b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n        background: #292827;\n        color: #f6f4f2;\n        border-color: #5f5a55;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n        color: #ffb4ab;\n        border-color: #a45c55;\n      }\n\n      .opportunities-extension-products-detail-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-products-detail-heading span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-products-table {\n        width: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border: 1px solid #dedbd7;\n        background: #ffffff;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-products-table th,\n      .opportunities-extension-products-table td {\n        position: static;\n        height: auto;\n        padding: 8px 10px;\n        border-bottom: 1px solid #ebe8e5;\n        background: transparent;\n        overflow-wrap: anywhere;\n        vertical-align: middle;\n        white-space: normal;\n      }\n\n      .opportunities-extension-products-table th {\n        background: #faf9f8;\n        font-size: 11px;\n      }\n\n      .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n      .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n      .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n      .opportunities-extension-products-empty {\n        margin: 0;\n        padding: 10px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-copy-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        width: 24px;\n        height: 24px;\n        padding: 3px;\n        border: 0;\n        border-radius: 3px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-copy-button svg {\n        width: 16px;\n        height: 16px;\n        fill: currentColor;\n      }\n\n      .opportunities-extension-copy-button:hover,\n      .opportunities-extension-copy-button:focus-visible {\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        padding: 5px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-action-button svg {\n        width: 21px;\n        height: 21px;\n      }\n\n      .opportunities-extension-action-button:hover,\n      .opportunities-extension-action-button:focus-visible {\n        border-color: #7ca7b2;\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button:disabled {\n        cursor: wait;\n        opacity: .72;\n      }\n\n      .opportunities-extension-action-button-loading svg {\n        animation: opportunities-extension-pulse 1s ease-in-out infinite;\n      }\n\n      @keyframes opportunities-extension-pulse {\n        50% { opacity: .35; }\n      }\n\n      .opportunities-extension-copy-toast {\n        position: fixed;\n        right: 28px;\n        bottom: 28px;\n        z-index: 3;\n        max-width: min(360px, calc(100vw - 56px));\n        padding: 12px 16px;\n        border-radius: 4px;\n        background: #2f6f18;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n        color: #ffffff;\n        font-size: 13px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-copy-toast-error {\n        background: #a52b1c;\n      }\n\n      .opportunities-extension-copy-toast[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-stage-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n        background: #d9f0f5;\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n        background: #fff0d8;\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n        background: #eee8f5;\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n        background: #e5f1d9;\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-status-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n        background: #e2f2e5;\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n        background: #e5e7eb;\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"LOST\"] {\n        background: #f9e3e1;\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"WON\"] {\n        background: #e3edf8;\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-sort-button {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        width: 100%;\n        min-height: 44px;\n        padding: 8px 42px 8px 16px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-weight: inherit;\n        letter-spacing: 0;\n        line-height: 1.2;\n        text-align: left;\n        white-space: normal;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-table-header-label {\n        display: inline-flex;\n        align-items: center;\n        min-height: 44px;\n        padding: 8px 6px;\n      }\n\n      .opportunities-extension-sort-button::after {\n        position: absolute;\n        right: 15px;\n        color: #5f5a55;\n        content: \"↕\";\n        font-size: 16px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n        color: #00758f;\n        content: \"↑\";\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n        color: #00758f;\n        content: \"↓\";\n      }\n\n      .opportunities-extension-sort-button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-sort-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-table-status {\n        height: 152px;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        display: grid;\n        place-items: center;\n        padding: 24px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-preferences-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 4;\n        display: grid;\n        place-items: center;\n        padding: 12px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-account-plans-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-dialog {\n        display: grid;\n        width: min(1180px, 100%);\n        height: min(760px, calc(100vh - 24px));\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plans-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 14px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-header h2 {\n        margin: 0;\n        font-size: 20px;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-account-plans-header p {\n        margin: 5px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-account-plans-content {\n        display: grid;\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n        grid-row: 1 / -1;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation {\n        position: relative;\n        min-width: 0;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tabs {\n        display: flex;\n        min-width: 0;\n        gap: 4px;\n        overflow-x: auto;\n        padding: 8px 20px 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button {\n        display: grid;\n        position: absolute;\n        z-index: 1;\n        top: 50%;\n        width: 32px;\n        height: 32px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n        transform: translateY(-50%);\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:first-child {\n        left: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:last-child {\n        right: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-account-plans-panels {\n        min-width: 0;\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plan-tab {\n        min-height: 38px;\n        flex: 0 0 auto;\n        padding: 7px 12px;\n        border: 0;\n        border-bottom: 3px solid transparent;\n        background: transparent;\n        color: #5f5a55;\n        font-size: 13px;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plan-tab:hover {\n        background: #f0eeeb;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #00758f;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-account-plan-tab:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-account-plan-panel {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        box-sizing: border-box;\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plan-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plan-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        margin: 0;\n      }\n\n      .opportunities-extension-account-plan-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        gap: 10px;\n        min-height: 42px;\n        align-items: center;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plan-details dt {\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-account-plan-details dd {\n        min-width: 0;\n        margin: 0;\n        color: #312d2a;\n        font-size: 13px;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-consumption-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 14px;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-trend-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 24px;\n      }\n\n      .opportunities-extension-consumption-periods {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-periods button {\n        min-height: 38px;\n        padding: 7px 14px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-periods button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #00758f;\n        background: #e7f6f8;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-periods button:focus-visible,\n      .opportunities-extension-consumption-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-consumption-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 4px;\n      }\n\n      .opportunities-extension-consumption-navigation {\n        display: grid;\n        grid-template-columns: 36px minmax(130px, auto) 36px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 40px;\n        margin-bottom: 2px;\n      }\n\n      .opportunities-extension-consumption-navigation strong {\n        color: #312d2a;\n        font-size: 13px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-navigation-button {\n        display: grid;\n        width: 36px;\n        height: 36px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-consumption-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-consumption-figure {\n        position: relative;\n        min-width: 0;\n        min-height: 0;\n        margin: 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-consumption-figure::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-consumption-visual {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 176px;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-consumption-svg {\n        display: block;\n        width: 100%;\n        height: 300px;\n        min-height: 0;\n        overflow: visible;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #dedbd7;\n        stroke-width: 1;\n        shape-rendering: crispEdges;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #5f5a55;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #312d2a;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #b77888;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #de7907;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #de7907;\n        stroke-width: 1.5;\n        stroke-dasharray: 6 6;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group {\n        cursor: default;\n        outline: none;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group rect {\n        transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        filter: brightness(1.06);\n        stroke: #312d2a;\n        stroke-width: 1.5;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-label {\n        opacity: 0;\n        animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-average {\n        opacity: 0;\n        animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n      }\n\n      @keyframes opportunities-extension-consumption-label-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      @keyframes opportunities-extension-consumption-average-in {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n\n      .opportunities-extension-consumption-legend {\n        display: grid;\n        align-content: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-legend button {\n        display: grid;\n        min-width: 0;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: center;\n        gap: 8px;\n        padding: 6px 4px;\n        border: 0;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.25;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-legend button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-legend button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 1px;\n      }\n\n      .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #77726d;\n        opacity: .55;\n      }\n\n      .opportunities-extension-consumption-legend-swatch {\n        display: block;\n        width: 12px;\n        height: 12px;\n        justify-self: center;\n      }\n\n      .opportunities-extension-consumption-legend-funded {\n        background: #b77888;\n      }\n\n      .opportunities-extension-consumption-legend-overage {\n        background: #de7907;\n      }\n\n      .opportunities-extension-consumption-legend-average {\n        height: 0;\n        border-top: 2px dashed #de7907;\n      }\n\n      .opportunities-extension-consumption-tooltip {\n        position: absolute;\n        z-index: 2;\n        display: grid;\n        min-width: 190px;\n        max-width: 260px;\n        gap: 4px;\n        padding: 10px 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.3;\n        pointer-events: none;\n      }\n\n      .opportunities-extension-consumption-tooltip[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-consumption-tooltip strong {\n        margin-bottom: 2px;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton {\n        height: 100%;\n        min-height: 0;\n        padding: 34px 62px 24px;\n        box-sizing: border-box;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot {\n        display: flex;\n        height: 100%;\n        min-height: 220px;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px;\n        border-bottom: 1px solid #dedbd7;\n        border-left: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot span {\n        width: min(38px, 6%);\n        border-radius: 2px 2px 0 0;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-consumption-chart-empty,\n      .opportunities-extension-consumption-chart-error {\n        display: grid;\n        min-height: 220px;\n        place-items: center;\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-chart-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-account-plan-status-indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #9b9691;\n        box-shadow: 0 0 0 3px #efedeb;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #3f6f17;\n        box-shadow: 0 0 0 3px #e2f2e5;\n      }\n\n      .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n        margin-right: 8px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs {\n        display: flex;\n        min-height: 46px;\n        align-items: center;\n        padding: 0 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-skeleton-panel {\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tab {\n        display: inline-flex;\n        align-items: center;\n        gap: 9px;\n        min-height: 38px;\n        padding: 0 12px;\n        border-bottom: 3px solid #00758f;\n      }\n\n      .opportunities-extension-account-plans-skeleton-status {\n        display: block;\n        width: 10px;\n        height: 10px;\n        flex: 0 0 auto;\n        border-radius: 50%;\n        background: #dedbd7;\n        box-shadow: 0 0 0 3px #efedeb;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        padding: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        align-items: center;\n        gap: 10px;\n        min-height: 42px;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plans-skeleton-bar {\n        display: block;\n        height: 12px;\n        border-radius: 3px;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n        height: 14px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-label {\n        width: 74%;\n        height: 10px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        margin: 14px 0 0;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend-header {\n        display: flex;\n        justify-content: flex-end;\n        min-height: 38px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n        height: 12px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-period-active {\n        height: 38px !important;\n        border: 1px solid #8cc8d3;\n        background: #e7f6f8;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation {\n        display: grid;\n        grid-template-columns: 32px 124px 32px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 54px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n        justify-self: center;\n      }\n\n      .opportunities-extension-account-plans-skeleton-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 150px;\n        align-items: center;\n        gap: 28px;\n        padding: 12px 14px 0 62px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot {\n        display: flex;\n        position: relative;\n        height: 300px;\n        min-height: 0;\n        box-sizing: border-box;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px 64px;\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        position: absolute;\n        display: block;\n        content: \"\";\n        background: #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before {\n        top: 0;\n        bottom: 64px;\n        left: 0;\n        width: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        right: 0;\n        bottom: 64px;\n        left: 0;\n        height: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n        width: min(38px, 7%);\n        flex: 0 1 38px;\n        border-radius: 2px 2px 0 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend {\n        display: grid;\n        align-content: center;\n        gap: 18px;\n        min-height: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n        height: 11px;\n      }\n\n      @keyframes opportunities-extension-skeleton-pulse {\n        from { opacity: .48; }\n        to { opacity: 1; }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .opportunities-extension-account-plans-skeleton-bar,\n        .opportunities-extension-consumption-chart-skeleton-plot span,\n        .opportunities-extension-consumption-svg .consumption-animated-label,\n        .opportunities-extension-consumption-svg .consumption-animated-average {\n          animation: none;\n          opacity: 1;\n        }\n      }\n\n      .opportunities-extension-account-plans-empty,\n      .opportunities-extension-account-plans-error {\n        margin: 0;\n        padding: 28px 20px;\n        color: #5f5a55;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-account-plans-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-preferences-dialog {\n        display: grid;\n        width: min(680px, 100%);\n        max-height: min(720px, calc(100vh - 48px));\n        grid-template-rows: auto minmax(0, 1fr) auto;\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-preferences-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 18px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-preferences-header h2 {\n        margin: 0;\n        font-size: 20px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-preferences-content {\n        min-height: 0;\n        overflow: auto;\n        padding: 20px;\n      }\n\n      .opportunities-extension-preferences-fieldset {\n        min-width: 0;\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-fieldset legend {\n        margin-bottom: 12px;\n        padding: 0;\n        color: #312d2a;\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-preferences-options {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 4px 20px;\n      }\n\n      .opportunities-extension-preferences-option {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        min-width: 0;\n        padding: 9px 8px;\n        border-radius: 4px;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.35;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-option:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-preferences-option input {\n        width: 18px;\n        height: 18px;\n        flex: 0 0 18px;\n        margin: 0;\n        accent-color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-cache-field {\n        display: grid;\n        width: min(280px, 100%);\n        gap: 6px;\n        margin-top: 24px;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-preferences-cache-field select {\n        width: 100%;\n        height: 40px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-preferences-cache-field select:focus {\n        border-color: #00758f;\n        outline: 2px solid #bde7ee;\n        outline-offset: 0;\n      }\n\n      .opportunities-extension-preferences-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 14px 20px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-button {\n        min-width: 88px;\n        min-height: 36px;\n        padding: 7px 16px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-button-primary {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-button-primary:hover,\n      .opportunities-extension-button-primary:focus-visible {\n        border-color: #005e73;\n        background: #005e73;\n        outline: none;\n      }\n\n      .opportunities-extension-debug-panel {\n        position: fixed;\n        right: 24px;\n        bottom: 24px;\n        z-index: 1;\n        width: min(640px, calc(100vw - 48px));\n        max-height: min(560px, calc(100vh - 120px));\n        overflow: auto;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n        padding: 16px;\n        color: #000000;\n      }\n\n      .opportunities-extension-debug-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-debug-panel h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1.25;\n      }\n\n      .opportunities-extension-debug-panel p {\n        margin: 4px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-panel-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 12px;\n      }\n\n      .opportunities-extension-debug-visibility-button {\n        width: 34px;\n        height: 34px;\n        flex: 0 0 34px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-debug-visibility-button svg {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-debug-list {\n        display: grid;\n        gap: 10px;\n      }\n\n      .opportunities-extension-debug-item {\n        border: 1px solid #dedbd7;\n        border-left-width: 4px;\n        border-radius: 4px;\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-debug-item[open] {\n        background: #ffffff;\n      }\n\n      .opportunities-extension-debug-item-success {\n        border-left-color: #3f6f17;\n      }\n\n      .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-debug-item-failed {\n        border-left-color: #c5331f;\n      }\n\n      .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-debug-item-pending {\n        border-left-color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n        background: #eee8f2;\n        color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        min-height: 42px;\n        padding: 9px 12px 9px 10px;\n        cursor: pointer;\n        list-style: none;\n      }\n\n      .opportunities-extension-debug-heading::-webkit-details-marker {\n        display: none;\n      }\n\n      .opportunities-extension-debug-heading::before {\n        content: \"⌄\";\n        width: 14px;\n        color: #5f5a55;\n        font-size: 16px;\n        line-height: 1;\n        transform: rotate(-90deg);\n        transition: transform .15s ease;\n      }\n\n      .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n        transform: rotate(0deg);\n      }\n\n      .opportunities-extension-debug-summary-meta {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-left: auto;\n      }\n\n      .opportunities-extension-debug-http-status,\n      .opportunities-extension-debug-status {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 0 8px;\n        border-radius: 999px;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-debug-http-status {\n        background: #e8f4f6;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-debug-status {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-debug-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-item pre {\n        margin: 0;\n        padding: 8px 12px 12px;\n        color: #312d2a;\n        font-family: Consolas, \"Courier New\", monospace;\n        font-size: 12px;\n        line-height: 1.45;\n        white-space: pre-wrap;\n        word-break: break-word;\n      }\n\n      .opportunities-extension-debug-empty {\n        padding: 14px;\n        border: 1px dashed #b8b2ad;\n        border-radius: 4px;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] {\n        background: #1f1f1f;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n        background: #1f1f1f;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n        border-bottom-color: #4e4a46;\n        background:\n          linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n        background: #5b5753;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n        border-color: #3f7580;\n        background: #23474e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n        background: #8f8a85;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #7fb05b;\n        box-shadow: 0 0 0 3px #314527;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n        border-color: #4e4a46;\n        background: #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n        background: #292827;\n        color: #918b86;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n        color: #b5b0ab;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n        border-bottom-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n        background: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n        background: #3b3937;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #43c4d5;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #43c4d5;\n        background: #173e43;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #43c4d5;\n        background: #3b3937;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #4e4a46;\n        color: #746f6a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        stroke: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #a8a39e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n        background: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n        background: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n        border-top-color: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n        accent-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n        border-color: #00a6be;\n        background: #008aa6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n        border-color: #43c4d5;\n        background: #006d7a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n        border-bottom-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n        border-color: #2f9bae;\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #43c4d5;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #244f2e;\n        color: #a8dfb7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n        border-color: #b13b34;\n        background: #5f2926;\n        color: #ffb4ad;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n        background: #3b3937;\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #d1cbc6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #ffbf62;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #d2b7e9;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #9bd46a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #c0b9b3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #ffb84d;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #cba7e7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #92cf5b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #008aa6;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #6f6863;\n        background: #6f6863;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #b96e00;\n        background: #b96e00;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #755b8b;\n        background: #755b8b;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #4b7f22;\n        background: #4b7f22;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #69c985;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #c3cad3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #ff9d94;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #83bfff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n        border-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n        color: #f6f4f2;\n      }\n\n      @media (min-width: 1201px) and (max-width: 1450px) {\n        .opportunities-extension-table th:nth-child(1) {\n          width: 16%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 18%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 12%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 7%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 8%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 10%;\n        }\n      }\n\n      @media (max-width: 1200px) {\n        .opportunities-extension-table {\n          min-width: 1180px;\n        }\n\n        .opportunities-extension-table th:nth-child(1) {\n          width: 15%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 17%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 13%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 6%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 9%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 11%;\n        }\n      }\n\n      @media (max-width: 700px) {\n        .opportunities-extension-header {\n          padding: 24px 20px 18px;\n        }\n\n        .opportunities-extension-header::before {\n          left: 20px;\n        }\n\n        .opportunities-extension-header h1 {\n          font-size: 22px;\n        }\n\n        .opportunities-extension-header p {\n          font-size: 14px;\n        }\n\n        .opportunities-extension-body {\n          padding: 16px 20px 24px;\n        }\n\n        .opportunities-extension-form {\n          align-items: stretch;\n          flex-wrap: wrap;\n          gap: 14px;\n          min-height: auto;\n          padding: 12px;\n        }\n\n        .opportunities-extension-field {\n          max-width: none;\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-trigger {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-panel {\n          width: min(360px, calc(100vw - 64px));\n        }\n\n        .opportunities-extension-table-search-field {\n          width: 100%;\n        }\n\n        .opportunities-extension-stage-dashboard {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .opportunities-extension-stage-dashboard-value {\n          font-size: 18px;\n        }\n\n        .opportunities-extension-preferences-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-account-plans-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-preferences-dialog {\n          max-height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plans-dialog {\n          height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plan-panel {\n          padding: 12px 14px;\n        }\n\n        .opportunities-extension-account-plan-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n        }\n\n        .opportunities-extension-account-plan-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 3px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n          padding: 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 5px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-trend {\n          margin: 14px 0 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          align-items: center;\n          gap: 6px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n          width: 100% !important;\n        }\n\n        .opportunities-extension-account-plans-skeleton-chart {\n          grid-template-columns: minmax(0, 1fr);\n          gap: 12px;\n          padding: 12px 8px 0 34px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-legend {\n          display: flex;\n          min-height: 24px;\n          align-items: center;\n          justify-content: center;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-trend-header {\n          align-items: stretch;\n        }\n\n        .opportunities-extension-consumption-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          gap: 3px;\n        }\n\n        .opportunities-extension-consumption-periods button {\n          min-width: 0;\n          padding: 7px 4px;\n          font-size: 12px;\n        }\n\n        .opportunities-extension-consumption-chart {\n          min-height: 0;\n        }\n\n        .opportunities-extension-consumption-svg {\n          width: 760px;\n          height: 245px;\n        }\n\n        .opportunities-extension-consumption-visual {\n          width: 920px;\n          grid-template-columns: 760px 144px;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-figure {\n          overflow-x: auto;\n          overscroll-behavior-inline: contain;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton {\n          min-height: 0;\n          padding: 24px 18px 18px;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton-plot {\n          min-height: 180px;\n          gap: 4px;\n          padding: 0 6px;\n        }\n\n        .opportunities-extension-preferences-options {\n          grid-template-columns: 1fr;\n        }\n\n        .opportunities-extension-stage-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-status-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-table-surface {\n          min-width: 0;\n          min-height: calc(100vh - 230px);\n        }\n\n        .opportunities-extension-debug-panel {\n          right: 12px;\n          bottom: 12px;\n          width: calc(100vw - 24px);\n          max-height: calc(100vh - 96px);\n        }\n      }\n    \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n  --debug-surface: #fff;\n  --debug-code: #f5f6f7;\n  --debug-text: #312d2a;\n  --debug-muted: #5f5a55;\n  --debug-border: #dedbd7;\n  --debug-success: #22613b;\n  --debug-success-bg: #e1f1e5;\n  --debug-failed: #a12721;\n  --debug-failed-bg: #fce8e6;\n  --debug-pending: #805000;\n  --debug-pending-bg: #fff1ce;\n  --debug-info: #075e87;\n  --debug-info-bg: #e5f1fa;\n  --debug-key: #075e87;\n  --debug-string: #22613b;\n  --debug-number: #865000;\n  --debug-literal: #73429b;\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr);\n  width: auto;\n  height: auto;\n  max-height: none;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: 0;\n  padding: 20px;\n  border: 0;\n  border-radius: 0;\n  background: var(--debug-surface);\n  color: var(--debug-text);\n  color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n  --debug-surface: #292827;\n  --debug-code: #222120;\n  --debug-text: #f6f4f2;\n  --debug-muted: #c9c5c1;\n  --debug-border: #514c47;\n  --debug-success: #a9e3bd;\n  --debug-success-bg: #214d34;\n  --debug-failed: #ffb4ab;\n  --debug-failed-bg: #582c2a;\n  --debug-pending: #ffe099;\n  --debug-pending-bg: #59441e;\n  --debug-info: #a8d9ff;\n  --debug-info-bg: #233f52;\n  --debug-key: #8ed6f0;\n  --debug-string: #a9e3bd;\n  --debug-number: #ffe099;\n  --debug-literal: #d6b7f1;\n  color: #f6f4f2;\n  color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n  align-content: start;\n  scrollbar-gutter: stable;\n  padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n  --debug-state: var(--debug-info);\n  --debug-state-bg: var(--debug-info-bg);\n  border-color: var(--debug-border);\n  border-left-color: var(--debug-state);\n  background: var(--debug-surface);\n  min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n  color: var(--debug-state);\n  background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n  color: var(--debug-info);\n  background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 4px;\n  font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n  min-width: 0;\n  margin: 0;\n  padding: 12px;\n  max-height: 380px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  color: var(--debug-text);\n  background: var(--debug-code);\n  line-height: 1.6;\n  tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n  .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n  .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n  max-width: 100%;\n  min-height: 32px;\n  padding: 6px 8px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n  background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  border-bottom-color: #00758f;\n  background: #e8f4f6;\n  color: #006b84;\n  font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline: 2px solid #00758f;\n  outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n  flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n  flex: 1 1 180px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n  color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n  color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n  border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n  background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  background: #173f48;\n  border-bottom-color: #8cc8d3;\n  color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n  color: #55514d;\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-products-progress,\n  .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n  border: 1px solid #408254;\n  color: #185b30;\n  background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n  align-items: end;\n  gap: 12px;\n  min-height: 0;\n  padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n  min-width: 0;\n  width: 100%;\n  max-width: none;\n  grid-template-rows: auto 32px;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n  width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 32px;\n  min-height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n  padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n  right: 10px;\n  border-left-width: 4px;\n  border-right-width: 4px;\n  border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n  flex-wrap: nowrap;\n  gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 28px;\n  min-height: 28px;\n  padding: 4px 7px;\n  border: 1px solid currentColor;\n  border-radius: 18px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  gap: 4px;\n  height: 20px;\n  min-height: 20px;\n  margin: 0;\n  padding: 0 6px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n  display: block;\n  order: -1;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 700px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n  .opportunities-extension-form .opportunities-extension-status-filter-controls {\n    flex-wrap: wrap;\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-template-rows: auto auto;\n  }\n}\n\n@media (max-width: 420px) {\n  .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n  grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n  column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n  min-width: 32px;\n  gap: 4px;\n  color: #185b30;\n  background: #fff;\n  cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n    display: flex;\n    grid-column: 1 / -1;\n    flex-wrap: wrap;\n    align-items: start;\n    gap: 12px 20px;\n  }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n    width: auto;\n    max-width: 100%;\n    grid-template-rows: auto auto;\n  }\n}\n@media (max-width: 700px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin: 0 0 0 2px;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: grid;\n  place-items: center;\n  padding: 12px;\n  background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n  box-sizing: border-box;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 24px);\n  overflow-y: auto;\n  background: #fff;\n  color: #312d2a;\n  border: 1px solid #b9b4ae;\n  border-radius: 6px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n  padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 12px 0 0;\n  font-size: 12px;\n  line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 8px;\n  font: inherit;\n  line-height: 20px;\n  color: inherit;\n  background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n  .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n  .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  max-height: 180px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n  background: #fff;\n  color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n  animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 7px 14px;\n  font: inherit;\n  font-size: 13px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n  color-scheme: dark;\n  background: #292725;\n  color: #eeeae6;\n  border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n  .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n  width: 100%;\n  min-width: 1120px;\n  table-layout: fixed;\n}\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n  padding: 10px 8px;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n  position: relative;\n  padding-right: 16px;\n  padding-left: 12px;\n  padding-bottom: 38px;\n  vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n  padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n  display: block;\n  min-width: 0;\n  min-height: 2.7em;\n  line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n  position: absolute;\n  left: 12px;\n  right: 16px;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n  flex: 0 0 24px;\n  width: 24px;\n  height: 24px;\n  padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n  min-width: 84px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n  min-width: 0;\n  max-width: 100%;\n  border: 1px solid #bba5cf;\n  background: #f0e8f7;\n  color: #63358a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n  background: #43334f;\n  color: #ead5fc;\n  border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #fde8e7;\n  color: #9f201b;\n  border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #542824;\n  color: #ffd9d5;\n  border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  gap: 6px;\n  padding: 10px 8px;\n  align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n  padding-left: 12px;\n  padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n  position: static;\n  justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n  padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n  background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n  font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n  display: grid; place-items: center; padding: 4px; border: 0;\n  background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n  min-width: 0;\n  flex: 1;\n}\n.opportunities-extension-title-row h1 {\n  display: block;\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n  box-sizing: border-box;\n  margin: 0;\n  min-height: 22px;\n  line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n  width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n  padding: 10px 12px;\n  gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n  font-size: 16px;\n  line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n  font-size: 12px;\n  line-height: 16px;\n  margin-top: 3px;\n  overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n  padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n  width: min(320px, 100%);\n  height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n  width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-partyName { width: 12%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n  padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n  display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n  width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n  padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n  display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n  padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n  border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n  box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n  display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n  border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n  .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n  align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n  line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  box-sizing: border-box;\n  height: 28px;\n  margin: 0;\n  flex: 0 0 auto;\n  padding: 0 8px;\n  border: 1px solid #8aaeb9;\n  border-radius: 4px;\n  background: #fff;\n  color: #006b80;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 20px;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 8;\n  display: flex;\n  justify-content: flex-end;\n  overflow: hidden;\n  overflow: clip;\n  background: rgba(0, 0, 0, 0);\n  transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #fff;\n  --ratecard-heading: #faf9f8;\n  --ratecard-text: #312d2a;\n  --ratecard-muted: #615a55;\n  --ratecard-border: #dedbd8;\n  --ratecard-accent: #00758f;\n  --ratecard-skeleton: #eae7e4;\n  display: grid;\n  grid-template-rows: auto auto auto minmax(0, 1fr);\n  width: min(1520px, calc(100% - 48px));\n  height: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n  transform: translateX(100%);\n  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n  width: min(360px, 100%);\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--ratecard-muted);\n  border-radius: 4px;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n  padding: 11px 10px;\n  border-bottom: 1px solid var(--ratecard-border);\n  vertical-align: top;\n  overflow-wrap: anywhere;\n  text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  align-items: center;\n  gap: 5px;\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #292725;\n  --ratecard-heading: #35322f;\n  --ratecard-text: #f5f3f1;\n  --ratecard-muted: #c2bcb6;\n  --ratecard-border: #514c47;\n  --ratecard-accent: #59d1e5;\n  --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n  .opportunities-extension-ratecard-drawer { width: 100%; }\n  .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n  .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n  grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n  box-sizing: border-box;\n  width: min(420px, 100%);\n  min-width: 0;\n  height: 38px;\n  padding: 8px 12px;\n  border: 1px solid #8f8a85;\n  border-radius: 4px;\n  background: #fff;\n  color: #312d2a;\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n  --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n  --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n  --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n  --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n  --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n  min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n  border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n  --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n  --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n  --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n  --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n  --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n  background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n  .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n  .opportunities-extension-views { min-height: 480px; }\n  .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n  .opportunities-extension-calendar .fc { min-width: 0; }\n  .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n  .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n  .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n  .opportunities-calendar-day-count { top: 25px; }\n  .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n";
+const redwoodStyles = "\n      .opportunities-extension-scroll-lock {\n        overflow: hidden !important;\n      }\n\n      .opportunities-extension-modal,\n      .opportunities-extension-modal * {\n        box-sizing: border-box;\n        font-family: \"Oracle Sans\", Arial, Helvetica, sans-serif;\n      }\n\n      .opportunities-extension-modal {\n        position: fixed;\n        inset: 0;\n        z-index: 2147483647;\n        background: #f5f4f2;\n        color: #000000;\n      }\n\n      .opportunities-extension-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-shell {\n        height: 100vh;\n        min-height: 0;\n        display: grid;\n        grid-template-rows: auto minmax(0, 1fr);\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-header {\n        position: relative;\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 24px;\n        padding: 28px 40px 22px;\n        border-bottom: 1px solid #dedbd7;\n        background:\n          linear-gradient(90deg, #8f624a 0 11%, #c74634 11% 23%, #6f5a7f 23% 36%, #00758f 36% 51%, #d4b06a 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #ffffff;\n      }\n\n      .opportunities-extension-header::before {\n        position: absolute;\n        left: 40px;\n        bottom: -1px;\n        width: 64px;\n        height: 3px;\n        background: #00758f;\n        content: \"\";\n      }\n\n      .opportunities-extension-header h1 {\n        margin: 0;\n        color: #000000;\n        font-size: 24px;\n        font-weight: 700;\n        line-height: 1.2;\n        letter-spacing: 0;\n      }\n\n      .opportunities-extension-header p {\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        line-height: 1.4;\n      }\n\n      .opportunities-extension-subtitle-row {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n        margin-top: 6px;\n      }\n\n      .opportunities-extension-auth-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        color: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-auth-badge-authenticated {\n        background: #3f6f17;\n      }\n\n      .opportunities-extension-auth-badge-unauthenticated {\n        background: #c5331f;\n      }\n\n      .opportunities-extension-auth-badge-pending {\n        background: #6f5a7f;\n      }\n\n      .opportunities-extension-products-progress {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 12px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-progress[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-cache-timestamp {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 2px 8px;\n        border-radius: 999px;\n        background: #f0eeeb;\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-products-cache-timestamp[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"running\"]::before {\n        width: 12px;\n        height: 12px;\n        margin-right: 6px;\n        border: 2px solid currentColor;\n        border-right-color: transparent;\n        border-radius: 50%;\n        content: \"\";\n        animation: opportunities-extension-spin .8s linear infinite;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-products-progress[data-state=\"error\"] {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      @keyframes opportunities-extension-spin {\n        to { transform: rotate(360deg); }\n      }\n\n      .opportunities-extension-icon-button {\n        width: 36px;\n        height: 36px;\n        flex: 0 0 36px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 18px;\n        font-weight: 600;\n        line-height: 1;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-header-actions {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .opportunities-extension-icon-button svg {\n        width: 18px;\n        height: 18px;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-icon-button .opportunities-extension-settings-icon {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-icon-button:hover,\n      .opportunities-extension-icon-button:focus {\n        border-color: #b8b2ad;\n        background: #f5f4f2;\n        outline: none;\n      }\n\n      .opportunities-extension-body {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        gap: 16px;\n        padding: 22px 40px 36px;\n        background: #f5f4f2;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-form {\n        display: flex;\n        align-items: end;\n        flex-wrap: wrap;\n        gap: 24px;\n        min-height: 82px;\n        max-width: none;\n        margin: 0;\n        padding: 14px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-field {\n        display: grid;\n        max-width: max-content;\n        min-width: 270px;\n        width: max-content;\n        gap: 6px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-dashboard {\n        display: grid;\n        grid-template-columns: repeat(6, minmax(0, 1fr));\n        gap: 12px;\n      }\n\n      .opportunities-extension-stage-dashboard-card {\n        display: grid;\n        gap: 6px;\n        min-width: 0;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-top: 3px solid #5f5a55;\n        border-radius: 4px;\n        background: #ffffff;\n      }\n\n      .opportunities-extension-stage-dashboard-card span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-stage-dashboard-value {\n        overflow: hidden;\n        color: #312d2a;\n        font-size: 22px;\n        font-weight: 700;\n        line-height: 1.2;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #008aa6;\n      }\n\n      .opportunities-extension-total-dashboard-card {\n        border-top-color: #312d2a;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #6f6863;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #c87b00;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #755b8b;\n      }\n\n      .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #4b7f22;\n      }\n\n      .opportunities-extension-stage-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-stage-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-stage-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-stage-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #006b84;\n        background: #006b84;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #5f5a55;\n        background: #5f5a55;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #945400;\n        background: #945400;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #624e74;\n        background: #624e74;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #3f6f17;\n        background: #3f6f17;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-stage-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-status-filter {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-status-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-status-filter-controls {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 8px;\n      }\n\n      .opportunities-extension-status-filter-button {\n        min-height: 36px;\n        padding: 6px 12px;\n        border: 1px solid currentColor;\n        border-radius: 18px;\n        background: #ffffff;\n        font-size: 12px;\n        font-weight: 700;\n        letter-spacing: 0;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-status-filter-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-customer-filter {\n        position: relative;\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        min-width: 220px;\n      }\n\n      .opportunities-extension-customer-filter-label {\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-customer-filter-trigger {\n        position: relative;\n        min-width: 220px;\n        min-height: 44px;\n        padding: 10px 38px 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-trigger::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-top: 6px solid #312d2a;\n        border-right: 5px solid transparent;\n        border-left: 5px solid transparent;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-customer-filter-trigger:disabled {\n        cursor: not-allowed;\n        background: #f5f4f2;\n        color: #7d7772;\n      }\n\n      .opportunities-extension-customer-filter-trigger:focus-visible {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-panel {\n        position: absolute;\n        top: calc(100% + 8px);\n        left: 0;\n        z-index: 4;\n        display: grid;\n        width: min(360px, calc(100vw - 80px));\n        gap: 10px;\n        padding: 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n      }\n\n      .opportunities-extension-customer-filter-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-customer-filter-search {\n        width: 100%;\n        min-height: 40px;\n        padding: 8px 10px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-customer-filter-search:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-customer-filter-option {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-customer-filter-select-all {\n        min-height: 32px;\n        padding-bottom: 8px;\n        border-bottom: 1px solid #dedbd7;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-customer-filter-panel input[type=\"checkbox\"] {\n        width: 16px;\n        height: 16px;\n        flex: 0 0 16px;\n        accent-color: #00758f;\n      }\n\n      .opportunities-extension-customer-filter-list {\n        display: block;\n        max-height: 250px;\n        overflow: auto;\n      }\n\n      .opportunities-extension-customer-filter-option {\n        display: grid;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: start;\n        min-height: 0;\n        height: auto !important;\n        padding: 8px 4px;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-customer-filter-option input[type=\"checkbox\"] {\n        margin-top: 1px;\n      }\n\n      .opportunities-extension-customer-filter-option span {\n        display: block;\n        min-width: 0;\n        line-height: 18px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n      }\n\n      .opportunities-extension-customer-filter-option:hover {\n        background: #f5f4f2;\n      }\n\n      .opportunities-extension-customer-filter-empty {\n        margin: 4px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-table-search-field {\n        display: grid;\n        grid-template-rows: auto 44px;\n        gap: 6px;\n        width: 260px;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input {\n        width: 100%;\n        min-height: 44px;\n        padding: 10px 12px;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-table-search-field input:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-select-wrap {\n        position: relative;\n        display: block;\n        width: 270px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-select-wrap::after {\n        position: absolute;\n        top: 50%;\n        right: 16px;\n        width: 0;\n        height: 0;\n        border-left: 5px solid transparent;\n        border-right: 5px solid transparent;\n        border-top: 6px solid #000000;\n        content: \"\";\n        pointer-events: none;\n        transform: translateY(-50%);\n      }\n\n      .opportunities-extension-field select {\n        width: 100%;\n        min-width: 0;\n        max-width: 100%;\n        min-height: 44px;\n        box-sizing: border-box;\n        appearance: none;\n        border: 1px solid #b8b2ad;\n        border-radius: 3px;\n        background: #ffffff;\n        color: #000000;\n        font-size: 14px;\n        line-height: 1.3;\n        padding: 11px 44px 11px 12px;\n      }\n\n      .opportunities-extension-field select:focus {\n        border-color: #312d2a;\n        box-shadow: 0 0 0 1px #312d2a;\n        outline: none;\n      }\n\n      .opportunities-extension-table-surface {\n        min-height: 0;\n        height: 100%;\n        border: 1px solid #dedbd7;\n        border-radius: 4px;\n        background: #ffffff;\n        overflow-x: auto;\n        overflow-y: auto;\n      }\n\n      .opportunities-extension-table {\n        width: 100%;\n        min-width: 0;\n        border-collapse: collapse;\n        table-layout: fixed;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-table thead {\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-table th {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        height: 44px;\n        border-bottom: 1px solid #b8b2ad;\n        background: #faf9f8;\n        color: #312d2a;\n        font-size: 12px;\n        font-weight: 700;\n        text-align: left;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td {\n        min-height: 48px;\n        padding: 12px 16px;\n        border-bottom: 1px solid #ebe8e5;\n        vertical-align: middle;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-table th:nth-child(1) {\n        width: 16%;\n      }\n\n      .opportunities-extension-table th:nth-child(2) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(3) {\n        width: 18%;\n      }\n\n      .opportunities-extension-table th:nth-child(4) {\n        width: 11%;\n      }\n\n      .opportunities-extension-table th:nth-child(5) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(6) {\n        width: 8%;\n      }\n\n      .opportunities-extension-table th:nth-child(7) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(8) {\n        width: 6%;\n      }\n\n      .opportunities-extension-table th:nth-child(9) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(10) {\n        width: 7%;\n      }\n\n      .opportunities-extension-table th:nth-child(11) {\n        width: 4%;\n      }\n\n      .opportunities-extension-table td:nth-child(2),\n      .opportunities-extension-table td:nth-child(5),\n      .opportunities-extension-table td:nth-child(6),\n      .opportunities-extension-table td:nth-child(8) {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .opportunities-extension-table td:nth-child(9) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(7) {\n        padding-right: 6px;\n        padding-left: 6px;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .opportunities-extension-table td:nth-child(10) {\n        padding-right: 6px;\n        padding-left: 6px;\n        font-size: 12px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table td:nth-child(11) {\n        padding-right: 6px;\n        padding-left: 6px;\n        text-align: center;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-table tbody tr:hover {\n        background: #f7f6f4;\n      }\n\n      .opportunities-extension-table tbody tr:last-child td {\n        border-bottom: 0;\n      }\n\n      .opportunities-extension-table a {\n        color: #006b84;\n        text-decoration: underline;\n        text-decoration-thickness: 1px;\n        text-underline-offset: 2px;\n      }\n\n      .opportunities-extension-table a:hover {\n        color: #004f63;\n      }\n\n      .opportunities-extension-opty-number-content {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        max-width: 100%;\n      }\n\n      .opportunities-extension-name-content {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        min-width: 0;\n      }\n\n      .opportunities-extension-name-content > a {\n        min-width: 0;\n      }\n\n      .opportunities-extension-actions-content {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-products-count {\n        display: inline-grid;\n        width: auto;\n        min-width: 20px;\n        height: 20px;\n        place-items: center;\n        flex: 0 0 auto;\n        box-sizing: border-box;\n        padding: 0 3px;\n        border: 1px solid #7ca7b2;\n        border-radius: 999px;\n        background: #e8f4f6;\n        color: #006d7a;\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 1;\n        text-align: center;\n        vertical-align: middle;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-products-count:hover,\n      .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n        outline: none;\n      }\n\n      .opportunities-extension-products-count-error {\n        border-color: #d8887e;\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-products-detail-row:hover {\n        background: transparent !important;\n      }\n\n      .opportunities-extension-products-detail-cell {\n        padding: 0 !important;\n      }\n\n      .opportunities-extension-products-detail {\n        padding: 14px 20px 18px;\n        border-bottom: 1px solid #c9c5c1;\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-products-detail-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 10px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-ai-summary {\n        box-sizing: border-box;\n        width: 100%;\n        min-width: 0;\n        margin: 0 0 12px;\n        padding: 12px 16px;\n        border: 1px solid #dedbd7;\n        border-radius: 6px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 13px;\n        line-height: 1.5;\n        text-align: left;\n        white-space: normal;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-ai-summary strong {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n      }\n\n      .opportunities-extension-ai-summary p {\n        margin: 4px 0 0;\n        font: inherit;\n        white-space: pre-wrap;\n      }\n\n      .opportunities-extension-ai-summary-error {\n        color: #b42318;\n        border-color: #d9928b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary {\n        background: #292827;\n        color: #f6f4f2;\n        border-color: #5f5a55;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-ai-summary-error {\n        color: #ffb4ab;\n        border-color: #a45c55;\n      }\n\n      .opportunities-extension-products-detail-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-products-detail-heading span {\n        color: #5f5a55;\n        font-size: 11px;\n        font-weight: 600;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-products-table {\n        width: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border: 1px solid #dedbd7;\n        background: #ffffff;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-products-table th,\n      .opportunities-extension-products-table td {\n        position: static;\n        height: auto;\n        padding: 8px 10px;\n        border-bottom: 1px solid #ebe8e5;\n        background: transparent;\n        overflow-wrap: anywhere;\n        vertical-align: middle;\n        white-space: normal;\n      }\n\n      .opportunities-extension-products-table th {\n        background: #faf9f8;\n        font-size: 11px;\n      }\n\n      .opportunities-extension-products-table th:nth-child(1) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(2) { width: 16%; }\n      .opportunities-extension-products-table th:nth-child(3) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(4) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(5) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(6) { width: 8%; }\n      .opportunities-extension-products-table th:nth-child(7) { width: 7%; }\n      .opportunities-extension-products-table th:nth-child(8) { width: 10%; }\n      .opportunities-extension-products-table th:nth-child(9) { width: 12%; }\n      .opportunities-extension-products-table th:nth-child(10) { width: 5%; }\n\n      .opportunities-extension-products-empty {\n        margin: 0;\n        padding: 10px 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-copy-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        width: 24px;\n        height: 24px;\n        padding: 3px;\n        border: 0;\n        border-radius: 3px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-copy-button svg {\n        width: 16px;\n        height: 16px;\n        fill: currentColor;\n      }\n\n      .opportunities-extension-copy-button:hover,\n      .opportunities-extension-copy-button:focus-visible {\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        padding: 5px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-action-button svg {\n        width: 21px;\n        height: 21px;\n      }\n\n      .opportunities-extension-action-button:hover,\n      .opportunities-extension-action-button:focus-visible {\n        border-color: #7ca7b2;\n        background: #e8f4f6;\n        color: #004f63;\n        outline: none;\n      }\n\n      .opportunities-extension-action-button:disabled {\n        cursor: wait;\n        opacity: .72;\n      }\n\n      .opportunities-extension-action-button-loading svg {\n        animation: opportunities-extension-pulse 1s ease-in-out infinite;\n      }\n\n      @keyframes opportunities-extension-pulse {\n        50% { opacity: .35; }\n      }\n\n      .opportunities-extension-copy-toast {\n        position: fixed;\n        right: 28px;\n        bottom: 28px;\n        z-index: 3;\n        max-width: min(360px, calc(100vw - 56px));\n        padding: 12px 16px;\n        border-radius: 4px;\n        background: #2f6f18;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .18);\n        color: #ffffff;\n        font-size: 13px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-copy-toast-error {\n        background: #a52b1c;\n      }\n\n      .opportunities-extension-copy-toast[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-stage-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"SQL\"] {\n        background: #d9f0f5;\n        color: #006b84;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"PIPELINE\"] {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"UPSIDE\"] {\n        background: #fff0d8;\n        color: #945400;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"FORECAST\"] {\n        background: #eee8f5;\n        color: #624e74;\n      }\n\n      .opportunities-extension-stage-badge[data-stage=\"WON\"] {\n        background: #e5f1d9;\n        color: #3f6f17;\n      }\n\n      .opportunities-extension-status-badge {\n        display: inline-flex;\n        align-items: center;\n        min-height: 24px;\n        padding: 3px 8px;\n        border-radius: 12px;\n        background: #ebe8e5;\n        color: #312d2a;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1.2;\n        white-space: nowrap;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"OPEN\"] {\n        background: #e2f2e5;\n        color: #197a3d;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"CLOSED\"] {\n        background: #e5e7eb;\n        color: #4b5563;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"LOST\"] {\n        background: #f9e3e1;\n        color: #b13b34;\n      }\n\n      .opportunities-extension-status-badge[data-status=\"WON\"] {\n        background: #e3edf8;\n        color: #1f5f99;\n      }\n\n      .opportunities-extension-sort-button {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        width: 100%;\n        min-height: 44px;\n        padding: 8px 42px 8px 16px;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-weight: inherit;\n        letter-spacing: 0;\n        line-height: 1.2;\n        text-align: left;\n        white-space: normal;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-table-header-label {\n        display: inline-flex;\n        align-items: center;\n        min-height: 44px;\n        padding: 8px 6px;\n      }\n\n      .opportunities-extension-sort-button::after {\n        position: absolute;\n        right: 15px;\n        color: #5f5a55;\n        content: \"↕\";\n        font-size: 16px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"ascending\"]::after {\n        color: #00758f;\n        content: \"↑\";\n      }\n\n      .opportunities-extension-sort-button[data-sort-direction=\"descending\"]::after {\n        color: #00758f;\n        content: \"↓\";\n      }\n\n      .opportunities-extension-sort-button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-sort-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-table-status {\n        height: 152px;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        display: grid;\n        place-items: center;\n        padding: 24px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-preferences-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-modal {\n        position: absolute;\n        inset: 0;\n        z-index: 4;\n        display: grid;\n        place-items: center;\n        padding: 12px;\n        background: rgba(0, 0, 0, .42);\n      }\n\n      .opportunities-extension-account-plans-modal[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plans-dialog {\n        display: grid;\n        width: min(1180px, 100%);\n        height: min(760px, calc(100vh - 24px));\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plans-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 14px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-header h2 {\n        margin: 0;\n        font-size: 20px;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-account-plans-header p {\n        margin: 5px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n        line-height: 1.35;\n      }\n\n      .opportunities-extension-account-plans-content {\n        display: grid;\n        min-width: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        grid-template-columns: minmax(0, 1fr);\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-content > .opportunities-extension-account-plans-skeleton {\n        grid-row: 1 / -1;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation {\n        position: relative;\n        min-width: 0;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-tabs-navigation .opportunities-extension-account-plans-tab-navigation-button[hidden] {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tabs {\n        display: flex;\n        min-width: 0;\n        gap: 4px;\n        overflow-x: auto;\n        padding: 8px 20px 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-account-plans-tabs::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button {\n        display: grid;\n        position: absolute;\n        z-index: 1;\n        top: 50%;\n        width: 32px;\n        height: 32px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, .16);\n        transform: translateY(-50%);\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:first-child {\n        left: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:last-child {\n        right: 8px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-account-plans-tab-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-account-plans-panels {\n        min-width: 0;\n        min-height: 0;\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plan-tab {\n        min-height: 38px;\n        flex: 0 0 auto;\n        padding: 7px 12px;\n        border: 0;\n        border-bottom: 3px solid transparent;\n        background: transparent;\n        color: #5f5a55;\n        font-size: 13px;\n        font-weight: 600;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-account-plan-tab:hover {\n        background: #f0eeeb;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #00758f;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-account-plan-tab:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: -2px;\n      }\n\n      .opportunities-extension-account-plan-panel {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        box-sizing: border-box;\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plan-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-account-plan-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        margin: 0;\n      }\n\n      .opportunities-extension-account-plan-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        gap: 10px;\n        min-height: 42px;\n        align-items: center;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plan-details dt {\n        color: #5f5a55;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-account-plan-details dd {\n        min-width: 0;\n        margin: 0;\n        color: #312d2a;\n        font-size: 13px;\n        overflow-wrap: anywhere;\n      }\n\n      .opportunities-extension-consumption-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 14px;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-trend-header {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 24px;\n      }\n\n      .opportunities-extension-consumption-periods {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-periods button {\n        min-height: 38px;\n        padding: 7px 14px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 13px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-periods button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #00758f;\n        background: #e7f6f8;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-periods button:focus-visible,\n      .opportunities-extension-consumption-navigation-button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 2px;\n      }\n\n      .opportunities-extension-consumption-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        margin-top: 4px;\n      }\n\n      .opportunities-extension-consumption-navigation {\n        display: grid;\n        grid-template-columns: 36px minmax(130px, auto) 36px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 40px;\n        margin-bottom: 2px;\n      }\n\n      .opportunities-extension-consumption-navigation strong {\n        color: #312d2a;\n        font-size: 13px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-navigation-button {\n        display: grid;\n        width: 36px;\n        height: 36px;\n        place-items: center;\n        padding: 0;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-navigation-button:hover:not(:disabled) {\n        border-color: #00758f;\n        background: #f0eeeb;\n        color: #005e73;\n      }\n\n      .opportunities-extension-consumption-navigation-button:disabled {\n        border-color: #dedbd7;\n        color: #b8b2ad;\n        cursor: default;\n      }\n\n      .opportunities-extension-consumption-navigation-button svg {\n        width: 18px;\n        height: 18px;\n      }\n\n      .opportunities-extension-consumption-figure {\n        position: relative;\n        min-width: 0;\n        min-height: 0;\n        margin: 0;\n        scrollbar-width: none;\n      }\n\n      .opportunities-extension-consumption-figure::-webkit-scrollbar {\n        display: none;\n      }\n\n      .opportunities-extension-consumption-visual {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 176px;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-consumption-svg {\n        display: block;\n        width: 100%;\n        height: 300px;\n        min-height: 0;\n        overflow: visible;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #dedbd7;\n        stroke-width: 1;\n        shape-rendering: crispEdges;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #5f5a55;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #312d2a;\n        font-family: Arial, sans-serif;\n        font-size: 12px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #b77888;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #de7907;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #de7907;\n        stroke-width: 1.5;\n        stroke-dasharray: 6 6;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group {\n        cursor: default;\n        outline: none;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group rect {\n        transition: filter .16s ease, opacity .16s ease, stroke .16s ease;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        filter: brightness(1.06);\n        stroke: #312d2a;\n        stroke-width: 1.5;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-label {\n        opacity: 0;\n        animation: opportunities-extension-consumption-label-in .24s ease-out forwards;\n      }\n\n      .opportunities-extension-consumption-svg .consumption-animated-average {\n        opacity: 0;\n        animation: opportunities-extension-consumption-average-in .35s .32s ease-out forwards;\n      }\n\n      @keyframes opportunities-extension-consumption-label-in {\n        from { opacity: 0; transform: translateY(4px); }\n        to { opacity: 1; transform: translateY(0); }\n      }\n\n      @keyframes opportunities-extension-consumption-average-in {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n\n      .opportunities-extension-consumption-legend {\n        display: grid;\n        align-content: center;\n        gap: 4px;\n      }\n\n      .opportunities-extension-consumption-legend button {\n        display: grid;\n        min-width: 0;\n        grid-template-columns: 16px minmax(0, 1fr);\n        align-items: center;\n        gap: 8px;\n        padding: 6px 4px;\n        border: 0;\n        border-radius: 4px;\n        background: transparent;\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.25;\n        text-align: left;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-consumption-legend button:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-consumption-legend button:focus-visible {\n        outline: 2px solid #00758f;\n        outline-offset: 1px;\n      }\n\n      .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #77726d;\n        opacity: .55;\n      }\n\n      .opportunities-extension-consumption-legend-swatch {\n        display: block;\n        width: 12px;\n        height: 12px;\n        justify-self: center;\n      }\n\n      .opportunities-extension-consumption-legend-funded {\n        background: #b77888;\n      }\n\n      .opportunities-extension-consumption-legend-overage {\n        background: #de7907;\n      }\n\n      .opportunities-extension-consumption-legend-average {\n        height: 0;\n        border-top: 2px dashed #de7907;\n      }\n\n      .opportunities-extension-consumption-tooltip {\n        position: absolute;\n        z-index: 2;\n        display: grid;\n        min-width: 190px;\n        max-width: 260px;\n        gap: 4px;\n        padding: 10px 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n        color: #312d2a;\n        font-size: 12px;\n        line-height: 1.3;\n        pointer-events: none;\n      }\n\n      .opportunities-extension-consumption-tooltip[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-consumption-tooltip strong {\n        margin-bottom: 2px;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton {\n        height: 100%;\n        min-height: 0;\n        padding: 34px 62px 24px;\n        box-sizing: border-box;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot {\n        display: flex;\n        height: 100%;\n        min-height: 220px;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px;\n        border-bottom: 1px solid #dedbd7;\n        border-left: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-consumption-chart-skeleton-plot span {\n        width: min(38px, 6%);\n        border-radius: 2px 2px 0 0;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-consumption-chart-empty,\n      .opportunities-extension-consumption-chart-error {\n        display: grid;\n        min-height: 220px;\n        place-items: center;\n        margin: 0;\n        color: #5f5a55;\n        font-size: 14px;\n        text-align: center;\n      }\n\n      .opportunities-extension-consumption-chart-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-account-plan-status-indicator {\n        display: inline-block;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #9b9691;\n        box-shadow: 0 0 0 3px #efedeb;\n        vertical-align: middle;\n      }\n\n      .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #3f6f17;\n        box-shadow: 0 0 0 3px #e2f2e5;\n      }\n\n      .opportunities-extension-account-plan-tab .opportunities-extension-account-plan-status-indicator {\n        margin-right: 8px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs {\n        display: flex;\n        min-height: 46px;\n        align-items: center;\n        padding: 0 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton {\n        display: grid;\n        height: 100%;\n        min-height: 0;\n        grid-template-rows: auto minmax(0, 1fr);\n        overflow: hidden;\n      }\n\n      .opportunities-extension-account-plans-skeleton-panel {\n        padding: 16px 20px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tab {\n        display: inline-flex;\n        align-items: center;\n        gap: 9px;\n        min-height: 38px;\n        padding: 0 12px;\n        border-bottom: 3px solid #00758f;\n      }\n\n      .opportunities-extension-account-plans-skeleton-status {\n        display: block;\n        width: 10px;\n        height: 10px;\n        flex: 0 0 auto;\n        border-radius: 50%;\n        background: #dedbd7;\n        box-shadow: 0 0 0 3px #efedeb;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details {\n        display: grid;\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n        gap: 0 24px;\n        padding: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-details > div {\n        display: grid;\n        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);\n        align-items: center;\n        gap: 10px;\n        min-height: 42px;\n        padding: 7px 0;\n        border-bottom: 1px solid #ebe8e5;\n      }\n\n      .opportunities-extension-account-plans-skeleton-bar {\n        display: block;\n        height: 12px;\n        border-radius: 3px;\n        background: #dedbd7;\n        animation: opportunities-extension-skeleton-pulse 1.15s ease-in-out infinite alternate;\n      }\n\n      .opportunities-extension-account-plans-skeleton-tabs .opportunities-extension-account-plans-skeleton-bar {\n        height: 14px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-label {\n        width: 74%;\n        height: 10px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend {\n        display: grid;\n        min-height: 0;\n        grid-template-rows: auto auto minmax(0, 1fr);\n        margin: 14px 0 0;\n        padding-top: 12px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-trend-header {\n        display: flex;\n        justify-content: flex-end;\n        min-height: 38px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n        height: 12px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-period-active {\n        height: 38px !important;\n        border: 1px solid #8cc8d3;\n        background: #e7f6f8;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation {\n        display: grid;\n        grid-template-columns: 32px 124px 32px;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        min-height: 54px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-navigation .opportunities-extension-account-plans-skeleton-bar {\n        justify-self: center;\n      }\n\n      .opportunities-extension-account-plans-skeleton-chart {\n        display: grid;\n        min-height: 0;\n        grid-template-columns: minmax(0, 1fr) 150px;\n        align-items: center;\n        gap: 28px;\n        padding: 12px 14px 0 62px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot {\n        display: flex;\n        position: relative;\n        height: 300px;\n        min-height: 0;\n        box-sizing: border-box;\n        align-items: flex-end;\n        justify-content: space-around;\n        gap: 12px;\n        padding: 0 14px 64px;\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #ebe8e5 58px, #ebe8e5 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        position: absolute;\n        display: block;\n        content: \"\";\n        background: #dedbd7;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::before {\n        top: 0;\n        bottom: 64px;\n        left: 0;\n        width: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot::after {\n        right: 0;\n        bottom: 64px;\n        left: 0;\n        height: 1px;\n      }\n\n      .opportunities-extension-account-plans-skeleton-plot .opportunities-extension-account-plans-skeleton-bar {\n        width: min(38px, 7%);\n        flex: 0 1 38px;\n        border-radius: 2px 2px 0 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend {\n        display: grid;\n        align-content: center;\n        gap: 18px;\n        min-height: 0;\n      }\n\n      .opportunities-extension-account-plans-skeleton-legend .opportunities-extension-account-plans-skeleton-bar {\n        height: 11px;\n      }\n\n      @keyframes opportunities-extension-skeleton-pulse {\n        from { opacity: .48; }\n        to { opacity: 1; }\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .opportunities-extension-account-plans-skeleton-bar,\n        .opportunities-extension-consumption-chart-skeleton-plot span,\n        .opportunities-extension-consumption-svg .consumption-animated-label,\n        .opportunities-extension-consumption-svg .consumption-animated-average {\n          animation: none;\n          opacity: 1;\n        }\n      }\n\n      .opportunities-extension-account-plans-empty,\n      .opportunities-extension-account-plans-error {\n        margin: 0;\n        padding: 28px 20px;\n        color: #5f5a55;\n        font-size: 14px;\n      }\n\n      .opportunities-extension-account-plans-error {\n        color: #9f2d20;\n      }\n\n      .opportunities-extension-preferences-dialog {\n        display: grid;\n        width: min(680px, 100%);\n        max-height: min(720px, calc(100vh - 48px));\n        grid-template-rows: auto minmax(0, 1fr) auto;\n        overflow: hidden;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);\n        color: #312d2a;\n      }\n\n      .opportunities-extension-preferences-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 16px;\n        padding: 18px 20px;\n        border-bottom: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-preferences-header h2 {\n        margin: 0;\n        font-size: 20px;\n        font-weight: 700;\n        line-height: 1.2;\n      }\n\n      .opportunities-extension-preferences-content {\n        min-height: 0;\n        overflow: auto;\n        padding: 20px;\n      }\n\n      .opportunities-extension-preferences-fieldset {\n        min-width: 0;\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      .opportunities-extension-preferences-fieldset legend {\n        margin-bottom: 12px;\n        padding: 0;\n        color: #312d2a;\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .opportunities-extension-preferences-options {\n        display: grid;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 4px 20px;\n      }\n\n      .opportunities-extension-preferences-option {\n        display: flex;\n        align-items: flex-start;\n        gap: 10px;\n        min-width: 0;\n        padding: 9px 8px;\n        border-radius: 4px;\n        color: #312d2a;\n        font-size: 14px;\n        line-height: 1.35;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-option:hover {\n        background: #f0eeeb;\n      }\n\n      .opportunities-extension-preferences-option input {\n        width: 18px;\n        height: 18px;\n        flex: 0 0 18px;\n        margin: 0;\n        accent-color: #00758f;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-preferences-cache-field {\n        display: grid;\n        width: min(280px, 100%);\n        gap: 6px;\n        margin-top: 24px;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 700;\n      }\n\n      .opportunities-extension-preferences-cache-field select {\n        width: 100%;\n        height: 40px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        color: #312d2a;\n        font-size: 14px;\n        font-weight: 400;\n      }\n\n      .opportunities-extension-preferences-cache-field select:focus {\n        border-color: #00758f;\n        outline: 2px solid #bde7ee;\n        outline-offset: 0;\n      }\n\n      .opportunities-extension-preferences-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 14px 20px;\n        border-top: 1px solid #dedbd7;\n      }\n\n      .opportunities-extension-button {\n        min-width: 88px;\n        min-height: 36px;\n        padding: 7px 16px;\n        border: 1px solid transparent;\n        border-radius: 4px;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 1.2;\n        cursor: pointer;\n      }\n\n      .opportunities-extension-button-primary {\n        border-color: #00758f;\n        background: #00758f;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-button-primary:hover,\n      .opportunities-extension-button-primary:focus-visible {\n        border-color: #005e73;\n        background: #005e73;\n        outline: none;\n      }\n\n      .opportunities-extension-debug-panel {\n        position: fixed;\n        right: 24px;\n        bottom: 24px;\n        z-index: 1;\n        width: min(640px, calc(100vw - 48px));\n        max-height: min(560px, calc(100vh - 120px));\n        overflow: auto;\n        border: 1px solid #8f8a85;\n        border-radius: 4px;\n        background: #ffffff;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, .16);\n        padding: 16px;\n        color: #000000;\n      }\n\n      .opportunities-extension-debug-panel[hidden] {\n        display: none !important;\n      }\n\n      .opportunities-extension-debug-panel h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1.25;\n      }\n\n      .opportunities-extension-debug-panel p {\n        margin: 4px 0 0;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-panel-header {\n        display: flex;\n        align-items: flex-start;\n        justify-content: space-between;\n        gap: 12px;\n        margin-bottom: 12px;\n      }\n\n      .opportunities-extension-debug-visibility-button {\n        width: 34px;\n        height: 34px;\n        flex: 0 0 34px;\n        color: #312d2a;\n      }\n\n      .opportunities-extension-debug-visibility-button svg {\n        width: 20px;\n        height: 20px;\n      }\n\n      .opportunities-extension-debug-list {\n        display: grid;\n        gap: 10px;\n      }\n\n      .opportunities-extension-debug-item {\n        border: 1px solid #dedbd7;\n        border-left-width: 4px;\n        border-radius: 4px;\n        background: #faf9f8;\n      }\n\n      .opportunities-extension-debug-item[open] {\n        background: #ffffff;\n      }\n\n      .opportunities-extension-debug-item-success {\n        border-left-color: #3f6f17;\n      }\n\n      .opportunities-extension-debug-item-success .opportunities-extension-debug-status {\n        background: #e2f2e5;\n        color: #356d19;\n      }\n\n      .opportunities-extension-debug-item-failed {\n        border-left-color: #c5331f;\n      }\n\n      .opportunities-extension-debug-item-failed .opportunities-extension-debug-status {\n        background: #f9e3e1;\n        color: #a52b1c;\n      }\n\n      .opportunities-extension-debug-item-pending {\n        border-left-color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-item-pending .opportunities-extension-debug-status {\n        background: #eee8f2;\n        color: #6f5a7f;\n      }\n\n      .opportunities-extension-debug-heading {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 12px;\n        min-height: 42px;\n        padding: 9px 12px 9px 10px;\n        cursor: pointer;\n        list-style: none;\n      }\n\n      .opportunities-extension-debug-heading::-webkit-details-marker {\n        display: none;\n      }\n\n      .opportunities-extension-debug-heading::before {\n        content: \"⌄\";\n        width: 14px;\n        color: #5f5a55;\n        font-size: 16px;\n        line-height: 1;\n        transform: rotate(-90deg);\n        transition: transform .15s ease;\n      }\n\n      .opportunities-extension-debug-item[open] .opportunities-extension-debug-heading::before {\n        transform: rotate(0deg);\n      }\n\n      .opportunities-extension-debug-summary-meta {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin-left: auto;\n      }\n\n      .opportunities-extension-debug-http-status,\n      .opportunities-extension-debug-status {\n        display: inline-flex;\n        align-items: center;\n        min-height: 22px;\n        padding: 0 8px;\n        border-radius: 999px;\n        font-size: 11px;\n        font-weight: 700;\n        line-height: 1;\n        text-transform: uppercase;\n      }\n\n      .opportunities-extension-debug-http-status {\n        background: #e8f4f6;\n        color: #006d7a;\n      }\n\n      .opportunities-extension-debug-status {\n        background: #ebe8e5;\n        color: #5f5a55;\n      }\n\n      .opportunities-extension-debug-heading strong {\n        font-size: 13px;\n      }\n\n      .opportunities-extension-debug-item pre {\n        margin: 0;\n        padding: 8px 12px 12px;\n        color: #312d2a;\n        font-family: Consolas, \"Courier New\", monospace;\n        font-size: 12px;\n        line-height: 1.45;\n        white-space: pre-wrap;\n        word-break: break-word;\n      }\n\n      .opportunities-extension-debug-empty {\n        padding: 14px;\n        border: 1px dashed #b8b2ad;\n        border-radius: 4px;\n        color: #5f5a55;\n        font-size: 13px;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] {\n        background: #1f1f1f;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-shell,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-body {\n        background: #1f1f1f;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header {\n        border-bottom-color: #4e4a46;\n        background:\n          linear-gradient(90deg, #a8795d 0 11%, #dd5a47 11% 23%, #876e9b 23% 36%, #00a6be 36% 51%, #dfbd76 51% 63%, transparent 63% 100%) top left / 100% 6px no-repeat,\n          #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header h1,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-value,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading span,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-empty,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dt,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel p,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-error {\n        color: #ffb4a8;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-bar {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-status {\n        background: #5b5753;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-period-active {\n        border-color: #3f7580;\n        background: #23474e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot span {\n        background: #5b5753;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator {\n        background: #8f8a85;\n        box-shadow: 0 0 0 3px #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-status-indicator[data-active=\"true\"] {\n        background: #7fb05b;\n        box-shadow: 0 0 0 3px #314527;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-form,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-surface,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-dialog,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item[open] {\n        border-color: #4e4a46;\n        background: #292827;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field select,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-select-wrap::after {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-trigger:disabled {\n        background: #292827;\n        color: #918b86;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-search::placeholder,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table-search-field input::placeholder {\n        color: #b5b0ab;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header h2,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-fieldset legend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-cache-field,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details dd,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item pre,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel h2 {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation strong {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-empty {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-select-all,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th {\n        border-bottom-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-footer,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-header,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs-navigation,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-details > div,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-tabs,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-details > div {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-chart-skeleton-plot,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-trend,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        border-color: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot {\n        background: repeating-linear-gradient(to bottom, transparent 0, transparent 58px, #4e4a46 58px, #4e4a46 59px) left top / 100% 236px no-repeat;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::before,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-skeleton-plot::after {\n        background: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab {\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab:hover {\n        background: #3b3937;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plan-tab[aria-selected=\"true\"] {\n        border-bottom-color: #43c4d5;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-periods button[aria-pressed=\"true\"] {\n        border-color: #43c4d5;\n        background: #173e43;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:hover:not(:disabled),\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:hover:not(:disabled) {\n        border-color: #43c4d5;\n        background: #3b3937;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-navigation-button:disabled,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-account-plans-tab-navigation-button:disabled {\n        border-color: #4e4a46;\n        color: #746f6a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-grid-line {\n        stroke: #4e4a46;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-axis-label,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-x-label {\n        fill: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-value-label {\n        fill: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-funded {\n        fill: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-overage {\n        fill: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-average-line {\n        stroke: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:hover rect,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-svg .consumption-bar-group:focus rect {\n        stroke: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button {\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend button[aria-pressed=\"false\"] {\n        color: #a8a39e;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-funded {\n        background: #ca8798;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-overage {\n        background: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-legend-average {\n        border-top-color: #f09a32;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-consumption-tooltip {\n        border-color: #6a6560;\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option:hover {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-preferences-option input {\n        accent-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary {\n        border-color: #00a6be;\n        background: #008aa6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-button-primary:focus-visible {\n        border-color: #43c4d5;\n        background: #006d7a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-filter-option:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table tbody tr:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sort-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button:focus {\n        background: #3b3937;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table thead,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th {\n        background: #333130;\n        color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-detail {\n        border-bottom-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table th,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-table td {\n        border-bottom-color: #3f3c39;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count {\n        border-color: #2f9bae;\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count[aria-expanded=\"true\"] {\n        border-color: #43c4d5;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"running\"] {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete\"] {\n        background: #244f2e;\n        color: #a8dfb7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"complete-with-errors\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-progress[data-state=\"error\"],\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-count-error {\n        border-color: #b13b34;\n        background: #5f2926;\n        color: #ffb4ad;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-cache-timestamp {\n        background: #3b3937;\n        color: #c9c5c1;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-table a:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-copy-button:focus-visible,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:hover,\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-button:focus-visible {\n        background: #1d4e55;\n        color: #91e4ed;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"SQL\"] {\n        color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"PIPELINE\"] {\n        color: #d1cbc6;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"UPSIDE\"] {\n        color: #ffbf62;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"FORECAST\"] {\n        color: #d2b7e9;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[data-stage=\"WON\"] {\n        color: #9bd46a;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"SQL\"] {\n        border-top-color: #43c4d5;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-total-dashboard-card {\n        border-top-color: #f6f4f2;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"PIPELINE\"] {\n        border-top-color: #c0b9b3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"UPSIDE\"] {\n        border-top-color: #ffb84d;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"FORECAST\"] {\n        border-top-color: #cba7e7;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-dashboard-card[data-stage=\"WON\"] {\n        border-top-color: #92cf5b;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"SQL\"] {\n        border-color: #008aa6;\n        background: #008aa6;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"PIPELINE\"] {\n        border-color: #6f6863;\n        background: #6f6863;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"UPSIDE\"] {\n        border-color: #b96e00;\n        background: #b96e00;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"FORECAST\"] {\n        border-color: #755b8b;\n        background: #755b8b;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-stage-filter-button[aria-pressed=\"true\"][data-stage=\"WON\"] {\n        border-color: #4b7f22;\n        background: #4b7f22;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"OPEN\"] {\n        color: #69c985;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"CLOSED\"] {\n        color: #c3cad3;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"LOST\"] {\n        color: #ff9d94;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[data-status=\"WON\"] {\n        color: #83bfff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"OPEN\"] {\n        border-color: #197a3d;\n        background: #197a3d;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"CLOSED\"] {\n        border-color: #4b5563;\n        background: #4b5563;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"LOST\"] {\n        border-color: #b13b34;\n        background: #b13b34;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-status-filter-button[aria-pressed=\"true\"][data-status=\"WON\"] {\n        border-color: #1f5f99;\n        background: #1f5f99;\n        color: #ffffff;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-item {\n        border-color: #4e4a46;\n        background: #252423;\n      }\n\n      .opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-icon-button {\n        color: #f6f4f2;\n      }\n\n      @media (min-width: 1201px) and (max-width: 1450px) {\n        .opportunities-extension-table th:nth-child(1) {\n          width: 16%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 18%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 12%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 7%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 8%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 10%;\n        }\n      }\n\n      @media (max-width: 1200px) {\n        .opportunities-extension-table {\n          min-width: 1180px;\n        }\n\n        .opportunities-extension-table th:nth-child(1) {\n          width: 15%;\n        }\n\n        .opportunities-extension-table th:nth-child(3) {\n          width: 17%;\n        }\n\n        .opportunities-extension-table th:nth-child(4) {\n          width: 13%;\n        }\n\n        .opportunities-extension-table th:nth-child(6) {\n          width: 6%;\n        }\n\n        .opportunities-extension-table th:nth-child(7) {\n          width: 9%;\n        }\n\n        .opportunities-extension-table th:nth-child(10) {\n          width: 11%;\n        }\n      }\n\n      @media (max-width: 700px) {\n        .opportunities-extension-header {\n          padding: 24px 20px 18px;\n        }\n\n        .opportunities-extension-header::before {\n          left: 20px;\n        }\n\n        .opportunities-extension-header h1 {\n          font-size: 22px;\n        }\n\n        .opportunities-extension-header p {\n          font-size: 14px;\n        }\n\n        .opportunities-extension-body {\n          padding: 16px 20px 24px;\n        }\n\n        .opportunities-extension-form {\n          align-items: stretch;\n          flex-wrap: wrap;\n          gap: 14px;\n          min-height: auto;\n          padding: 12px;\n        }\n\n        .opportunities-extension-field {\n          max-width: none;\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-trigger {\n          width: 100%;\n        }\n\n        .opportunities-extension-customer-filter-panel {\n          width: min(360px, calc(100vw - 64px));\n        }\n\n        .opportunities-extension-table-search-field {\n          width: 100%;\n        }\n\n        .opportunities-extension-stage-dashboard {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .opportunities-extension-stage-dashboard-value {\n          font-size: 18px;\n        }\n\n        .opportunities-extension-preferences-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-account-plans-modal {\n          padding: 12px;\n        }\n\n        .opportunities-extension-preferences-dialog {\n          max-height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plans-dialog {\n          height: calc(100vh - 24px);\n        }\n\n        .opportunities-extension-account-plan-panel {\n          padding: 12px 14px;\n        }\n\n        .opportunities-extension-account-plan-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n        }\n\n        .opportunities-extension-account-plan-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 3px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: 0 14px;\n          padding: 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-details > div {\n          grid-template-columns: 1fr;\n          align-content: center;\n          gap: 5px;\n          min-height: 54px;\n          padding: 5px 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-trend {\n          margin: 14px 0 0;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          align-items: center;\n          gap: 6px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-periods .opportunities-extension-account-plans-skeleton-bar {\n          width: 100% !important;\n        }\n\n        .opportunities-extension-account-plans-skeleton-chart {\n          grid-template-columns: minmax(0, 1fr);\n          gap: 12px;\n          padding: 12px 8px 0 34px;\n        }\n\n        .opportunities-extension-account-plans-skeleton-legend {\n          display: flex;\n          min-height: 24px;\n          align-items: center;\n          justify-content: center;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-trend-header {\n          align-items: stretch;\n        }\n\n        .opportunities-extension-consumption-periods {\n          display: grid;\n          grid-template-columns: repeat(4, minmax(0, 1fr));\n          gap: 3px;\n        }\n\n        .opportunities-extension-consumption-periods button {\n          min-width: 0;\n          padding: 7px 4px;\n          font-size: 12px;\n        }\n\n        .opportunities-extension-consumption-chart {\n          min-height: 0;\n        }\n\n        .opportunities-extension-consumption-svg {\n          width: 760px;\n          height: 245px;\n        }\n\n        .opportunities-extension-consumption-visual {\n          width: 920px;\n          grid-template-columns: 760px 144px;\n          gap: 12px;\n        }\n\n        .opportunities-extension-consumption-figure {\n          overflow-x: auto;\n          overscroll-behavior-inline: contain;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton {\n          min-height: 0;\n          padding: 24px 18px 18px;\n        }\n\n        .opportunities-extension-consumption-chart-skeleton-plot {\n          min-height: 180px;\n          gap: 4px;\n          padding: 0 6px;\n        }\n\n        .opportunities-extension-preferences-options {\n          grid-template-columns: 1fr;\n        }\n\n        .opportunities-extension-stage-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-status-filter-controls {\n          gap: 6px;\n        }\n\n        .opportunities-extension-table-surface {\n          min-width: 0;\n          min-height: calc(100vh - 230px);\n        }\n\n        .opportunities-extension-debug-panel {\n          right: 12px;\n          bottom: 12px;\n          width: calc(100vw - 24px);\n          max-height: calc(100vh - 96px);\n        }\n      }\n    \n/* Full-page diagnostics, scoped to the extension and its current theme. */\n.opportunities-extension-modal .opportunities-extension-debug-panel {\n  --debug-surface: #fff;\n  --debug-code: #f5f6f7;\n  --debug-text: #312d2a;\n  --debug-muted: #5f5a55;\n  --debug-border: #dedbd7;\n  --debug-success: #22613b;\n  --debug-success-bg: #e1f1e5;\n  --debug-failed: #a12721;\n  --debug-failed-bg: #fce8e6;\n  --debug-pending: #805000;\n  --debug-pending-bg: #fff1ce;\n  --debug-info: #075e87;\n  --debug-info-bg: #e5f1fa;\n  --debug-key: #075e87;\n  --debug-string: #22613b;\n  --debug-number: #865000;\n  --debug-literal: #73429b;\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr);\n  width: auto;\n  height: auto;\n  max-height: none;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: 0;\n  padding: 20px;\n  border: 0;\n  border-radius: 0;\n  background: var(--debug-surface);\n  color: var(--debug-text);\n  color-scheme: light;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-panel {\n  --debug-surface: #292827;\n  --debug-code: #222120;\n  --debug-text: #f6f4f2;\n  --debug-muted: #c9c5c1;\n  --debug-border: #514c47;\n  --debug-success: #a9e3bd;\n  --debug-success-bg: #214d34;\n  --debug-failed: #ffb4ab;\n  --debug-failed-bg: #582c2a;\n  --debug-pending: #ffe099;\n  --debug-pending-bg: #59441e;\n  --debug-info: #a8d9ff;\n  --debug-info-bg: #233f52;\n  --debug-key: #8ed6f0;\n  --debug-string: #a9e3bd;\n  --debug-number: #ffe099;\n  --debug-literal: #d6b7f1;\n  color: #f6f4f2;\n  color-scheme: dark;\n}\n.opportunities-extension-debug-actions { display: flex; gap: 8px; flex: 0 0 auto; }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-list {\n  overflow: auto;\n  min-height: 0;\n  min-width: 0;\n  align-content: start;\n  scrollbar-gutter: stable;\n  padding: 2px 8px 12px 2px;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item {\n  --debug-state: var(--debug-info);\n  --debug-state-bg: var(--debug-info-bg);\n  border-color: var(--debug-border);\n  border-left-color: var(--debug-state);\n  background: var(--debug-surface);\n  min-width: 0;\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-success { --debug-state: var(--debug-success); --debug-state-bg: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-failed { --debug-state: var(--debug-failed); --debug-state-bg: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item-pending { --debug-state: var(--debug-pending); --debug-state-bg: var(--debug-pending-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-status {\n  color: var(--debug-state);\n  background: var(--debug-state-bg);\n}\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status,\n.opportunities-extension-debug-method {\n  color: var(--debug-info);\n  background: var(--debug-info-bg);\n}\n.opportunities-extension-debug-method {\n  display: inline-flex;\n  align-items: center;\n  min-height: 22px;\n  padding: 0 8px;\n  border-radius: 4px;\n  font: 700 11px/1.2 Consolas, monospace;\n}\n.opportunities-extension-debug-method[data-method=\"POST\"] { color: var(--debug-literal); background: var(--debug-code); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"2\"] { color: var(--debug-success); background: var(--debug-success-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"4\"],\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"5\"] { color: var(--debug-failed); background: var(--debug-failed-bg); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-http-status[data-http-class=\"pending\"] { color: var(--debug-pending); background: var(--debug-pending-bg); }\n.opportunities-extension-debug-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 14px 16px; }\n.opportunities-extension-debug-block { min-width: 0; border-left: 2px solid var(--debug-info); padding-left: 10px; }\n.opportunities-extension-debug-block[data-direction=\"response\"] { border-left-color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-block h3 { margin: 0 0 8px; color: var(--debug-info); font-size: 12px; }\n.opportunities-extension-modal .opportunities-extension-debug-block[data-direction=\"response\"] h3 { color: var(--debug-success); }\n.opportunities-extension-modal .opportunities-extension-debug-panel .opportunities-extension-debug-item pre {\n  min-width: 0;\n  margin: 0;\n  padding: 12px;\n  max-height: 380px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  color: var(--debug-text);\n  background: var(--debug-code);\n  line-height: 1.6;\n  tab-size: 2;\n}\n.opportunities-extension-debug-json-key { color: var(--debug-key); }\n.opportunities-extension-debug-json-string { color: var(--debug-string); }\n.opportunities-extension-debug-json-number { color: var(--debug-number); }\n.opportunities-extension-debug-json-literal { color: var(--debug-literal); }\n@media (max-width: 760px) {\n  .opportunities-extension-modal .opportunities-extension-debug-panel { padding: 12px; }\n  .opportunities-extension-debug-details { grid-template-columns: minmax(0, 1fr); }\n}\n.opportunities-extension-debug-tabs {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #dedbd7;\n}\n\n.opportunities-extension-debug-tabs button {\n  max-width: 100%;\n  min-height: 32px;\n  padding: 6px 8px;\n  border: 0;\n  border-bottom: 2px solid transparent;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n  line-height: 1.35;\n  overflow-wrap: anywhere;\n  cursor: pointer;\n}\n\n.opportunities-extension-debug-tabs button:hover {\n  background: #f5f4f2;\n}\n\n.opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  border-bottom-color: #00758f;\n  background: #e8f4f6;\n  color: #006b84;\n  font-weight: 700;\n}\n\n.opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline: 2px solid #00758f;\n  outline-offset: -2px;\n}\n\n.opportunities-extension-debug-time {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.opportunities-extension-debug-heading {\n  flex-wrap: wrap;\n}\n\n.opportunities-extension-debug-heading strong {\n  flex: 1 1 180px;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-debug-summary-meta {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button {\n  color: #f6f4f2;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-heading::before {\n  color: #c9c5c1;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs {\n  border-bottom-color: #514c47;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:hover {\n  background: #383633;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button[aria-selected=\"true\"] {\n  background: #173f48;\n  border-bottom-color: #8cc8d3;\n  color: #bde7ee;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-tabs button:focus-visible,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-list[role=\"tabpanel\"]:focus-visible {\n  outline-color: #8cc8d3;\n}\n.opportunities-extension-debug-duration {\n  color: #55514d;\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-debug-duration { color: #d6d2ce; }\n\n/* Compact filters use available CSS width, including Windows display scaling. */\n.opportunities-extension-products-progress,\n.opportunities-extension-auth-badge { opacity: 1; transition: opacity 300ms ease; }\n.opportunities-extension-products-progress[data-fading=\"true\"],\n.opportunities-extension-auth-badge[data-fading=\"true\"] { opacity: 0; }\n.opportunities-extension-auth-badge[hidden] { display: none; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-products-progress,\n  .opportunities-extension-auth-badge { transition: none; }\n}\n.opportunities-extension-crm-sr-badge {\n  border: 1px solid #408254;\n  color: #185b30;\n  background: #e1f1e5;\n}\n.opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #9f201b; background: #fde8e7; border-color: #c74640; }\n.opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #785000; background: #fff0cd; border-color: #987021; }\n.opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #5f5a55; background: #eceae8; border-color: #8f8a85; }\n.opportunities-extension-crm-sr-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge { color: #b8e4c6; background: #214d34; border-color: #6eac82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"missing\"] { color: #ffd9d5; background: #542824; border-color: #ef938b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-crm-sr-badge[data-state=\"error\"] { color: #ffe0a3; background: #584219; border-color: #c99b4b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-wl-actions-badge[data-state=\"loading\"] { color: #dedbd7; background: #484541; border-color: #8f8a85; }\n\n.opportunities-extension-form {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) max-content max-content;\n  align-items: end;\n  gap: 12px;\n  min-height: 0;\n  padding: 12px;\n}\n\n.opportunities-extension-form > *,\n.opportunities-extension-badge-filters > section {\n  min-width: 0;\n  width: 100%;\n  max-width: none;\n  grid-template-rows: auto 32px;\n  gap: 4px;\n  font-size: 12px;\n}\n\n.opportunities-extension-form > * > span:first-child,\n.opportunities-extension-badge-filters > section > span:first-child {\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap {\n  width: 100%;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger,\n.opportunities-extension-form .opportunities-extension-table-search-field input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 32px;\n  min-height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n\n.opportunities-extension-form .opportunities-extension-field select,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger {\n  padding-right: 26px;\n}\n\n.opportunities-extension-form .opportunities-extension-select-wrap::after,\n.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {\n  right: 10px;\n  border-left-width: 4px;\n  border-right-width: 4px;\n  border-top-width: 5px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-controls,\n.opportunities-extension-form .opportunities-extension-status-filter-controls {\n  flex-wrap: nowrap;\n  gap: 4px;\n}\n\n.opportunities-extension-form .opportunities-extension-stage-filter-button,\n.opportunities-extension-form .opportunities-extension-status-filter-button,\n.opportunities-extension-form .opportunities-extension-activity-filter-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 28px;\n  min-height: 28px;\n  padding: 4px 7px;\n  border: 1px solid currentColor;\n  border-radius: 18px;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0;\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions > .opportunities-extension-products-count,\n.opportunities-extension-cell-actions > .opportunities-extension-products-ramp,\n.opportunities-extension-cell-actions > .opportunities-extension-crm-sr-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  box-sizing: border-box;\n  flex: 0 0 auto;\n  gap: 4px;\n  height: 20px;\n  min-height: 20px;\n  margin: 0;\n  padding: 0 6px;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 8px;\n  font-family: inherit;\n  font-size: 10px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px;\n  letter-spacing: 0;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-badge-icon,\n.opportunities-extension-activity-filter-button .opportunities-extension-badge-icon {\n  display: block;\n  order: -1;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: inherit;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2.25;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  pointer-events: none;\n}\n\n@media (max-width: 1150px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 700px) {\n  .opportunities-extension-form {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .opportunities-extension-form .opportunities-extension-stage-filter-controls,\n  .opportunities-extension-form .opportunities-extension-status-filter-controls {\n    flex-wrap: wrap;\n  }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter {\n    grid-template-rows: auto auto;\n  }\n}\n\n@media (max-width: 420px) {\n  .opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }\n  .opportunities-extension-badge-filters > .opportunities-extension-status-filter,\n  .opportunities-extension-badge-filters > .opportunities-extension-stage-filter { grid-column: auto; }\n}\n\n.opportunities-extension-badge-filters { display: contents; }\n.opportunities-extension-activity-filter { display: grid; }\n.opportunities-extension-activity-filter[hidden] { display: none; }\n.opportunities-extension-activity-filter-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }\n/* Flexible fields share the space left by the four compact badge groups. */\n.opportunities-extension-form[data-activity-filters=\"true\"] {\n  grid-template-columns: repeat(4, minmax(0, 1fr)) repeat(4, max-content);\n  column-gap: 8px;\n}\n.opportunities-extension-activity-filter-button {\n  min-width: 32px;\n  gap: 4px;\n  color: #185b30;\n  background: #fff;\n  cursor: pointer;\n}\n.opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #9f201b; }\n.opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #005f7d; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { color: #fff; background: #25653a; border-color: #25653a; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"missing\"] { background: #a12d27; border-color: #a12d27; }\n.opportunities-extension-activity-filter-button[aria-pressed=\"true\"][data-value=\"under4\"] { background: #006b86; border-color: #006b86; }\n.opportunities-extension-activity-filter-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter { color: #eeeae6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button { color: #b8e4c6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button:not([aria-pressed=\"true\"]) { background: #333130; border-color: #6a6560; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"missing\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[data-value=\"under4\"] { color: #b5e9fc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-activity-filter-button[aria-pressed=\"true\"] { border-color: currentColor; }\n@media (max-width: 1350px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters {\n    display: flex;\n    grid-column: 1 / -1;\n    flex-wrap: wrap;\n    align-items: start;\n    gap: 12px 20px;\n  }\n  .opportunities-extension-form[data-activity-filters=\"true\"] .opportunities-extension-badge-filters > section {\n    width: auto;\n    max-width: 100%;\n    grid-template-rows: auto auto;\n  }\n}\n@media (max-width: 700px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .opportunities-extension-activity-filter-controls { flex-wrap: wrap; }\n}\n@media (max-width: 420px) {\n  .opportunities-extension-form[data-activity-filters=\"true\"] { grid-template-columns: minmax(0, 1fr); }\n}\n\n.opportunities-extension-add-action {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  flex: 0 0 16px;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  margin: 0 0 0 2px;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-add-action:hover { background: rgba(127, 127, 127, .2); }\n.opportunities-extension-add-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-modal {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: grid;\n  place-items: center;\n  padding: 12px;\n  background: rgba(0, 0, 0, .42);\n}\n.opportunities-extension-action-form-dialog {\n  box-sizing: border-box;\n  width: min(560px, 100%);\n  max-height: calc(100vh - 24px);\n  overflow-y: auto;\n  background: #fff;\n  color: #312d2a;\n  border: 1px solid #b9b4ae;\n  border-radius: 6px;\n  box-shadow: 0 12px 36px rgba(0, 0, 0, .25);\n}\n.opportunities-extension-action-form {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 14px;\n  padding: 18px;\n}\n.opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-context {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: 6px 12px;\n  margin: 12px 0 0;\n  font-size: 12px;\n  line-height: 18px;\n}\n.opportunities-extension-action-form-context dt { font-weight: 600; }\n.opportunities-extension-action-form-context dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; }\n.opportunities-extension-action-form-field[hidden] { display: none; }\n.opportunities-extension-action-form-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }\n.opportunities-extension-action-form-status[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-action-form-wide,\n.opportunities-extension-action-form-footer { grid-column: 1 / -1; }\n.opportunities-extension-action-form-field input,\n.opportunities-extension-action-form-field select,\n.opportunities-extension-action-form-field textarea {\n  box-sizing: border-box;\n  min-width: 0;\n  width: 100%;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 8px;\n  font: inherit;\n  line-height: 20px;\n  color: inherit;\n  background: #fff;\n}\n.opportunities-extension-action-form-field textarea { resize: vertical; min-height: 96px; }\n.opportunities-extension-action-form-field select { height: 38px; }\n.opportunities-extension-action-form-field select[hidden] { display: none; }\n.opportunities-extension-sr-form-dialog { width: min(900px, 100%); }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 20px 24px; }\n.opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { gap: 20px 24px; padding: 24px; align-items: start; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-action-form-field { gap: 8px; }\n.opportunities-extension-sr-form-dialog textarea { min-height: 112px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-option { padding: 12px 0; gap: 10px; }\n.opportunities-extension-sr-form-dialog .opportunities-extension-sr-service-abstract { font-size: 13px; line-height: 20px; }\n@media (min-width: 1000px) {\n  .opportunities-extension-sr-form-dialog { width: min(1120px, 100%); }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }\n  .opportunities-extension-sr-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; align-items: start; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option { margin: 0; border-top: 1px solid #aaa6a040; }\n  .opportunities-extension-sr-services .opportunities-extension-sr-service-option:nth-child(-n+2) { border-top: 0; }\n}\n@media (max-width: 600px) {\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-account-plans-header { padding: 16px; }\n  .opportunities-extension-sr-form-dialog > .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; }\n}\n.opportunities-extension-sr-lookup { min-width: 0; padding: 0; margin: 0; border: 0; font-size: 13px; }\n.opportunities-extension-sr-lookup legend { padding: 0 0 8px; font-weight: 600; }\n.opportunities-extension-sr-lookup[aria-busy=\"true\"] > p { opacity: .65; }\n.opportunities-extension-sr-service-option { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; cursor: pointer; }\n.opportunities-extension-sr-service-option + .opportunities-extension-sr-service-option { border-top: 1px solid #aaa6a040; }\n.opportunities-extension-sr-service-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00758f; }\n.opportunities-extension-sr-service-option > span { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-sr-service-name { display: block; font-weight: 600; line-height: 20px; }\n.opportunities-extension-sr-service-abstract { display: block; margin-top: 3px; color: #625d58; font-size: 12px; line-height: 18px; white-space: pre-wrap; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-service-abstract { color: #c7c2bc; }\n.opportunities-extension-sr-lookup-retry { color: inherit; background: transparent; border: 1px solid #8f8983; border-radius: 4px; padding: 5px 10px; cursor: pointer; }\n.opportunities-extension-sr-lookup-retry[hidden] { display: none; }\n.opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n.opportunities-extension-modal .opportunities-extension-copy-toast { z-index: 20; }\n.opportunities-extension-action-combobox { position: relative; min-width: 0; }\n.opportunities-extension-action-combobox input { height: 38px; }\n.opportunities-extension-action-options {\n  position: absolute;\n  z-index: 10;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  max-height: 180px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);\n  background: #fff;\n  color: #292725;\n}\n.opportunities-extension-action-options[data-placement=\"above\"] { top: auto; bottom: calc(100% + 4px); }\n.opportunities-extension-action-options[hidden] { display: none; }\n.opportunities-extension-action-option { padding: 8px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }\n.opportunities-extension-action-option:hover,\n.opportunities-extension-action-option[aria-selected=\"true\"] { background: #e3f2f5; color: #005b70; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-options { background: #211f1d; color: #eeeae6; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option:hover,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-option[aria-selected=\"true\"] { background: #174955; color: #c9f4ff; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled {\n  animation: opportunities-action-options-loading 1s ease-in-out infinite alternate;\n}\n@keyframes opportunities-action-options-loading { from { opacity: .45; } to { opacity: .85; } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-form-field > :disabled,\n  .opportunities-extension-action-form[data-state=\"loading\"] .opportunities-extension-action-combobox input:disabled { animation: none; }\n}\n.opportunities-extension-action-form-footer { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-action-form-footer button {\n  border: 1px solid #8f8983;\n  border-radius: 4px;\n  padding: 7px 14px;\n  font: inherit;\n  font-size: 13px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.opportunities-extension-action-form-footer button:disabled { opacity: .55; cursor: not-allowed; }\n.opportunities-extension-action-form :focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-dialog {\n  color-scheme: dark;\n  background: #292725;\n  color: #eeeae6;\n  border-color: #756f68;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field input,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field select,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-field textarea { background: #211f1d; border-color: #918a82; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-action-form :focus-visible { outline-color: #80d6e8; }\n@media (max-width: 420px) {\n  .opportunities-extension-action-form { grid-template-columns: minmax(0, 1fr); }\n}\n\n/* Keep layout rules on the outer table, never on expanded product tables. */\n.opportunities-extension-table[data-opportunities-layout=\"inline-actions\"] {\n  width: 100%;\n  min-width: 1120px;\n  table-layout: fixed;\n}\n\n/* Fixed table layout shares leftover width only between the two auto columns. */\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] { width: auto; }\n.opportunities-extension-table > thead > tr > th[data-column=\"owner\"] { width: 132px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"optyNumber\"] { width: 106px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"revenue\"] { width: 124px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"closeDate\"] { width: 100px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"status\"] { width: 114px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"winProbability\"] { width: 110px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"stage\"] { width: 94px; }\n.opportunities-extension-table > thead > tr > th[data-column=\"lastUpdateDate\"] { width: 136px; }\n\n.opportunities-extension-table > tbody > tr > td[data-column] {\n  padding: 10px 8px;\n  overflow: visible;\n  text-overflow: clip;\n  white-space: normal;\n  font-variant-numeric: tabular-nums;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"name\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] {\n  position: relative;\n  padding-right: 16px;\n  padding-left: 12px;\n  padding-bottom: 38px;\n  vertical-align: top;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"owner\"] {\n  padding-right: 16px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"closeDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"lastUpdateDate\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"status\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"stage\"],\n.opportunities-extension-table > tbody > tr > td[data-column=\"winProbability\"] {\n  white-space: nowrap;\n}\n\n.opportunities-extension-cell-content {\n  display: block;\n  min-width: 0;\n  min-height: 2.7em;\n  line-height: 1.35;\n}\n\n.opportunities-extension-cell-content > :first-child {\n  display: block;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-cell-actions {\n  position: absolute;\n  left: 12px;\n  right: 16px;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 6px;\n  height: 24px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button {\n  flex: 0 0 24px;\n  width: 24px;\n  height: 24px;\n  padding: 2px;\n}\n\n.opportunities-extension-table > tbody > tr > td[data-column=\"customer\"] .opportunities-extension-cell-actions {\n  min-width: 84px;\n}\n\n.opportunities-extension-cell-actions .opportunities-extension-action-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.opportunities-extension-cell-actions button:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.opportunities-extension-products-ramp {\n  min-width: 0;\n  max-width: 100%;\n  border: 1px solid #bba5cf;\n  background: #f0e8f7;\n  color: #63358a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp {\n  background: #43334f;\n  color: #ead5fc;\n  border-color: #9372ac;\n}\n\n.opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #fde8e7;\n  color: #9f201b;\n  border-color: #c74640;\n}\n\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-products-ramp[data-missing=\"true\"] {\n  background: #542824;\n  color: #ffd9d5;\n  border-color: #ef938b;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  gap: 6px;\n  padding: 10px 8px;\n  align-items: center;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column=\"name\"] .opportunities-extension-sort-button,\n.opportunities-extension-table > thead > tr > th[data-column=\"customer\"] .opportunities-extension-sort-button {\n  padding-left: 12px;\n  padding-right: 16px;\n}\n\n.opportunities-extension-sort-label {\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n\n.opportunities-extension-table > thead > tr > th[data-column] .opportunities-extension-sort-button::after {\n  position: static;\n  justify-self: end;\n}\n.opportunities-extension-crm-sr-badge[type=\"button\"] { cursor: pointer; font-family: inherit; }\n.opportunities-extension-sr-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; overflow: auto;\n  padding: 12px; border: 1px solid #b9b5b0; border-radius: 6px;\n  background: #fff; color: #302e2b; box-shadow: 0 6px 24px #0003;\n  font: 12px/1.5 Arial, sans-serif; text-align: left; overflow-wrap: anywhere;\n}\n.opportunities-extension-sr-popover section { padding: 8px 0; }\n.opportunities-extension-sr-popover section + section { border-top: 1px solid #dedbd7; }\n.opportunities-extension-sr-number { display: flex; align-items: center; gap: 8px; padding-right: 30px; font-weight: 600; }\n.opportunities-extension-sr-popover a { color: #00677d; text-decoration: underline; }\n.opportunities-extension-sr-details { white-space: pre-wrap; margin-top: 6px; }\n.opportunities-extension-sr-children { margin: 10px 0 0 8px; padding-left: 10px; border-left: 2px solid #8c969a; overflow-wrap: anywhere; }\n.opportunities-extension-sr-children[aria-busy=\"true\"] { min-height: 28px; animation: opportunities-action-options-loading 1s ease-in-out infinite alternate; }\n.opportunities-extension-sr-children[role=\"alert\"] { color: #a12d27; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-children[role=\"alert\"] { color: #ffd9d5; }\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-sr-children[aria-busy=\"true\"] { animation: none; } }\n.opportunities-extension-sr-dismiss {\n  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;\n  display: grid; place-items: center; padding: 4px; border: 0;\n  background: transparent; color: inherit; cursor: pointer;\n}\n.opportunities-extension-sr-dismiss svg { width: 16px; height: 16px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover { background: #292827; color: #f1efec; border-color: #77716b; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover section + section { border-color: #5f5953; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-sr-popover a { color: #7ddced; }\n.opportunities-extension-title-row {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px 16px;\n  min-width: 0;\n  flex: 1;\n}\n.opportunities-extension-title-row h1 {\n  display: block;\n  margin: 0;\n  padding: 0;\n  line-height: 1;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row {\n  display: flex;\n  align-items: center;\n  align-self: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n}\n.opportunities-extension-title-row .opportunities-extension-subtitle-row > span {\n  box-sizing: border-box;\n  margin: 0;\n  min-height: 22px;\n  line-height: 16px;\n}\n.opportunities-extension-title-row + .opportunities-extension-header-actions { flex-shrink: 0; }\n.opportunities-extension-refresh-all:disabled { opacity: .65; cursor: wait; }\n.opportunities-extension-refresh-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: opportunities-refresh-spin 1s linear infinite; }\n@keyframes opportunities-refresh-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-refresh-all[aria-busy=\"true\"] svg { animation: none; }\n}\n.opportunities-extension-option-description { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; white-space: normal; overflow-wrap: anywhere; opacity: .85; }\n.opportunities-extension-action-form-dialog.opportunities-extension-internal-sr-dialog { width: min(760px, 100%); }\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog {\n  width: min(1700px, 100%);\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header {\n  padding: 10px 12px;\n  gap: 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header h2 {\n  font-size: 16px;\n  line-height: 22px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-account-plans-header p {\n  font-size: 12px;\n  line-height: 16px;\n  margin-top: 3px;\n  overflow-wrap: anywhere;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-icon-button {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  min-height: 28px;\n  padding: 4px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-toolbar {\n  padding: 8px 12px;\n}\n.opportunities-extension-install-base-dialog .opportunities-extension-customer-table-search {\n  width: min(320px, 100%);\n  height: 32px;\n  padding: 4px 8px;\n  font-size: 12px;\n  line-height: 20px;\n}\n.opportunities-extension-install-base-content {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  scrollbar-gutter: stable;\n}\n.opportunities-extension-install-base-message { margin: 10px 12px; font-size: 12px; line-height: 16px; }\n.opportunities-extension-install-base-table {\n  width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; font-size: 11px;\n}\n.opportunities-extension-install-base-table col { width: 7%; }\n.opportunities-extension-install-base-table .install-base-col-partyName { width: 12%; }\n.opportunities-extension-install-base-table .install-base-col-productGroupName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-productName { width: 13%; }\n.opportunities-extension-install-base-table .install-base-col-quantity { width: 5%; }\n.opportunities-extension-install-base-table .install-base-col-quantityType { width: 8%; }\n.opportunities-extension-install-base-table th,\n.opportunities-extension-install-base-table td {\n  padding: 8px 6px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-install-base-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-install-base-table td[data-format=\"amount\"],\n.opportunities-extension-install-base-table td[data-format=\"quantity\"] { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-install-base-table td[data-format=\"date\"] { white-space: nowrap; }\n.opportunities-extension-install-base-status {\n  display: inline-block; padding: 2px 5px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\n.opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #855300; background: #fff0d6; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"ACTIVE\"] { color: #b8e4c6; background: #214d34; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-install-base-status[data-status=\"UNSUPPORTED\"] { color: #ffdfa2; background: #614418; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-install-base-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog { width: min(1700px, 100%); }\n.opportunities-extension-service-requests-content { min-width: 0; min-height: 0; overflow: auto; scrollbar-gutter: stable; }\n.opportunities-extension-service-requests-message { margin: 16px; font-size: 13px; }\n.opportunities-extension-service-requests-table {\n  width: 100%; min-width: 1200px; table-layout: fixed; border-collapse: collapse; font-size: 12px;\n}\n.opportunities-extension-service-requests-table col { width: 7%; }\n.opportunities-extension-service-requests-table .service-requests-col-name { width: 17%; }\n.opportunities-extension-service-requests-table .service-requests-col-id { width: 10%; }\n.opportunities-extension-service-requests-table .service-requests-col-severity { width: 5%; }\n.opportunities-extension-service-requests-table .service-requests-col-subStatus { width: 14%; }\n.opportunities-extension-service-requests-table .service-requests-col-productName { width: 12%; }\n.opportunities-extension-service-requests-table th,\n.opportunities-extension-service-requests-table td {\n  padding: 12px 8px; text-align: left; vertical-align: middle; overflow-wrap: anywhere;\n  border-bottom: 1px solid #e8e5e1; line-height: 1.4;\n}\n.opportunities-extension-service-requests-table th { position: sticky; top: 0; z-index: 1; background: #faf9f8; }\n.opportunities-extension-service-requests-table td[data-field=\"created\"],\n.opportunities-extension-service-requests-table td[data-field=\"lastUpdated\"],\n.opportunities-extension-service-requests-table td[data-field=\"id\"] { white-space: nowrap; font-variant-numeric: tabular-nums; }\n.opportunities-extension-service-request-status {\n  display: inline-block; padding: 3px 6px; border-radius: 12px; font-size: 10px; font-weight: 600;\n  color: #5f5a55; background: #eceae8;\n}\n.opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #17693a; background: #e1f1e5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-content,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { color: #f6f4f2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-message[role=\"alert\"] { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th { background: #353331; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-requests-table td { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-service-request-status[data-status=\"OPEN\"] { color: #b8e4c6; background: #214d34; }\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-service-requests-table .opportunities-extension-account-plans-skeleton-bar { animation: none; }\n}\n\n/* Scope sizing to Cloud Consumption, not other dialogs sharing its components. */\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header { padding: 10px 12px; gap: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header h2 { font-size: 16px; line-height: 22px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-header p { font-size: 12px; line-height: 16px; margin-top: 3px; overflow-wrap: anywhere; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-icon-button { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 4px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-tabs { padding: 4px 12px 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-tab { min-height: 30px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { padding: 8px 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { gap: 0 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details > div { grid-template-columns: minmax(85px, 35%) minmax(0, 1fr); min-height: 32px; padding: 4px 0; gap: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dt { font-size: 11px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details dd { font-size: 12px; line-height: 16px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-trend { margin-top: 8px; padding-top: 6px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-periods button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation { grid-template-columns: 28px minmax(120px, auto) 28px; min-height: 30px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation strong { font-size: 12px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-navigation-button { width: 28px; height: 28px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-svg { height: 100%; max-height: 100%; min-width: 0; }\n[data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend button { font-size: 11px; padding: 4px; gap: 5px; }\n\n/* Small viewports must scroll rather than clip details or collapse the chart. */\n@media (max-height: 560px), (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plans-panels { overflow: auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-panel { height: auto; min-height: 100%; grid-template-rows: auto minmax(280px, 1fr); }\n}\n@media (max-width: 700px) {\n  [data-consumption-layout=\"compact\"] .opportunities-extension-account-plan-details { grid-template-columns: minmax(0, 1fr); }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-visual { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }\n  [data-consumption-layout=\"compact\"] .opportunities-extension-consumption-legend { display: flex; flex-wrap: wrap; }\n}\n\n.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }\n.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }\n.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }\n.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }\n.opportunities-extension-projection-badge {\n  display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;\n  padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;\n  color: #5f5a55; background: #eceae8; white-space: nowrap;\n}\nbutton.opportunities-extension-projection-badge { cursor: pointer; }\n.opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #a12424; background: #fbe5e5; }\n.opportunities-extension-projection-badge[data-status=\"overage\"] { color: #185a9d; background: #e0edfc; }\n.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-projection-popover {\n  position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;\n  border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;\n  box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;\n}\n.opportunities-extension-projection-popover[hidden] { display: none; }\n.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {\n  display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;\n  border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;\n}\n.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }\n.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }\n.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }\n.opportunities-extension-projection-fields > div { min-width: 0; }\n.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }\n.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }\n.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }\n.opportunities-extension-projection-children > section + section { margin-top: 16px; }\n.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }\n.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"forfeit\"] { color: #ffb9b9; background: #682e32; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-badge[data-status=\"overage\"] { color: #c5dfff; background: #224b76; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields dt,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-empty { color: #cec9c2; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-fields a { color: #76dbea; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }\n@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }\n@media (max-width: 480px) {\n  .opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }\n\n.opportunities-extension-account-plan-details > .opportunities-extension-contract-row {\n  align-items: center;\n}\n.opportunities-extension-contract-row > dt,\n.opportunities-extension-contract-row > dd,\n.opportunities-extension-contract-ratecard > span {\n  line-height: 20px;\n}\n.opportunities-extension-contract-ratecard {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px 10px;\n}\n.opportunities-extension-ratecard-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  box-sizing: border-box;\n  height: 28px;\n  margin: 0;\n  flex: 0 0 auto;\n  padding: 0 8px;\n  border: 1px solid #8aaeb9;\n  border-radius: 4px;\n  background: #fff;\n  color: #006b80;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 20px;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-button:hover { background: #e8f4f6; }\n.opportunities-extension-ratecard-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 8;\n  display: flex;\n  justify-content: flex-end;\n  overflow: hidden;\n  overflow: clip;\n  background: rgba(0, 0, 0, 0);\n  transition: background-color 320ms ease;\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] { background: rgba(0, 0, 0, .32); }\n.opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #fff;\n  --ratecard-heading: #faf9f8;\n  --ratecard-text: #312d2a;\n  --ratecard-muted: #615a55;\n  --ratecard-border: #dedbd8;\n  --ratecard-accent: #00758f;\n  --ratecard-skeleton: #eae7e4;\n  display: grid;\n  grid-template-rows: auto auto auto minmax(0, 1fr);\n  width: min(1520px, calc(100% - 48px));\n  height: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  box-shadow: -6px 0 24px rgba(0, 0, 0, .2);\n  transform: translateX(100%);\n  transition: transform 320ms cubic-bezier(.22, .61, .36, 1);\n}\n.opportunities-extension-ratecard-overlay[data-open=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(0); }\n.opportunities-extension-ratecard-header > div { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-ratecard-plan-details { padding: 12px 20px 0; }\n.opportunities-extension-ratecard-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }\n.opportunities-extension-ratecard-search {\n  width: min(360px, 100%);\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 9px 12px;\n  border: 1px solid var(--ratecard-muted);\n  border-radius: 4px;\n  background: var(--ratecard-bg);\n  color: var(--ratecard-text);\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-ratecard-search::placeholder { color: var(--ratecard-muted); opacity: 1; }\n.opportunities-extension-ratecard-count { color: var(--ratecard-muted); font-size: 12px; white-space: nowrap; }\n.opportunities-extension-ratecard-viewport { overflow: auto; min-height: 0; min-width: 0; scrollbar-gutter: stable; }\n.opportunities-extension-ratecard-table { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }\n.opportunities-extension-ratecard-table th, .opportunities-extension-ratecard-table td {\n  padding: 11px 10px;\n  border-bottom: 1px solid var(--ratecard-border);\n  vertical-align: top;\n  overflow-wrap: anywhere;\n  text-align: left;\n}\n.opportunities-extension-ratecard-table th { position: sticky; top: 0; z-index: 1; background: var(--ratecard-heading); }\n.opportunities-extension-ratecard-sort {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 12px;\n  align-items: center;\n  gap: 5px;\n  width: 100%;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-weight: 600;\n  text-align: left;\n  cursor: pointer;\n}\n.opportunities-extension-ratecard-sort-icon { color: var(--ratecard-accent); text-align: center; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-numeric { text-align: right; font-variant-numeric: tabular-nums; }\n.opportunities-extension-ratecard-table .opportunities-extension-ratecard-notice { padding: 28px 20px; text-align: center; }\n.opportunities-extension-ratecard-notice [role=\"alert\"] { color: #b3261e; }\n.opportunities-extension-ratecard-skeleton { display: block; width: 85%; height: 14px; border-radius: 3px; background: var(--ratecard-skeleton); animation: opportunities-ratecard-pulse 1.1s ease-in-out infinite alternate; }\n.opportunities-extension-ratecard-drawer :focus-visible, .opportunities-extension-ratecard-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] { pointer-events: none; background: rgba(0, 0, 0, 0); transition-duration: 180ms; }\n.opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { transform: translateX(100%); transition-duration: 180ms; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer {\n  --ratecard-bg: #292725;\n  --ratecard-heading: #35322f;\n  --ratecard-text: #f5f3f1;\n  --ratecard-muted: #c2bcb6;\n  --ratecard-border: #514c47;\n  --ratecard-accent: #59d1e5;\n  --ratecard-skeleton: #514c47;\n}\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button { color: #59d1e5; border-color: #6298a2; background: #292725; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-button:hover { background: #313f40; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-notice [role=\"alert\"] { color: #ffb4ab; }\n[data-theme=\"dark\"] .opportunities-extension-ratecard-drawer :focus-visible, [data-theme=\"dark\"] .opportunities-extension-ratecard-button:focus-visible { outline-color: #59d1e5; }\n@keyframes opportunities-ratecard-pulse { from { opacity: .45; } to { opacity: 1; } }\n@media (max-width: 720px) {\n  .opportunities-extension-ratecard-drawer { width: 100%; }\n  .opportunities-extension-ratecard-toolbar { flex-wrap: wrap; gap: 8px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .opportunities-extension-ratecard-overlay, .opportunities-extension-ratecard-drawer, .opportunities-extension-ratecard-skeleton,\n  .opportunities-extension-ratecard-overlay[data-closing=\"true\"], .opportunities-extension-ratecard-overlay[data-closing=\"true\"] .opportunities-extension-ratecard-drawer { animation: none; transition: none; }\n}\n\n.opportunities-extension-account-plans-dialog.opportunities-extension-install-base-dialog,\n.opportunities-extension-account-plans-dialog.opportunities-extension-service-requests-dialog {\n  grid-template-rows: auto auto minmax(0, 1fr);\n}\n.opportunities-extension-customer-table-toolbar { padding: 12px 16px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-customer-table-search {\n  box-sizing: border-box;\n  width: min(420px, 100%);\n  min-width: 0;\n  height: 38px;\n  padding: 8px 12px;\n  border: 1px solid #8f8a85;\n  border-radius: 4px;\n  background: #fff;\n  color: #312d2a;\n  font: inherit;\n  font-size: 13px;\n}\n.opportunities-extension-customer-table-search::placeholder { color: #5f5a55; opacity: 1; }\n.opportunities-extension-customer-table-search:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-toolbar { border-color: #484541; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search { background: #353331; color: #f6f4f2; border-color: #8f8a85; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search::placeholder { color: #c9c5c1; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-customer-table-search:focus-visible { outline-color: #59d1e5; }\n\n.opportunities-extension-views { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }\n.opportunities-extension-views > [hidden] { display: none; }\n.opportunities-extension-view-tabs { display: flex; gap: 20px; border-bottom: 1px solid #dedbd7; }\n.opportunities-extension-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #625d58; padding: 6px 2px 9px; font: 600 13px/20px Arial, sans-serif; cursor: pointer; }\n.opportunities-extension-view-tabs button[aria-selected=\"true\"] { border-bottom-color: #00758f; color: #00657b; }\n.opportunities-extension-view-tabs button:focus-visible { outline: 2px solid #00758f; outline-offset: -2px; }\n.opportunities-extension-view-tabs button { display: inline-flex; align-items: center; gap: 6px; }\n.opportunities-extension-view-tabs button svg { width: 16px; height: 16px; flex: 0 0 16px; }\n.opportunities-extension-calendar {\n  --fc-border-color: #dedbd7; --fc-page-bg-color: #fff; --fc-neutral-bg-color: #f5f4f2;\n  --fc-neutral-text-color: #625d58; --fc-today-bg-color: #eef7fa;\n  --fc-button-bg-color: #fff; --fc-button-text-color: #312d2a; --fc-button-border-color: #b9b4ae;\n  --fc-button-hover-bg-color: #e6f3f5; --fc-button-hover-border-color: #00758f;\n  --fc-button-active-bg-color: #dceff3; --fc-button-active-border-color: #00758f;\n  min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; padding: 12px; background: #fff; color: #312d2a;\n  border: 1px solid var(--fc-border-color); border-radius: 4px; font: 13px/1.4 Arial, sans-serif;\n}\n.opportunities-calendar-grid { flex: 1 1 0; min-height: 0; min-width: 0; }\n.opportunities-extension-calendar .fc { min-width: 620px; }\n.opportunities-extension-calendar .fc .fc-toolbar { gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }\n.opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 18px; line-height: 26px; letter-spacing: 0; }\n.opportunities-extension-calendar .fc .fc-button { font-size: 13px; line-height: 20px; padding: 5px 10px; border-radius: 4px; box-shadow: none; }\n.opportunities-extension-calendar .fc .fc-button:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-calendar .fc .fc-button svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }\n.opportunities-extension-calendar .fc a { color: inherit; text-decoration: none; }\n.opportunities-extension-calendar .fc th { background: var(--fc-neutral-bg-color); font-size: 12px; font-weight: 600; padding: 4px 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-number { font-size: 11px; line-height: 18px; padding: 1px 6px; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-events { min-height: 0; margin-bottom: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-bottom { margin: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { min-height: 0; padding-top: 0; }\n/* Event content must not contribute to the table's intrinsic row heights. */\n.opportunities-extension-calendar .fc .fc-daygrid-body tbody { height: 100%; }\n.opportunities-extension-calendar .fc .fc-daygrid-body tr { height: calc(100% / var(--opportunities-calendar-weeks, 5)); }\n.opportunities-extension-calendar .fc .fc-daygrid-day { position: relative; }\n.opportunities-extension-calendar .fc .fc-daygrid-day-frame { position: absolute; inset: 0; }\n.opportunities-extension-calendar .fc .fc-daygrid-week-number { top: 0; left: 0; padding: 3px 6px; background: var(--fc-neutral-bg-color); color: inherit; font: 600 10px/16px Arial, sans-serif; white-space: nowrap; }\n.opportunities-calendar-day-count { position: absolute; top: 2px; left: 6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dceff3; color: #005467; font: 600 10px/16px Arial, sans-serif; text-align: center; }\n.fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 82px; }\n.opportunities-calendar-day-count[hidden] { display: none; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-count:not([data-empty=\"true\"]) { background: #16454f; color: #b9eaf4; }\n.opportunities-extension-calendar .fc .fc-day-other { background: var(--fc-neutral-bg-color); }\n.opportunities-extension-calendar .fc .fc-daygrid-event { white-space: normal; margin: 3px 4px; border-radius: 4px; cursor: pointer; border-width: 0 0 0 3px; border-style: solid; }\n.opportunities-extension-calendar .fc .fc-event-main { color: inherit; }\n.opportunities-calendar-event-content { min-width: 0; padding: 5px 6px; overflow-wrap: anywhere; }\n.opportunities-calendar-event-content strong { display: block; font-size: 12px; line-height: 16px; font-weight: 600; }\n.opportunities-calendar-event-content span { display: block; margin-top: 3px; font-size: 11px; line-height: 15px; }\n.opportunities-calendar-event-content strong,\n.opportunities-calendar-event-content span,\n.opportunities-calendar-day-item strong,\n.opportunities-calendar-day-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.opportunities-extension-calendar .fc .fc-daygrid-more-link { color: #00657b; font-size: 11px; line-height: 16px; padding: 0 5px; }\n.opportunities-calendar-day-list { min-height: 0; overflow-y: auto; padding: 8px 20px 20px; }\n.opportunities-calendar-day-item { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #dedbd7; background: transparent; color: #00657b; text-align: left; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-day-item strong, .opportunities-calendar-day-item span { display: block; font: 600 13px/20px Arial, sans-serif; }\n.opportunities-calendar-day-item span { margin-top: 4px; font-weight: 400; }\n.opportunities-calendar-day-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-day-item { border-bottom-color: #514d48; color: #80d6e8; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #dff1f4; border-color: #00829d; color: #005467; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #efeeec; border-color: #706a64; color: #49443f; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #fff0da; border-color: #ba7000; color: #774700; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #f0e8f7; border-color: #8262a3; color: #624379; }\n.opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #e2f1e5; border-color: #2f8050; color: #215939; }\n.opportunities-calendar-message { margin: 0 0 12px; font-size: 13px; }\n.opportunities-calendar-message[hidden], .opportunities-calendar-grid[hidden], .opportunities-calendar-undated[hidden] { display: none; }\n.opportunities-calendar-undated { flex: 0 0 auto; max-height: 90px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--fc-border-color); padding-top: 4px; }\n.opportunities-calendar-undated summary { cursor: pointer; font-size: 12px; line-height: 18px; }\n.opportunities-calendar-undated h3 { font-size: 13px; margin: 0 0 8px; }\n.opportunities-calendar-undated button { display: block; background: none; border: 0; text-align: left; font: inherit; padding: 6px 0; color: inherit; text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; }\n.opportunities-calendar-detail .opportunities-extension-account-plans-header { align-items: start; gap: 16px; }\n.opportunities-calendar-detail .opportunities-extension-action-form-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }\n.opportunities-calendar-detail h2 { font-size: 18px; overflow-wrap: anywhere; }\n.opportunities-calendar-detail-content { padding: 20px; overflow-y: auto; }\n.opportunities-calendar-detail-content a { color: #006b82; }\n.opportunities-calendar-detail-badges { display: flex; gap: 8px; margin-top: 18px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs { border-color: #514d48; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button { color: #c7c2bc; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-view-tabs button[aria-selected=\"true\"] { color: #80d6e8; border-bottom-color: #80d6e8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar {\n  --fc-border-color: #514d48; --fc-page-bg-color: #292725; --fc-neutral-bg-color: #33302d;\n  --fc-neutral-text-color: #c7c2bc; --fc-today-bg-color: #223b3f;\n  --fc-button-bg-color: #292725; --fc-button-text-color: #eeeae6; --fc-button-border-color: #756f68;\n  --fc-button-hover-bg-color: #234850; --fc-button-hover-border-color: #80d6e8;\n  --fc-button-active-bg-color: #234850; --fc-button-active-border-color: #80d6e8;\n  background: #292725; color: #eeeae6;\n}\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-SQL { background: #16454f; color: #b9eaf4; border-color: #67cde0; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-PIPELINE,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-OTHER { background: #403c38; color: #e4dfd9; border-color: #b8b1a8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-UPSIDE { background: #533e1e; color: #ffe0a9; border-color: #dba44f; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-FORECAST { background: #493657; color: #ead5fc; border-color: #b998d8; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .opportunities-calendar-stage-WON { background: #244a32; color: #c7edce; border-color: #84c396; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-calendar .fc .fc-daygrid-more-link,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-calendar-detail-content a { color: #80d6e8; }\n@media (max-width: 700px) {\n  .opportunities-extension-body { overflow-y: auto; grid-template-rows: max-content max-content minmax(480px, 1fr); }\n  .opportunities-extension-views { min-height: 480px; }\n  .opportunities-extension-calendar { padding: 10px; overflow-x: auto; }\n  .opportunities-extension-calendar .fc { min-width: 0; }\n  .opportunities-extension-calendar .fc .fc-view-harness { min-width: 560px; }\n  .opportunities-extension-calendar .fc .fc-toolbar-title { font-size: 16px; }\n  .opportunities-extension-calendar .fc .fc-daygrid-day-frame { padding-top: 22px; }\n  .opportunities-calendar-day-count { top: 25px; }\n  .fc-daygrid-week-number ~ .opportunities-calendar-day-count { left: 6px; }\n}\n\n.oe-time-dialog { --time-bg: #fff; --time-input-bg: #fff; --time-muted: #faf9f8; --time-border: #dedbd7; --time-input-border: #8f8983; --time-accent: #00758f; width: min(1600px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; line-height: 20px; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog { --time-bg: #292725; --time-input-bg: #211f1d; --time-muted: #35322f; --time-border: #514c47; --time-input-border: #918a82; --time-accent: #80d6e8; }\n.oe-time-modal { grid-template-columns: minmax(0, 1fr); }\n.oe-time-dialog, .oe-time-body { min-width: 0; }\n.oe-time-dialog * { box-sizing: border-box; }\n.oe-time-dialog [hidden] { display: none !important; }\n.oe-time-header { flex-shrink: 0; }\n.oe-time-body { padding: 18px; overflow: auto; min-height: 0; }\n.oe-time-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }\n.oe-time-navigation { display: flex; align-items: center; gap: 8px; }\n.oe-time-ending { display: grid; gap: 4px; text-align: right; }\n.oe-time-summary { display: grid; grid-template-columns: repeat(4, 1fr); padding: 12px 0; gap: 12px; text-align: center; border-block: 1px solid var(--time-border); margin-bottom: 18px; }\n.oe-time-body button { min-width: 38px; min-height: 38px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; color: inherit; background: transparent; border: 1px solid var(--time-input-border); border-radius: 4px; padding: 7px; cursor: pointer; font: inherit; }\n.oe-time-dialog button:hover:not(:disabled) { background: var(--time-muted); border-color: var(--time-accent); }\n.oe-time-dialog svg { width: 17px; height: 17px; flex-shrink: 0; }\n.oe-time-dialog input, .oe-time-dialog select, .oe-time-dialog textarea { font: inherit; line-height: 20px; color: inherit; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 8px; min-height: 38px; }\n.oe-time-dialog select { height: 38px; }\n.oe-time-dialog :focus-visible { outline: 2px solid var(--time-accent); outline-offset: 2px; }\n.oe-time-dialog :disabled { opacity: .55; cursor: not-allowed; }\n.oe-time-grid { overflow-x: auto; }\n.oe-time-grid table { width: 100%; min-width: 1060px; border-collapse: collapse; table-layout: fixed; }\n.oe-time-grid th { background: var(--time-muted); padding: 10px 5px; font-weight: 600; text-align: center; border-bottom: 1px solid var(--time-border); }\n.oe-time-grid th:first-child { width: 23%; }\n.oe-time-grid th:nth-child(2), .oe-time-grid th:nth-child(3) { width: 12%; }\n.oe-time-grid th:nth-last-child(-n+3) { width: 46px; }\n.oe-time-grid td { padding: 10px 5px; border-bottom: 1px solid var(--time-border); vertical-align: middle; text-align: center; }\n.oe-time-duplicate-row { outline: 2px solid #b3261e; outline-offset: -2px; animation: oe-time-duplicate-fade 5.5s linear forwards; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-duplicate-row { --time-duplicate-color: #ffaaa4; }\n@keyframes oe-time-duplicate-fade { 0%, 90.909% { outline-color: var(--time-duplicate-color, #b3261e); } 100% { outline-color: transparent; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-duplicate-row { animation-timing-function: step-end; } }\n.oe-time-grid select { width: 100%; }\n.oe-time-grid input[type=\"number\"] { width: min(100%, 60px); padding: 6px 3px; text-align: center; }\n.oe-time-grid .opportunities-extension-action-combobox input { width: 100%; text-align: left; text-overflow: ellipsis; }\n.oe-time-grid .opportunities-extension-action-options { text-align: left; }\n.oe-time-dialog .opportunities-extension-select-tooltip { position: fixed; z-index: 100; width: min(560px, calc(100vw - 40px)); max-height: min(440px, calc(100dvh - 48px)); overflow: auto; padding: 14px; border: 1px solid var(--time-input-border); border-radius: 4px; background: var(--time-input-bg); color: inherit; box-shadow: 0 4px 16px #0003; text-align: left; }\n.oe-time-sr-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin: 0; }\n.oe-time-sr-details > div { min-width: 0; overflow-wrap: anywhere; }\n.oe-time-sr-details dt { font-size: 11px; opacity: .75; margin-bottom: 2px; }\n.oe-time-sr-details dd { margin: 0; white-space: pre-wrap; }\n.oe-time-sr-details .oe-time-sr-description { grid-column: 1 / -1; }\n.oe-time-day > span { display: block; }\n.oe-time-day .oe-time-day-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 9px; }\n.oe-time-day-total { font-size: 10px; background: var(--time-accent); color: var(--time-bg); min-width: 16px; border-radius: 8px; padding: 2px 4px; }\n.oe-time-notes textarea { width: 100%; resize: vertical; }\n.oe-time-notes-box { position: relative; text-align: left; background: var(--time-input-bg); border: 1px solid var(--time-input-border); border-radius: 4px; padding: 14px 12px 42px; }\n.oe-time-notes-count { display: block; font-weight: 600; opacity: .8; margin-bottom: 8px; }\n.oe-time-notes-box textarea { border: 0; min-height: 128px; padding: 0; }\n.oe-time-notes-box .oe-time-notes-collapse { position: absolute; right: 0; bottom: 0; background: var(--time-muted); }\n.oe-time-footer { flex-wrap: wrap; justify-content: flex-start; margin-top: 18px; }\n.oe-time-footer button { padding: 7px 14px; }\n.oe-time-status { padding: 12px 0; }\n.oe-time-loading-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.oe-time-skeleton { display: inline-block; vertical-align: middle; border-radius: 4px; background: var(--time-border); color: transparent; animation: oe-time-pulse 1.3s ease-in-out infinite alternate; }\n.oe-time-skeleton-select { display: block; width: 100%; height: 38px; }\n.oe-time-skeleton-control { width: min(100%, 60px); height: 38px; }\n.oe-time-skeleton-heading { width: 65%; height: 20px; margin: 17px 0; }\n.oe-time-skeleton-summary { min-width: 44px; height: 20px; }\n@keyframes oe-time-pulse { from { opacity: .4; } to { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .oe-time-skeleton { animation: none; } }\n.oe-time-status[role=\"alert\"] { color: #a12d27; }\n.oe-time-dialog [aria-invalid=\"true\"] { border-color: #b3261e; outline: 1px solid #b3261e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-status[role=\"alert\"] { color: #ffd9d5; }\n.opportunities-extension-modal[data-theme=\"dark\"] .oe-time-dialog [aria-invalid=\"true\"] { border-color: #ffaaa4; outline-color: #ffaaa4; }\n@media (max-width: 700px) { .oe-time-modal { padding: 8px; } .oe-time-dialog { max-height: calc(100dvh - 16px); } .oe-time-body { padding: 12px; } .oe-time-summary { grid-template-columns: repeat(2, 1fr); text-align: left; } .oe-time-toolbar { flex-wrap: wrap; } .oe-time-ending { text-align: left; } }\n\n.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }\n.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }\n.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }\n.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }\n.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }\n.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }\n.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }\n.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }\n.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }\n.opportunities-extension-projection-context dt { font-weight: 600; }\n.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }\n.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }\n.opportunities-extension-projection-notice { font-size: 12px; }\n.opportunities-extension-projection-viewport { overflow-x: auto; }\n.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }\n.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }\n.opportunities-extension-projection-table th:first-child { text-align: left; }\n.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }\n.opportunities-extension-projection-table tbody th { font-weight: 400; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #fff7e5; }\n.opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #815400; font-weight: 700; }\n.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }\n.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }\n.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }\n.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }\n.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }\n.opportunities-extension-projection-confirm { padding: 20px; }\n.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }\n.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }\n.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }\n.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-error { color: #ffb4ab; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-alert,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-summary,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] td:last-child { color: #ffd080; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table thead th { background: #34312e; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table th,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table td { border-color: #504b46; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-table tr[data-divergent=\"true\"] { background: #3e3425; }\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-prorated,\n.opportunities-extension-modal[data-theme=\"dark\"] .opportunities-extension-projection-footer { color: #c9c3bc; }\n@media (max-width: 600px) {\n  .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }\n  .opportunities-extension-projection-dialog > header { padding: 14px 12px; }\n  .opportunities-extension-projection-body { padding: 12px 12px 0; }\n  .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }\n  .opportunities-extension-projection-footer { padding: 12px; }\n}\n";
 function loadOpportunityCalendarLibrary() {
 /* MIT License
 
@@ -615,6 +615,8 @@ function createMessageTypes() {
     requestInstallBase: "opportunitiesExtension.requestInstallBase",
     requestCustomerServiceRequest: "opportunitiesExtension.requestCustomerServiceRequest",
     requestWlActions: "opportunitiesExtension.requestWlActions",
+    requestWorkloads: "opportunitiesExtension.requestWorkloads",
+    requestWorkloadForecastUpdate: "opportunitiesExtension.requestWorkloadForecastUpdate",
     requestActionTeamMembers: "opportunitiesExtension.requestActionTeamMembers",
     requestActionFindLookup: "opportunitiesExtension.requestActionFindLookup",
     requestMgmtAction: "opportunitiesExtension.requestMgmtAction",
@@ -814,11 +816,12 @@ function createFormRequestCache({ getHours, getUserId }) {
   let generation = 0;
   let owner = "";
   const queries = new Set([
+    "requestWorkloads",
     "requestWeekDetails", "requestTimeEntries", "requestActiveServiceRequests", "requestServiceRequestExpand", "requestLookupTaskType",
     "requestActionTeamMembers", "requestActionFindLookup", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage",
     "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestLookupTypePlatform", "requestInternalSrServices"
   ]);
-  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest"]);
+  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest", "requestWorkloadForecastUpdate"]);
   function invalidate() { generation++; entries.clear(); pending.clear(); }
   function maxAge() {
     const hours = Number(getHours());
@@ -844,7 +847,10 @@ function createFormRequestCache({ getHours, getUserId }) {
       if (result?.ok && writes.has(operation) && !(operation === "requestPostServiceRequest" && message.phase === "prepare")) invalidate();
       return result;
     }
-    const key = JSON.stringify(stable(message));
+    // Workloads are scoped to the user/account, not the rotating WWB token or the selected Reference.
+    const key = JSON.stringify(stable(operation === "requestWorkloads"
+      ? { type: message.type, customerId: String(message.customerId), principal: String(message.principal || userId).trim().toLowerCase() }
+      : message));
     const hit = entries.get(key);
     if (hit && Date.now() >= hit.fetchedAt && Date.now() - hit.fetchedAt < duration) {
       return { ...copy(hit.result), debugRequests: [], fromCache: true, cachedAt: hit.fetchedAt };
@@ -856,10 +862,14 @@ function createFormRequestCache({ getHours, getUserId }) {
     }
     const version = generation;
     const promise = transport(request).then(result => {
-      if (result?.ok && version === generation) {
+      const workload = operation === "requestWorkloads";
+      const fetchedAt = workload && Number.isFinite(result?.cachedAt) ? result.cachedAt : Date.now();
+      const cacheable = !workload || (Array.isArray(result?.workloads) && (!result.fromCache || Number.isFinite(result.cachedAt)));
+      if (result?.ok && cacheable && version === generation) {
         // Keep this per-page cache bounded and avoid persisting credentials or customer data to disk.
         if (entries.size >= 500) entries.delete(entries.keys().next().value);
-        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt: Date.now() });
+        // Reusing a persistent workload entry must not restart its original TTL.
+        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt });
       }
       return result;
     });
@@ -876,6 +886,8 @@ function createProductsContentState() {
     currentProductsRequestId: "",
     productsRenderQueued: false,
     opptyProductsByNumber: new Map(),
+    workloadCustomerIds: [],
+    workloadsByCustomer: new Map(),
     expandedProductOptyNumbers: new Set(),
     productsProgress: {
     state: "idle",
@@ -1838,7 +1850,49 @@ function createContentIcons({
     svg.append(path);
     return svg;
   }
-  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon };
+  function createAlertIcon() {
+    /* Lucide triangle-alert (https://lucide.dev/icons/triangle-alert), ISC License.
+     * Copyright (c) 2026 Lucide Icons and Contributors
+     * Permission to use, copy, modify, and/or distribute this software for any
+     * purpose with or without fee is hereby granted, provided that the above
+     * copyright notice and this permission notice appear in all copies.
+     * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+     * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+     * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+     * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+     * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+     * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+     * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+     *
+     * Derived from Feather alert-triangle, MIT License.
+     * Copyright (c) 2013-present Cole Bemis
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     * The above copyright notice and this permission notice shall be included in all
+     * copies or substantial portions of the Software.
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+     * SOFTWARE.
+     */
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for (const [name, value] of Object.entries({ viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false",
+      fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })) svg.setAttribute(name, value);
+    for (const d of ["m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3", "M12 9v4", "M12 17h.01"]) {
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+    }
+    return svg;
+  }
+  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon, createAlertIcon };
 }
 
 // Source: src/content/svg.js
@@ -2336,6 +2390,7 @@ function createOpportunitiesController({
   requestOpportunitiesPage,
   resetCrmServiceRequests,
   resetWorkloadActions,
+  resetWorkloads,
   requestOpptyProductsInBackground,
   requestTokenRelayOnce,
   ensureCurrentUser,
@@ -2345,6 +2400,7 @@ function createOpportunitiesController({
     const dateRange = getFiscalPeriodRange(period, new Date());
     const requestVersion = ++opportunitiesQueryState.periodRequestVersion;
     resetWorkloadActions();
+    resetWorkloads();
     await ensureCurrentUser();
     if (!isCurrentPeriodRequest(requestVersion)) return;
 
@@ -2430,6 +2486,7 @@ function createOpportunitiesController({
 
   function resetOpportunitiesTable() {
     resetWorkloadActions();
+    resetWorkloads();
     resetCrmServiceRequests();
     opportunitiesFilterState.selectedStages = new Set(STAGE_OPTIONS);
     opportunitiesFilterState.selectedStatuses = new Set(STATUS_OPTIONS);
@@ -4691,6 +4748,7 @@ function createOpportunitiesTable({
   createDetailLink,
   createProductsCountButton,
   createProductsRampBadge,
+  createProjectionIndicator,
   createCrmServiceRequestBadge,
   closeCrmSrPopover,
   createWorkloadActionsBadge,
@@ -4827,6 +4885,9 @@ function createOpportunitiesTable({
               if (srBadge) productActions.append(srBadge);
               const actionsBadge = createWorkloadActionsBadge(item.OptyNumber);
               if (actionsBadge) productActions.append(actionsBadge);
+              const projectionIndicator = createProjectionIndicator(productsResult, item,
+                productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber)));
+              if (projectionIndicator) productActions.append(projectionIndicator);
               nameCellContent.append(opportunityLink, productActions);
               cell.append(nameCellContent);
             } else if (column.key === "optyNumber" && item.OptyNumber) {
@@ -6309,6 +6370,8 @@ function createProductsContentJobs({
   renderOpportunitiesTable,
   beginProductActivities,
   completeProductActivities,
+  loadWorkloads,
+  joinWorkloads,
   sendRuntimeMessage,
   environment
 }) {
@@ -6365,6 +6428,8 @@ function createProductsContentJobs({
     };
     renderProductsProgress();
 
+    loadWorkloads(opportunities, requestId);
+
     if (optyNumbers.length === 0) {
       return;
     }
@@ -6421,6 +6486,7 @@ function createProductsContentJobs({
           cachedAt: Number(message.cachedAt) || 0,
           error: message.error || ""
         });
+        joinWorkloads(message.optyNumber);
       }
 
       productsContentState.productsProgress = {
@@ -6503,11 +6569,92 @@ function createProductsContentJobs({
   return { requestOpptyProductsInBackground, ensureProductsBackgroundMessageHandler, renderProductsProgress, formatProductsCacheTimestamp, queueProductsTableRender };
 }
 
+// Source: src/features/products/workloads.js
+function createProductWorkloads({ productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+  requestConsumerTokenServiceOnce, sendRuntimeMessage, appendBackgroundRequestLog, getPrincipal, queueProductsTableRender }) {
+  let cycle = null;
+  function reset() {
+    cycle = null;
+    productsContentState.workloadCustomerIds = [];
+    productsContentState.workloadsByCustomer = new Map();
+  }
+  function isCurrent(current) {
+    return cycle === current && current.requestId === productsContentState.currentProductsRequestId
+      && current.version === opportunitiesQueryState.periodRequestVersion;
+  }
+  function joinProducts(optyNumber) {
+    if (!cycle || !isCurrent(cycle)) return;
+    const key = String(optyNumber);
+    const products = productsContentState.opptyProductsByNumber.get(key);
+    if (!products) return;
+    const customerId = cycle.customerByOpportunity.get(key);
+    const record = productsContentState.workloadsByCustomer.get(customerId);
+    products.items = products.items.map(product => ({ ...product,
+      workload: record?.status === "ready" ? record.byId.get(String(product.RevnId ?? "")) || null : null }));
+  }
+  async function load(opportunities, requestId) {
+    reset();
+    const current = { requestId, version: opportunitiesQueryState.periodRequestVersion,
+      customerByOpportunity: new Map(), opportunitiesByCustomer: new Map() };
+    cycle = current;
+    for (const opportunity of opportunities) {
+      const customerId = String(opportunity?.CustomerAccount?.PartyId ?? "").trim();
+      if (!/^\d+$/.test(customerId)) continue;
+      if (!current.opportunitiesByCustomer.has(customerId)) current.opportunitiesByCustomer.set(customerId, new Set());
+      if (opportunity.OptyNumber) {
+        const number = String(opportunity.OptyNumber);
+        current.customerByOpportunity.set(number, customerId);
+        current.opportunitiesByCustomer.get(customerId).add(number);
+      }
+    }
+    const ids = [...current.opportunitiesByCustomer.keys()];
+    productsContentState.workloadCustomerIds = ids;
+    const records = productsContentState.workloadsByCustomer;
+    for (const id of ids) records.set(id, { status: "loading", workloads: [], byId: new Map() });
+    if (!ids.length || !isCurrent(current)) return;
+    const principal = getPrincipal();
+    const cacheMaxAgeMs = preferencesState.opptyProductsCacheHours * 60 * 60 * 1000;
+    try {
+      const authorizations = await requestConsumerTokenServiceOnce();
+      if (!isCurrent(current)) return;
+      let next = 0;
+      const worker = async () => {
+        while (isCurrent(current) && next < ids.length) {
+          const customerId = ids[next++];
+          const record = records.get(customerId);
+          try {
+            const result = await sendRuntimeMessage({ type: messageTypes.requestWorkloads, customerId,
+              authorization: authorizations?.workloadActions, cacheMaxAgeMs, principal });
+            if (!isCurrent(current)) return;
+            appendBackgroundRequestLog(result?.debugRequests);
+            if (!result?.ok || !Array.isArray(result.workloads)) throw new Error(result?.error || "Unable to load workloads.");
+            Object.assign(record, { status: "ready", workloads: result.workloads,
+              byId: new Map(result.workloads.map(workload => [String(workload.id), workload])),
+              fromCache: Boolean(result.fromCache), cachedAt: Number(result.cachedAt) || 0 });
+          } catch (error) {
+            if (!isCurrent(current)) return;
+            record.status = "error";
+            record.error = error.message || "Unable to load workloads.";
+          }
+          for (const number of current.opportunitiesByCustomer.get(customerId)) joinProducts(number);
+          queueProductsTableRender();
+        }
+      };
+      await Promise.all(Array.from({ length: Math.min(4, ids.length) }, worker));
+    } catch (error) {
+      if (!isCurrent(current)) return;
+      for (const record of records.values()) { record.status = "error"; record.error = error.message || "Unable to load workloads."; }
+    }
+  }
+  return { load, joinProducts, reset };
+}
+
 // Source: src/features/products/details.js
 function createProductsDetails({
   OPPORTUNITIES_COLUMNS,
   setBadgeContent,
   createAiSummaryAlert,
+  createProjectionIndicator,
   formatOracleResponseDate,
   productsContentState,
   renderOpportunitiesTable,
@@ -6530,6 +6677,14 @@ function createProductsDetails({
     return badge;
   }
 
+  function expandProducts(optyNumber) {
+    const number = String(optyNumber);
+    if (productsContentState.expandedProductOptyNumbers.has(number)) return;
+    productsContentState.expandedProductOptyNumbers.add(number);
+    requestGenerateAiSummary(number);
+    renderOpportunitiesTable();
+  }
+
   function createProductsCountButton(optyNumber, productsResult) {
     const normalizedOptyNumber = String(optyNumber);
     const button = document.createElement("button");
@@ -6550,8 +6705,8 @@ function createProductsDetails({
       if (isExpanded) {
         productsContentState.expandedProductOptyNumbers.delete(normalizedOptyNumber);
       } else {
-        productsContentState.expandedProductOptyNumbers.add(normalizedOptyNumber);
-        requestGenerateAiSummary(normalizedOptyNumber);
+        expandProducts(normalizedOptyNumber);
+        return;
       }
 
       renderOpportunitiesTable();
@@ -6611,7 +6766,8 @@ function createProductsDetails({
         { label: "Close date", value: (item) => formatOracleResponseDate(item.EffectiveDate) || "-" },
         { label: "Consumption Start", value: (item) => formatOracleResponseDate(item.ConsumptionStartDate_c) || "-" },
         { label: "Ramp Months", value: (item) => item.RampMonths_c === null || item.RampMonths_c === undefined || String(item.RampMonths_c).trim() === ""
-          ? "N/D" : formatProductNumber(item.RampMonths_c) }
+          ? "N/D" : formatProductNumber(item.RampMonths_c) },
+        { label: "Projection", render: (item) => createProjectionIndicator(item, opportunity) }
       ];
 
       const head = document.createElement("thead");
@@ -6629,7 +6785,10 @@ function createProductsDetails({
         const productRow = document.createElement("tr");
         columns.forEach((column) => {
           const productCell = document.createElement("td");
-          productCell.textContent = String(column.value(product));
+          if (column.render) {
+            productCell.className = "opportunities-extension-projection-cell";
+            productCell.append(column.render(product));
+          } else productCell.textContent = String(column.value(product));
           productRow.append(productCell);
         });
         body.append(productRow);
@@ -6671,7 +6830,339 @@ function createProductsDetails({
     return Number.isFinite(number) ? `${number}%` : "-";
   }
 
-  return { createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+  return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+}
+
+// Source: src/features/products/ramp-projection.js
+function createRampProjection() {
+  function number(value) {
+    if ((typeof value !== "number" && typeof value !== "string") || String(value).trim() === "") return null;
+    const result = Number(value);
+    return Number.isFinite(result) ? result : null;
+  }
+  function startDate(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})(?:T|$)/.exec(String(value ?? ""));
+    if (!match) return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return null;
+    return { year, month, day, days: new Date(Date.UTC(year, month, 0)).getUTCDate() };
+  }
+  function monthlyAmount(annual, ramp, month) {
+    if (month < 1) return 0;
+    // calculadora rampa.xlsx, rampas!D6:P17: exact values, before currency rounding.
+    return (2 * annual / (24 - ramp)) * Math.min(month / (ramp + 1), 1);
+  }
+  function cents(value) { return Math.round((value + Number.EPSILON * Math.abs(value)) * 100); }
+  function compare(product) {
+    const workload = product?.workload;
+    const unavailable = reason => ({ status: "unavailable", reason, rows: [], divergentCount: 0 });
+    if (!workload) return unavailable("Workload data is not available for this product.");
+    const annual = number(workload.adjustedACR);
+    const ramp = number(product.RampMonths_c);
+    const start = startDate(workload.consumptionStartDate);
+    if (annual === null || annual < 0) return unavailable("Annual value (adjustedACR) is missing or invalid.");
+    if (ramp === null || !Number.isInteger(ramp) || ramp < 0 || ramp > 11) {
+      return unavailable("RampMonths_c must be an integer from 0 to 11, as covered by the reference workbook.");
+    }
+    if (!start) return unavailable("Consumption start date is missing or invalid.");
+    if (!Array.isArray(workload.forecast) || !workload.forecast.length) return unavailable("Monthly forecast data is not available.");
+    const periods = new Set();
+    const rows = workload.forecast.map(forecast => {
+      const year = number(forecast?.year), month = number(forecast?.month);
+      const actual = number(forecast?.adjustedConsumptionAmount);
+      if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12) return null;
+      const key = `${year}-${String(month).padStart(2, "0")}`;
+      if (periods.has(key)) return null;
+      periods.add(key);
+      const index = (year - start.year) * 12 + month - start.month + 1;
+      const prorated = index === 1 && start.day > 1;
+      const exact = monthlyAmount(annual, ramp, index) * (index === 1 ? (start.days - start.day + 1) / start.days : 1);
+      const calculatedCents = cents(exact);
+      const actualCents = actual === null ? null : cents(actual);
+      if (!Number.isSafeInteger(calculatedCents) || (actualCents !== null && !Number.isSafeInteger(actualCents))) return null;
+      const differenceCents = actualCents === null ? null : actualCents - calculatedCents;
+      return { key, year, month, index, prorated, actual: actualCents === null ? null : actualCents / 100,
+        calculated: calculatedCents / 100, difference: differenceCents === null ? null : differenceCents / 100,
+        divergent: differenceCents !== null && differenceCents !== 0 };
+    });
+    if (rows.some(row => row === null)) return unavailable("Forecast contains invalid or duplicate months, or values outside the supported numeric range.");
+    rows.sort((a, b) => a.key.localeCompare(b.key));
+    const divergentCount = rows.filter(row => row.divergent).length;
+    const missingCount = rows.filter(row => row.actual === null).length;
+    return { status: divergentCount ? "divergent" : missingCount ? "unavailable" : "matched",
+      reason: missingCount ? "Some months have no adjusted consumption amount." : "", rows, divergentCount, missingCount,
+      annual, ramp, start: `${start.year}-${String(start.month).padStart(2, "0")}-${String(start.day).padStart(2, "0")}`,
+      firstMonthDays: start.days - start.day + 1, firstMonthTotalDays: start.days };
+  }
+  return { compare, monthlyAmount };
+}
+
+// Source: src/features/products/forecast-update.js
+function createWorkloadForecastUpdate({ compare, ensureCurrentUser, getCurrentUserId, requestAuthorization,
+  sendRuntimeMessage, messageTypes, appendBackgroundRequestLog, productsContentState, queueProductsTableRender }) {
+  const pending = new Set();
+  async function save(product) {
+    const id = String(product?.workload?.id ?? "");
+    if (!/^\d+$/.test(id) || id !== String(product.RevnId)) throw new Error("The product does not have a matching workload ID.");
+    if (pending.has(id)) throw new Error("Estimates are already being updated.");
+    const comparison = compare(product);
+    if (comparison.status !== "divergent") throw new Error("No forecast differences are available to update.");
+    pending.add(id);
+    try {
+      await ensureCurrentUser();
+      const updatedBy = getCurrentUserId();
+      if (typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("The current user ID is unavailable.");
+      // Keep zero months before consumption unchanged, unless they also need correcting.
+      const payload = comparison.rows.filter(row => row.index >= 1 || row.divergent)
+        .map(row => ({ year: row.year, month: row.month, amount: row.calculated, updatedBy }));
+      const authorizations = await requestAuthorization();
+      const response = await sendRuntimeMessage({ type: messageTypes.requestWorkloadForecastUpdate,
+        workloadId: id, payload, authorization: authorizations?.workloadActions });
+      appendBackgroundRequestLog(response?.debugRequests);
+      if (!response?.ok) throw new Error(response?.error || "Unable to update workload estimates.");
+      const amounts = new Map(payload.map(item => [`${item.year}-${item.month}`, item.amount]));
+      const update = workload => {
+        if (String(workload?.id) !== id) return workload;
+        return { ...workload, forecast: workload.forecast.map(month => {
+          const key = `${Number(month.year)}-${Number(month.month)}`;
+          return amounts.has(key) ? { ...month, adjustedConsumptionAmount: amounts.get(key) } : month;
+        }) };
+      };
+      product.workload = update(product.workload);
+      for (const record of productsContentState.workloadsByCustomer.values()) {
+        if (record.status !== "ready") continue;
+        record.workloads = record.workloads.map(update);
+        record.byId = new Map(record.workloads.map(workload => [String(workload.id), workload]));
+      }
+      for (const record of productsContentState.opptyProductsByNumber.values()) {
+        record.items = record.items.map(item => ({ ...item, workload: update(item.workload) }));
+      }
+      queueProductsTableRender();
+      return response;
+    } finally {
+      pending.delete(id);
+    }
+  }
+  return { save };
+}
+
+// Source: src/features/products/ramp-projection-view.js
+function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCloseIcon, expandProducts, saveEstimates, notify, formatAmount, formatDate, environment }) {
+  const { document } = environment;
+  let active = null;
+  function node(tag, className, text) {
+    const item = document.createElement(tag);
+    if (className) item.className = className;
+    if (text !== undefined) item.textContent = text;
+    return item;
+  }
+  function close(restoreFocus = true) {
+    if (!active) return false;
+    if (active.saving && restoreFocus) return true;
+    const previous = active;
+    active = null;
+    previous.modal.remove();
+    previous.siblings.forEach(([element, inert]) => { element.inert = inert; });
+    if (restoreFocus && previous.trigger?.isConnected) previous.trigger.focus();
+    return true;
+  }
+  function createIndicator(product, opportunity) {
+    const result = compare(product);
+    if (result.status !== "divergent") {
+      const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-");
+      text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason;
+      return text;
+    }
+    const button = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert");
+    button.type = "button";
+    button.title = `Consumption forecast differs in ${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"}. View comparison.`;
+    button.setAttribute("aria-label", button.title);
+    button.setAttribute("aria-haspopup", "dialog");
+    button.append(createAlertIcon());
+    button.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      open(product, opportunity, button);
+    });
+    return button;
+  }
+  function createOpportunityIndicator(productsResult, opportunity, isExpanded) {
+    const products = productsResult?.items || [];
+    const count = products.filter(product => compare(product).status === "divergent").length;
+    if (!count) return null;
+    const singleProduct = products.length === 1;
+    const indicator = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert opportunities-extension-opportunity-projection-alert");
+    indicator.type = "button";
+    indicator.title = `Consumption forecast differs in ${count} product${count === 1 ? "" : "s"}. ${singleProduct ? "View comparison." : "View products."}`;
+    if (singleProduct) indicator.setAttribute("aria-haspopup", "dialog");
+    else indicator.setAttribute("aria-expanded", String(Boolean(isExpanded)));
+    indicator.setAttribute("aria-label", indicator.title);
+    indicator.append(createAlertIcon());
+    indicator.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      if (singleProduct) open(products[0], opportunity, indicator);
+      else expandProducts(opportunity.OptyNumber);
+    });
+    return indicator;
+  }
+  function open(product, opportunity, trigger) {
+    const host = document.getElementById(MODAL_ID);
+    const result = compare(product);
+    if (!host || host.hidden || result.status !== "divergent") return;
+    close(false);
+    const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal");
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    modal.setAttribute("aria-labelledby", "opportunities-extension-projection-title");
+    const dialog = node("div", "opportunities-extension-action-form-dialog opportunities-extension-projection-dialog");
+    const header = node("header", "opportunities-extension-account-plans-header");
+    const heading = node("div", "opportunities-extension-action-form-heading");
+    const title = node("h2", "", "Consumption projection");
+    title.id = "opportunities-extension-projection-title";
+    heading.append(title, node("p", "", `${opportunity.OptyNumber} - ${product.WorkloadName_c || product.workload.name || product.ProdGroupName || "Workload"}`));
+    const dismiss = node("button", "opportunities-extension-icon-button");
+    dismiss.type = "button";
+    dismiss.title = "Close consumption projection";
+    dismiss.setAttribute("aria-label", dismiss.title);
+    dismiss.append(createCloseIcon());
+    dismiss.addEventListener("click", () => close());
+    header.append(heading, dismiss);
+    const body = node("div", "opportunities-extension-projection-body");
+    const details = node("dl", "opportunities-extension-projection-context");
+    const currency = product.RevnAmountCurcyCode || "USD";
+    for (const [label, value] of [
+      ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"],
+      ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)],
+      ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`]
+    ]) details.append(node("dt", "", label), node("dd", "", value));
+    body.append(details);
+    const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`);
+    body.append(summary);
+    if (result.reason) body.append(node("p", "opportunities-extension-projection-notice", result.reason));
+    const viewport = node("div", "opportunities-extension-projection-viewport");
+    viewport.tabIndex = 0;
+    viewport.setAttribute("role", "region");
+    viewport.setAttribute("aria-label", "Monthly consumption comparison");
+    const table = node("table", "opportunities-extension-projection-table");
+    const caption = node("caption", "opportunities-extension-visually-hidden", `Monthly consumption comparison (${currency}). Difference is forecast minus calculated.`);
+    const head = node("thead"), headRow = node("tr"), tbody = node("tbody");
+    for (const label of ["Month", "Forecast", "Calculated", "Difference"]) {
+      const th = node("th", "", label); th.scope = "col"; headRow.append(th);
+    }
+    head.append(headRow);
+    for (const item of result.rows) {
+      const tr = node("tr");
+      tr.setAttribute("data-divergent", String(item.divergent));
+      const month = node("th", "", `${String(item.month).padStart(2, "0")}/${item.year}`);
+      month.scope = "row";
+      if (item.prorated) month.append(node("span", "opportunities-extension-projection-prorated", " (Prorated)"));
+      tr.append(month);
+      for (const value of [item.actual, item.calculated, item.difference]) tr.append(node("td", "", value === null ? "-" : formatAmount(value, currency)));
+      tbody.append(tr);
+    }
+    table.append(caption, head, tbody);
+    viewport.append(table);
+    body.append(viewport);
+    const errorMessage = node("p", "opportunities-extension-projection-error");
+    errorMessage.setAttribute("role", "alert");
+    errorMessage.hidden = true;
+    body.append(errorMessage);
+    const footer = node("footer", "opportunities-extension-projection-footer");
+    const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates");
+    updateButton.type = "button";
+    footer.append(node("span", "", "Difference = forecast - calculated."), updateButton);
+    dialog.append(header, body, footer);
+    modal.append(dialog);
+    const siblings = Array.from(host.children).map(element => [element, element.inert]);
+    siblings.forEach(([element]) => { element.inert = true; });
+    const current = { modal, siblings, trigger, saving: false };
+    active = current;
+    async function updateEstimates() {
+      if (current.saving) return;
+      current.saving = true;
+      updateButton.disabled = true;
+      dismiss.disabled = true;
+      updateButton.textContent = "Updating...";
+      modal.setAttribute("aria-busy", "true");
+      errorMessage.hidden = true;
+      try {
+        await saveEstimates(product);
+        current.saving = false;
+        if (active === current) close();
+        notify("Workload estimates updated successfully.");
+      } catch (error) {
+        const message = error.message || "Unable to update workload estimates.";
+        if (active === current) {
+          errorMessage.textContent = message;
+          errorMessage.hidden = false;
+        }
+        notify(message, true);
+      } finally {
+        current.saving = false;
+        updateButton.disabled = false;
+        dismiss.disabled = false;
+        updateButton.textContent = "Update estimates";
+        modal.setAttribute("aria-busy", "false");
+      }
+    }
+    updateButton.addEventListener("click", () => {
+      if (current.saving || current.confirmation) return;
+      const overlay = node("div", "opportunities-extension-action-form-modal");
+      const confirmation = node("section", "opportunities-extension-action-form-dialog opportunities-extension-projection-confirm");
+      confirmation.setAttribute("role", "alertdialog");
+      confirmation.setAttribute("aria-modal", "true");
+      confirmation.setAttribute("aria-labelledby", "projection-confirm-title");
+      confirmation.setAttribute("aria-describedby", "projection-confirm-message");
+      const title = node("h2", "", "Update estimates");
+      title.id = "projection-confirm-title";
+      const message = node("p", "", "The estimates will be updated directly in the SPA using the values in the Calculated column. Would you like to confirm the update?");
+      message.id = "projection-confirm-message";
+      const actions = node("div", "opportunities-extension-projection-confirm-actions");
+      const cancel = node("button", "opportunities-extension-projection-cancel", "Cancel");
+      const confirm = node("button", "opportunities-extension-projection-update", "Confirm update");
+      cancel.type = confirm.type = "button";
+      function dismissConfirmation() {
+        overlay.remove();
+        current.confirmation = null;
+        dialog.inert = false;
+        updateButton.focus();
+      }
+      cancel.addEventListener("click", dismissConfirmation);
+      confirm.addEventListener("click", () => {
+        if (current.confirmation !== overlay || active !== current) return;
+        dismissConfirmation();
+        return updateEstimates();
+      });
+      overlay.addEventListener("keydown", event => {
+        if (event.key === "Escape") {
+          event.preventDefault(); event.stopPropagation(); dismissConfirmation();
+        } else if (event.key === "Tab") {
+          event.preventDefault(); event.stopPropagation();
+          (document.activeElement === cancel ? confirm : cancel).focus();
+        }
+      });
+      actions.append(cancel, confirm);
+      confirmation.append(title, message, actions);
+      overlay.append(confirmation);
+      current.confirmation = overlay;
+      dialog.inert = true;
+      modal.append(overlay);
+      cancel.focus();
+    });
+    host.append(modal);
+    modal.addEventListener("keydown", event => {
+      if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); }
+      if (event.key === "Tab") {
+        const controls = [dismiss, viewport, updateButton].filter(control => !control.disabled);
+        const index = controls.indexOf(document.activeElement);
+        if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) {
+          event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus();
+        }
+      }
+    });
+    dismiss.focus();
+  }
+  return { createIndicator, createOpportunityIndicator, open, close };
 }
 
 // Source: src/features/ai-summary/content.js
@@ -9604,7 +10095,7 @@ function createContentApplication(overrides = {}) {
   const contentModal = createContentModal({
     createManageTimeButton: () => manageTime.createButton(),
     prepareSrSession: () => srSessionPreparation.ensure(),
-    closeActionForm: (...args) => manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
+    closeActionForm: (...args) => rampProjectionView.close(...args) || manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
     mountOpportunityViews: (...args) => opportunityCalendar.mount(...args),
     createActivityFilterControls: (...args) => activityFilters.createControls(...args),
     closeCrmSrPopover: () => crmSrPopover.close(),
@@ -9779,6 +10270,7 @@ function createContentApplication(overrides = {}) {
   const opportunitiesController = createOpportunitiesController({
     ensureCurrentUser: () => currentUser.ensure(),
     resetWorkloadActions: (...args) => opportunityWorkloadActions.reset(...args),
+    resetWorkloads: () => { rampProjectionView.close(false); productWorkloads.reset(); },
     STAGE_OPTIONS: contracts.STAGE_OPTIONS,
     STATUS_OPTIONS: contracts.STATUS_OPTIONS,
     authSessionState,
@@ -9922,6 +10414,7 @@ function createContentApplication(overrides = {}) {
     createDetailLink: (...args) => opportunitiesLinks.createDetailLink(...args),
     createProductsCountButton: (...args) => productsDetails.createProductsCountButton(...args),
     createProductsRampBadge: (...args) => productsDetails.createProductsRampBadge(...args),
+    createProjectionIndicator: (...args) => rampProjectionView.createOpportunityIndicator(...args),
     createCrmServiceRequestBadge: (...args) => opportunityCrmServiceRequests.createBadge(...args),
     createProductsDetailRow: (...args) => productsDetails.createProductsDetailRow(...args),
     createStageBadge: (...args) => opportunitiesLinks.createStageBadge(...args),
@@ -10021,6 +10514,8 @@ function createContentApplication(overrides = {}) {
     resetRelatedData: () => {
       opportunityCrmServiceRequests.reset();
       opportunityWorkloadActions.reset();
+      productWorkloads.reset();
+      rampProjectionView.close(false);
       consumptionPlansView.closeAccountPlansModal();
       installBaseView.closeInstallBaseModal();
       serviceRequestsView.closeServiceRequestsModal();
@@ -10064,6 +10559,8 @@ function createContentApplication(overrides = {}) {
     }
   });
   const productsContentJobs = createProductsContentJobs({
+    loadWorkloads: (...args) => productWorkloads.load(...args),
+    joinWorkloads: number => productWorkloads.joinProducts(number),
     beginProductActivities: (...args) => productActivities.begin(...args),
     completeProductActivities: (...args) => productActivities.complete(...args),
     appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
@@ -10077,6 +10574,14 @@ function createContentApplication(overrides = {}) {
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
     environment
   });
+  const productWorkloads = createProductWorkloads({
+    productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+    requestConsumerTokenServiceOnce: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    getPrincipal: () => currentUser.getUserId() || authSessionState.principal,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
   const workloadActionOptions = createWorkloadActionOptions({
     requestConsumerTokenServiceOnce: (...args) => authContentSession.requestConsumerTokenServiceOnce(...args),
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
@@ -10115,6 +10620,7 @@ function createContentApplication(overrides = {}) {
     productsContentState, messageTypes, environment
   });
   const productsDetails = createProductsDetails({
+    createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args),
     setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args),
     OPPORTUNITIES_COLUMNS: columns,
     createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args),
@@ -10124,6 +10630,30 @@ function createContentApplication(overrides = {}) {
     requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args),
     environment
   });
+  const rampProjection = createRampProjection();
+  const workloadForecastUpdate = createWorkloadForecastUpdate({
+    compare: product => rampProjection.compare(product),
+    ensureCurrentUser: () => currentUser.ensure(),
+    getCurrentUserId: () => currentUser.getUserId(),
+    requestAuthorization: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    messageTypes,
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    productsContentState,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
+  const rampProjectionView = createRampProjectionView({
+    saveEstimates: product => workloadForecastUpdate.save(product),
+    notify: (...args) => opportunitiesLinks.showCopyConfirmation(...args),
+    MODAL_ID: contracts.MODAL_ID,
+    compare: product => rampProjection.compare(product),
+    expandProducts: number => productsDetails.expandProducts(number),
+    createAlertIcon: () => contentIcons.createAlertIcon(),
+    createCloseIcon: () => contentIcons.createCloseIcon(),
+    formatAmount: (...args) => productsDetails.formatProductAmount(...args),
+    formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value),
+    environment
+  });
   const aiSummaryContent = createAiSummaryContent({
     aiSummaryState,
     invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args),
@@ -10318,12 +10848,16 @@ function createContentApplication(overrides = {}) {
     preferencesStorage,
     preferencesView,
     productsContentJobs,
+    productWorkloads,
     productActivities,
     activityProgress,
     srSessionPreparation,
     refreshAll,
     activityCache,
     productsDetails,
+    rampProjection,
+    workloadForecastUpdate,
+    rampProjectionView,
     aiSummaryContent,
     consumptionPlansAction,
     installBaseAction,
diff --git a/scripts/compose.cjs b/scripts/compose.cjs
index 1c2e745..116aacd 100644
--- a/scripts/compose.cjs
+++ b/scripts/compose.cjs
@@ -21,7 +21,7 @@ function composeScript(target, { bootstrap = true } = {}) {
     const calendarLicense = fs.readFileSync(path.join(root, "src/vendor/fullcalendar/LICENSE.md"), "utf8");
     parts.unshift(`function loadOpportunityCalendarLibrary() {\n/* ${calendarLicense} */\n${calendarLibrary}\nreturn FullCalendar;\n}`);
     const css = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css"]
-      .concat("src/features/manage-time/styles.css")
+      .concat("src/features/manage-time/styles.css", "src/features/products/ramp-projection.css")
       .map(file => fs.readFileSync(path.join(root, file), "utf8")).join("\n");
     parts.unshift(`const redwoodStyles = ${JSON.stringify(css)};`);
   }
diff --git a/scripts/sources.cjs b/scripts/sources.cjs
index 5abd9f4..76ac187 100644
--- a/scripts/sources.cjs
+++ b/scripts/sources.cjs
@@ -60,7 +60,11 @@ module.exports = {
     "src/features/preferences/storage.js",
     "src/features/preferences/view.js",
     "src/features/products/content-jobs.js",
+    "src/features/products/workloads.js",
     "src/features/products/details.js",
+    "src/features/products/ramp-projection.js",
+    "src/features/products/forecast-update.js",
+    "src/features/products/ramp-projection-view.js",
     "src/features/ai-summary/content.js",
     "src/features/consumption/plans-action.js",
     "src/features/install-base/action.js",
@@ -97,6 +101,8 @@ module.exports = {
     "src/services/spa/install-base.js",
     "src/services/spa/customer-service-requests.js",
     "src/services/spa/workload-actions.js",
+    "src/services/spa/workloads.js",
+    "src/features/products/workloads-cache.js",
     "src/services/spa/action-options.js",
     "src/services/fusion/sr-details.js",
     "src/services/fusion/sr-create.js",
diff --git a/src/background/application.js b/src/background/application.js
index 0a4b687..f08ff1f 100644
--- a/src/background/application.js
+++ b/src/background/application.js
@@ -115,6 +115,17 @@ function createBackgroundApplication(overrides = {}) {
   const requestAccountPlans = (...args) => spaAccounts.requestAccountPlans(...args);
   const requestInstallBase = (...args) => spaInstallBase.requestInstallBase(...args);
   const spaWorkloadActions = createSpaWorkloadActions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
+  const workloadsCache = createWorkloadsCache({
+    fetchAllWorkloads: (...args) => spaWorkloads.fetchAllWorkloads(...args),
+    storageLocalGet: (...args) => platformBackgroundApi.storageLocalGet(...args),
+    storageLocalSet: (...args) => platformBackgroundApi.storageLocalSet(...args)
+  });
+  const spaWorkloads = createSpaWorkloads({
+    invalidateWorkloadsCache: () => workloadsCache.invalidate(),
+    fetchJson: (...args) => httpBackgroundJson.fetchJson(...args),
+    getCachedWorkloads: (...args) => workloadsCache.get(...args),
+    normalizeCacheMaxAge: value => productsCache.normalizeCacheMaxAge(value)
+  });
   const requestWlActions = (...args) => spaWorkloadActions.requestWlActions(...args);
   const spaActionOptions = createSpaActionOptions({ fetchJson: (...args) => httpBackgroundJson.fetchJson(...args) });
   const requestActionTeamMembers = (...args) => spaActionOptions.requestActionTeamMembers(...args);
@@ -146,6 +157,9 @@ function createBackgroundApplication(overrides = {}) {
   function start() {
     srRequestHeaders.start();
     startBackgroundApplication({
+      requestWorkloads: message => spaWorkloads.requestWorkloads(message),
+      requestWorkloadForecastUpdate: message => spaWorkloads.requestWorkloadForecastUpdate(message),
+      invalidateWorkloadsCache: () => workloadsCache.invalidate(),
       invalidateResourceUser: () => fusionSrCreate.invalidateResourceUser(),
       requestWeekDetails: message => timeEntries.requestWeekDetails(message),
       requestTimeEntries: message => timeEntries.requestTimeEntries(message),
@@ -173,6 +187,8 @@ function createBackgroundApplication(overrides = {}) {
     httpBackgroundJson,
     productsBackgroundJobs,
     productsCache,
+    workloadsCache,
+    spaWorkloads,
     fusionProducts,
     authXsrfRecovery,
     authXsrfCookies,
diff --git a/src/background/messages.js b/src/background/messages.js
index 1617d60..a4abb98 100644
--- a/src/background/messages.js
+++ b/src/background/messages.js
@@ -17,6 +17,9 @@ function registerBackgroundMessages({
   requestInstallBase,
   requestCustomerServiceRequest,
   requestWlActions,
+  requestWorkloads,
+  requestWorkloadForecastUpdate,
+  invalidateWorkloadsCache,
   requestActionTeamMembers,
   requestActionFindLookup,
   requestMgmtAction,
@@ -94,7 +97,7 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
     }
 
     if (message.type === messageTypes.invalidateProductsCache) {
-      invalidateProductsCache().then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
+      Promise.all([invalidateProductsCache(), invalidateWorkloadsCache()]).then(() => invalidateResourceUser()).then(() => sendResponse({ ok: true })).catch(error => sendResponse({ ok: false, error: error.message || "Unable to clear products cache." }));
       return true;
     }
     if (message.type === messageTypes.getXsrfToken) {
@@ -183,6 +186,15 @@ runtimeApi.runtime.onMessage.addListener((message, sender, sendResponse) => {
       return true;
     }
 
+    if ([messageTypes.requestWorkloads, messageTypes.requestWorkloadForecastUpdate].includes(message.type)) {
+      const request = message.type === messageTypes.requestWorkloads ? requestWorkloads : requestWorkloadForecastUpdate;
+      request(message).then(sendResponse).catch(error => sendResponse({
+        ok: false, error: error.message || "Unable to load workloads.", httpStatus: error.httpStatus,
+        debugRequests: Array.isArray(error.debugRequests) ? error.debugRequests : []
+      }));
+      return true;
+    }
+
     if (message.type === messageTypes.requestWlActions) {
       requestWlActions(message).then(sendResponse).catch(error => sendResponse({
         ok: false, error: error.message || "Unable to load workload actions.",
diff --git a/src/content/application.js b/src/content/application.js
index 2443ecf..0d7da84 100644
--- a/src/content/application.js
+++ b/src/content/application.js
@@ -58,7 +58,7 @@ function createContentApplication(overrides = {}) {
   const contentModal = createContentModal({
     createManageTimeButton: () => manageTime.createButton(),
     prepareSrSession: () => srSessionPreparation.ensure(),
-    closeActionForm: (...args) => manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
+    closeActionForm: (...args) => rampProjectionView.close(...args) || manageTime.close(...args) || internalSrForm.close(...args) || opportunityCalendar.closeDetails(...args) || crmSrForm.close(...args) || workloadActionForm.close(...args),
     mountOpportunityViews: (...args) => opportunityCalendar.mount(...args),
     createActivityFilterControls: (...args) => activityFilters.createControls(...args),
     closeCrmSrPopover: () => crmSrPopover.close(),
@@ -233,6 +233,7 @@ function createContentApplication(overrides = {}) {
   const opportunitiesController = createOpportunitiesController({
     ensureCurrentUser: () => currentUser.ensure(),
     resetWorkloadActions: (...args) => opportunityWorkloadActions.reset(...args),
+    resetWorkloads: () => { rampProjectionView.close(false); productWorkloads.reset(); },
     STAGE_OPTIONS: contracts.STAGE_OPTIONS,
     STATUS_OPTIONS: contracts.STATUS_OPTIONS,
     authSessionState,
@@ -376,6 +377,7 @@ function createContentApplication(overrides = {}) {
     createDetailLink: (...args) => opportunitiesLinks.createDetailLink(...args),
     createProductsCountButton: (...args) => productsDetails.createProductsCountButton(...args),
     createProductsRampBadge: (...args) => productsDetails.createProductsRampBadge(...args),
+    createProjectionIndicator: (...args) => rampProjectionView.createOpportunityIndicator(...args),
     createCrmServiceRequestBadge: (...args) => opportunityCrmServiceRequests.createBadge(...args),
     createProductsDetailRow: (...args) => productsDetails.createProductsDetailRow(...args),
     createStageBadge: (...args) => opportunitiesLinks.createStageBadge(...args),
@@ -475,6 +477,8 @@ function createContentApplication(overrides = {}) {
     resetRelatedData: () => {
       opportunityCrmServiceRequests.reset();
       opportunityWorkloadActions.reset();
+      productWorkloads.reset();
+      rampProjectionView.close(false);
       consumptionPlansView.closeAccountPlansModal();
       installBaseView.closeInstallBaseModal();
       serviceRequestsView.closeServiceRequestsModal();
@@ -518,6 +522,8 @@ function createContentApplication(overrides = {}) {
     }
   });
   const productsContentJobs = createProductsContentJobs({
+    loadWorkloads: (...args) => productWorkloads.load(...args),
+    joinWorkloads: number => productWorkloads.joinProducts(number),
     beginProductActivities: (...args) => productActivities.begin(...args),
     completeProductActivities: (...args) => productActivities.complete(...args),
     appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
@@ -531,6 +537,14 @@ function createContentApplication(overrides = {}) {
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
     environment
   });
+  const productWorkloads = createProductWorkloads({
+    productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+    requestConsumerTokenServiceOnce: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    getPrincipal: () => currentUser.getUserId() || authSessionState.principal,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
   const workloadActionOptions = createWorkloadActionOptions({
     requestConsumerTokenServiceOnce: (...args) => authContentSession.requestConsumerTokenServiceOnce(...args),
     sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
@@ -569,6 +583,7 @@ function createContentApplication(overrides = {}) {
     productsContentState, messageTypes, environment
   });
   const productsDetails = createProductsDetails({
+    createProjectionIndicator: (...args) => rampProjectionView.createIndicator(...args),
     setBadgeContent: (...args) => opportunityBadgeContent.setContent(...args),
     OPPORTUNITIES_COLUMNS: columns,
     createAiSummaryAlert: (...args) => aiSummaryContent.createAiSummaryAlert(...args),
@@ -578,6 +593,30 @@ function createContentApplication(overrides = {}) {
     requestGenerateAiSummary: (...args) => aiSummaryContent.requestGenerateAiSummary(...args),
     environment
   });
+  const rampProjection = createRampProjection();
+  const workloadForecastUpdate = createWorkloadForecastUpdate({
+    compare: product => rampProjection.compare(product),
+    ensureCurrentUser: () => currentUser.ensure(),
+    getCurrentUserId: () => currentUser.getUserId(),
+    requestAuthorization: () => authContentSession.requestConsumerTokenServiceOnce(),
+    sendRuntimeMessage: (...args) => platformContentMessages.sendRuntimeMessage(...args),
+    messageTypes,
+    appendBackgroundRequestLog: (...args) => debugContentLog.appendBackgroundRequestLog(...args),
+    productsContentState,
+    queueProductsTableRender: () => productsContentJobs.queueProductsTableRender()
+  });
+  const rampProjectionView = createRampProjectionView({
+    saveEstimates: product => workloadForecastUpdate.save(product),
+    notify: (...args) => opportunitiesLinks.showCopyConfirmation(...args),
+    MODAL_ID: contracts.MODAL_ID,
+    compare: product => rampProjection.compare(product),
+    expandProducts: number => productsDetails.expandProducts(number),
+    createAlertIcon: () => contentIcons.createAlertIcon(),
+    createCloseIcon: () => contentIcons.createCloseIcon(),
+    formatAmount: (...args) => productsDetails.formatProductAmount(...args),
+    formatDate: value => opportunitiesFormatters.formatOracleResponseDate(value),
+    environment
+  });
   const aiSummaryContent = createAiSummaryContent({
     aiSummaryState,
     invalidateSalesCommonToken: (...args) => authSalesCommon.invalidateSalesCommonToken(...args),
@@ -772,12 +811,16 @@ function createContentApplication(overrides = {}) {
     preferencesStorage,
     preferencesView,
     productsContentJobs,
+    productWorkloads,
     productActivities,
     activityProgress,
     srSessionPreparation,
     refreshAll,
     activityCache,
     productsDetails,
+    rampProjection,
+    workloadForecastUpdate,
+    rampProjectionView,
     aiSummaryContent,
     consumptionPlansAction,
     installBaseAction,
diff --git a/src/content/icons.js b/src/content/icons.js
index a5f06c5..9708135 100644
--- a/src/content/icons.js
+++ b/src/content/icons.js
@@ -105,5 +105,47 @@ function createContentIcons({
     svg.append(path);
     return svg;
   }
-  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon };
+  function createAlertIcon() {
+    /* Lucide triangle-alert (https://lucide.dev/icons/triangle-alert), ISC License.
+     * Copyright (c) 2026 Lucide Icons and Contributors
+     * Permission to use, copy, modify, and/or distribute this software for any
+     * purpose with or without fee is hereby granted, provided that the above
+     * copyright notice and this permission notice appear in all copies.
+     * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+     * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+     * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+     * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+     * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+     * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+     * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+     *
+     * Derived from Feather alert-triangle, MIT License.
+     * Copyright (c) 2013-present Cole Bemis
+     * Permission is hereby granted, free of charge, to any person obtaining a copy
+     * of this software and associated documentation files (the "Software"), to deal
+     * in the Software without restriction, including without limitation the rights
+     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the Software is
+     * furnished to do so, subject to the following conditions:
+     * The above copyright notice and this permission notice shall be included in all
+     * copies or substantial portions of the Software.
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+     * SOFTWARE.
+     */
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    for (const [name, value] of Object.entries({ viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false",
+      fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })) svg.setAttribute(name, value);
+    for (const d of ["m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3", "M12 9v4", "M12 17h.01"]) {
+      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      path.setAttribute("d", d);
+      svg.append(path);
+    }
+    return svg;
+  }
+  return { createThemeIcon, createSettingsIcon, createCloseIcon, createRefreshIcon, createViewIcon, createAlertIcon };
 }
diff --git a/src/features/opportunities/controller.js b/src/features/opportunities/controller.js
index 71da350..fd345cf 100644
--- a/src/features/opportunities/controller.js
+++ b/src/features/opportunities/controller.js
@@ -15,6 +15,7 @@ function createOpportunitiesController({
   requestOpportunitiesPage,
   resetCrmServiceRequests,
   resetWorkloadActions,
+  resetWorkloads,
   requestOpptyProductsInBackground,
   requestTokenRelayOnce,
   ensureCurrentUser,
@@ -24,6 +25,7 @@ function createOpportunitiesController({
     const dateRange = getFiscalPeriodRange(period, new Date());
     const requestVersion = ++opportunitiesQueryState.periodRequestVersion;
     resetWorkloadActions();
+    resetWorkloads();
     await ensureCurrentUser();
     if (!isCurrentPeriodRequest(requestVersion)) return;
 
@@ -109,6 +111,7 @@ function createOpportunitiesController({
 
   function resetOpportunitiesTable() {
     resetWorkloadActions();
+    resetWorkloads();
     resetCrmServiceRequests();
     opportunitiesFilterState.selectedStages = new Set(STAGE_OPTIONS);
     opportunitiesFilterState.selectedStatuses = new Set(STATUS_OPTIONS);
diff --git a/src/features/opportunities/table.js b/src/features/opportunities/table.js
index 031e8ef..38e9ee1 100644
--- a/src/features/opportunities/table.js
+++ b/src/features/opportunities/table.js
@@ -10,6 +10,7 @@ function createOpportunitiesTable({
   createDetailLink,
   createProductsCountButton,
   createProductsRampBadge,
+  createProjectionIndicator,
   createCrmServiceRequestBadge,
   closeCrmSrPopover,
   createWorkloadActionsBadge,
@@ -146,6 +147,9 @@ function createOpportunitiesTable({
               if (srBadge) productActions.append(srBadge);
               const actionsBadge = createWorkloadActionsBadge(item.OptyNumber);
               if (actionsBadge) productActions.append(actionsBadge);
+              const projectionIndicator = createProjectionIndicator(productsResult, item,
+                productsContentState.expandedProductOptyNumbers.has(String(item.OptyNumber)));
+              if (projectionIndicator) productActions.append(projectionIndicator);
               nameCellContent.append(opportunityLink, productActions);
               cell.append(nameCellContent);
             } else if (column.key === "optyNumber" && item.OptyNumber) {
diff --git a/src/features/preferences/request-cache.js b/src/features/preferences/request-cache.js
index 25cca59..f0c15b1 100644
--- a/src/features/preferences/request-cache.js
+++ b/src/features/preferences/request-cache.js
@@ -4,11 +4,12 @@ function createFormRequestCache({ getHours, getUserId }) {
   let generation = 0;
   let owner = "";
   const queries = new Set([
+    "requestWorkloads",
     "requestWeekDetails", "requestTimeEntries", "requestActiveServiceRequests", "requestServiceRequestExpand", "requestLookupTaskType",
     "requestActionTeamMembers", "requestActionFindLookup", "requestSrLookupPrimaryPillar", "requestSrLookupLanguage",
     "requestSrLookupTechPlatform", "requestSrLookupOpportunityBusiness", "requestLookupTypePlatform", "requestInternalSrServices"
   ]);
-  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest"]);
+  const writes = new Set(["requestTimeEntriesDelete", "requestTimeEntriesSave", "requestMgmtAction", "requestPostInternalServiceRequest", "requestPostServiceRequest", "requestWorkloadForecastUpdate"]);
   function invalidate() { generation++; entries.clear(); pending.clear(); }
   function maxAge() {
     const hours = Number(getHours());
@@ -34,7 +35,10 @@ function createFormRequestCache({ getHours, getUserId }) {
       if (result?.ok && writes.has(operation) && !(operation === "requestPostServiceRequest" && message.phase === "prepare")) invalidate();
       return result;
     }
-    const key = JSON.stringify(stable(message));
+    // Workloads are scoped to the user/account, not the rotating WWB token or the selected Reference.
+    const key = JSON.stringify(stable(operation === "requestWorkloads"
+      ? { type: message.type, customerId: String(message.customerId), principal: String(message.principal || userId).trim().toLowerCase() }
+      : message));
     const hit = entries.get(key);
     if (hit && Date.now() >= hit.fetchedAt && Date.now() - hit.fetchedAt < duration) {
       return { ...copy(hit.result), debugRequests: [], fromCache: true, cachedAt: hit.fetchedAt };
@@ -46,10 +50,14 @@ function createFormRequestCache({ getHours, getUserId }) {
     }
     const version = generation;
     const promise = transport(request).then(result => {
-      if (result?.ok && version === generation) {
+      const workload = operation === "requestWorkloads";
+      const fetchedAt = workload && Number.isFinite(result?.cachedAt) ? result.cachedAt : Date.now();
+      const cacheable = !workload || (Array.isArray(result?.workloads) && (!result.fromCache || Number.isFinite(result.cachedAt)));
+      if (result?.ok && cacheable && version === generation) {
         // Keep this per-page cache bounded and avoid persisting credentials or customer data to disk.
         if (entries.size >= 500) entries.delete(entries.keys().next().value);
-        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt: Date.now() });
+        // Reusing a persistent workload entry must not restart its original TTL.
+        entries.set(key, { result: copy({ ...result, debugRequests: [] }), fetchedAt });
       }
       return result;
     });
diff --git a/src/features/products/content-jobs.js b/src/features/products/content-jobs.js
index fdb208f..d7b7a85 100644
--- a/src/features/products/content-jobs.js
+++ b/src/features/products/content-jobs.js
@@ -9,6 +9,8 @@ function createProductsContentJobs({
   renderOpportunitiesTable,
   beginProductActivities,
   completeProductActivities,
+  loadWorkloads,
+  joinWorkloads,
   sendRuntimeMessage,
   environment
 }) {
@@ -65,6 +67,8 @@ function createProductsContentJobs({
     };
     renderProductsProgress();
 
+    loadWorkloads(opportunities, requestId);
+
     if (optyNumbers.length === 0) {
       return;
     }
@@ -121,6 +125,7 @@ function createProductsContentJobs({
           cachedAt: Number(message.cachedAt) || 0,
           error: message.error || ""
         });
+        joinWorkloads(message.optyNumber);
       }
 
       productsContentState.productsProgress = {
diff --git a/src/features/products/content-state.js b/src/features/products/content-state.js
index c37b2bb..e258863 100644
--- a/src/features/products/content-state.js
+++ b/src/features/products/content-state.js
@@ -3,6 +3,8 @@ function createProductsContentState() {
     currentProductsRequestId: "",
     productsRenderQueued: false,
     opptyProductsByNumber: new Map(),
+    workloadCustomerIds: [],
+    workloadsByCustomer: new Map(),
     expandedProductOptyNumbers: new Set(),
     productsProgress: {
     state: "idle",
diff --git a/src/features/products/details.js b/src/features/products/details.js
index 99ba867..b31717d 100644
--- a/src/features/products/details.js
+++ b/src/features/products/details.js
@@ -2,6 +2,7 @@ function createProductsDetails({
   OPPORTUNITIES_COLUMNS,
   setBadgeContent,
   createAiSummaryAlert,
+  createProjectionIndicator,
   formatOracleResponseDate,
   productsContentState,
   renderOpportunitiesTable,
@@ -24,6 +25,14 @@ function createProductsDetails({
     return badge;
   }
 
+  function expandProducts(optyNumber) {
+    const number = String(optyNumber);
+    if (productsContentState.expandedProductOptyNumbers.has(number)) return;
+    productsContentState.expandedProductOptyNumbers.add(number);
+    requestGenerateAiSummary(number);
+    renderOpportunitiesTable();
+  }
+
   function createProductsCountButton(optyNumber, productsResult) {
     const normalizedOptyNumber = String(optyNumber);
     const button = document.createElement("button");
@@ -44,8 +53,8 @@ function createProductsDetails({
       if (isExpanded) {
         productsContentState.expandedProductOptyNumbers.delete(normalizedOptyNumber);
       } else {
-        productsContentState.expandedProductOptyNumbers.add(normalizedOptyNumber);
-        requestGenerateAiSummary(normalizedOptyNumber);
+        expandProducts(normalizedOptyNumber);
+        return;
       }
 
       renderOpportunitiesTable();
@@ -105,7 +114,8 @@ function createProductsDetails({
         { label: "Close date", value: (item) => formatOracleResponseDate(item.EffectiveDate) || "-" },
         { label: "Consumption Start", value: (item) => formatOracleResponseDate(item.ConsumptionStartDate_c) || "-" },
         { label: "Ramp Months", value: (item) => item.RampMonths_c === null || item.RampMonths_c === undefined || String(item.RampMonths_c).trim() === ""
-          ? "N/D" : formatProductNumber(item.RampMonths_c) }
+          ? "N/D" : formatProductNumber(item.RampMonths_c) },
+        { label: "Projection", render: (item) => createProjectionIndicator(item, opportunity) }
       ];
 
       const head = document.createElement("thead");
@@ -123,7 +133,10 @@ function createProductsDetails({
         const productRow = document.createElement("tr");
         columns.forEach((column) => {
           const productCell = document.createElement("td");
-          productCell.textContent = String(column.value(product));
+          if (column.render) {
+            productCell.className = "opportunities-extension-projection-cell";
+            productCell.append(column.render(product));
+          } else productCell.textContent = String(column.value(product));
           productRow.append(productCell);
         });
         body.append(productRow);
@@ -165,5 +178,5 @@ function createProductsDetails({
     return Number.isFinite(number) ? `${number}%` : "-";
   }
 
-  return { createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
+  return { expandProducts, createProductsRampBadge, createProductsCountButton, createProductsDetailRow, formatProductNumber, formatProductAmount, formatProductWinProbability };
 }
diff --git a/src/features/products/forecast-update.js b/src/features/products/forecast-update.js
new file mode 100644
index 0000000..b7fb383
--- /dev/null
+++ b/src/features/products/forecast-update.js
@@ -0,0 +1,47 @@
+function createWorkloadForecastUpdate({ compare, ensureCurrentUser, getCurrentUserId, requestAuthorization,
+  sendRuntimeMessage, messageTypes, appendBackgroundRequestLog, productsContentState, queueProductsTableRender }) {
+  const pending = new Set();
+  async function save(product) {
+    const id = String(product?.workload?.id ?? "");
+    if (!/^\d+$/.test(id) || id !== String(product.RevnId)) throw new Error("The product does not have a matching workload ID.");
+    if (pending.has(id)) throw new Error("Estimates are already being updated.");
+    const comparison = compare(product);
+    if (comparison.status !== "divergent") throw new Error("No forecast differences are available to update.");
+    pending.add(id);
+    try {
+      await ensureCurrentUser();
+      const updatedBy = getCurrentUserId();
+      if (typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("The current user ID is unavailable.");
+      // Keep zero months before consumption unchanged, unless they also need correcting.
+      const payload = comparison.rows.filter(row => row.index >= 1 || row.divergent)
+        .map(row => ({ year: row.year, month: row.month, amount: row.calculated, updatedBy }));
+      const authorizations = await requestAuthorization();
+      const response = await sendRuntimeMessage({ type: messageTypes.requestWorkloadForecastUpdate,
+        workloadId: id, payload, authorization: authorizations?.workloadActions });
+      appendBackgroundRequestLog(response?.debugRequests);
+      if (!response?.ok) throw new Error(response?.error || "Unable to update workload estimates.");
+      const amounts = new Map(payload.map(item => [`${item.year}-${item.month}`, item.amount]));
+      const update = workload => {
+        if (String(workload?.id) !== id) return workload;
+        return { ...workload, forecast: workload.forecast.map(month => {
+          const key = `${Number(month.year)}-${Number(month.month)}`;
+          return amounts.has(key) ? { ...month, adjustedConsumptionAmount: amounts.get(key) } : month;
+        }) };
+      };
+      product.workload = update(product.workload);
+      for (const record of productsContentState.workloadsByCustomer.values()) {
+        if (record.status !== "ready") continue;
+        record.workloads = record.workloads.map(update);
+        record.byId = new Map(record.workloads.map(workload => [String(workload.id), workload]));
+      }
+      for (const record of productsContentState.opptyProductsByNumber.values()) {
+        record.items = record.items.map(item => ({ ...item, workload: update(item.workload) }));
+      }
+      queueProductsTableRender();
+      return response;
+    } finally {
+      pending.delete(id);
+    }
+  }
+  return { save };
+}
diff --git a/src/features/products/ramp-projection-view.js b/src/features/products/ramp-projection-view.js
new file mode 100644
index 0000000..2d9249a
--- /dev/null
+++ b/src/features/products/ramp-projection-view.js
@@ -0,0 +1,216 @@
+function createRampProjectionView({ MODAL_ID, compare, createAlertIcon, createCloseIcon, expandProducts, saveEstimates, notify, formatAmount, formatDate, environment }) {
+  const { document } = environment;
+  let active = null;
+  function node(tag, className, text) {
+    const item = document.createElement(tag);
+    if (className) item.className = className;
+    if (text !== undefined) item.textContent = text;
+    return item;
+  }
+  function close(restoreFocus = true) {
+    if (!active) return false;
+    if (active.saving && restoreFocus) return true;
+    const previous = active;
+    active = null;
+    previous.modal.remove();
+    previous.siblings.forEach(([element, inert]) => { element.inert = inert; });
+    if (restoreFocus && previous.trigger?.isConnected) previous.trigger.focus();
+    return true;
+  }
+  function createIndicator(product, opportunity) {
+    const result = compare(product);
+    if (result.status !== "divergent") {
+      const text = node("span", "opportunities-extension-projection-status", result.status === "matched" ? "OK" : "-");
+      text.title = result.status === "matched" ? "Monthly forecast matches the ramp calculation." : result.reason;
+      return text;
+    }
+    const button = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert");
+    button.type = "button";
+    button.title = `Consumption forecast differs in ${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"}. View comparison.`;
+    button.setAttribute("aria-label", button.title);
+    button.setAttribute("aria-haspopup", "dialog");
+    button.append(createAlertIcon());
+    button.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      open(product, opportunity, button);
+    });
+    return button;
+  }
+  function createOpportunityIndicator(productsResult, opportunity, isExpanded) {
+    const products = productsResult?.items || [];
+    const count = products.filter(product => compare(product).status === "divergent").length;
+    if (!count) return null;
+    const singleProduct = products.length === 1;
+    const indicator = node("button", "opportunities-extension-icon-button opportunities-extension-projection-alert opportunities-extension-opportunity-projection-alert");
+    indicator.type = "button";
+    indicator.title = `Consumption forecast differs in ${count} product${count === 1 ? "" : "s"}. ${singleProduct ? "View comparison." : "View products."}`;
+    if (singleProduct) indicator.setAttribute("aria-haspopup", "dialog");
+    else indicator.setAttribute("aria-expanded", String(Boolean(isExpanded)));
+    indicator.setAttribute("aria-label", indicator.title);
+    indicator.append(createAlertIcon());
+    indicator.addEventListener("click", event => {
+      event.preventDefault(); event.stopPropagation();
+      if (singleProduct) open(products[0], opportunity, indicator);
+      else expandProducts(opportunity.OptyNumber);
+    });
+    return indicator;
+  }
+  function open(product, opportunity, trigger) {
+    const host = document.getElementById(MODAL_ID);
+    const result = compare(product);
+    if (!host || host.hidden || result.status !== "divergent") return;
+    close(false);
+    const modal = node("section", "opportunities-extension-action-form-modal opportunities-extension-projection-modal");
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    modal.setAttribute("aria-labelledby", "opportunities-extension-projection-title");
+    const dialog = node("div", "opportunities-extension-action-form-dialog opportunities-extension-projection-dialog");
+    const header = node("header", "opportunities-extension-account-plans-header");
+    const heading = node("div", "opportunities-extension-action-form-heading");
+    const title = node("h2", "", "Consumption projection");
+    title.id = "opportunities-extension-projection-title";
+    heading.append(title, node("p", "", `${opportunity.OptyNumber} - ${product.WorkloadName_c || product.workload.name || product.ProdGroupName || "Workload"}`));
+    const dismiss = node("button", "opportunities-extension-icon-button");
+    dismiss.type = "button";
+    dismiss.title = "Close consumption projection";
+    dismiss.setAttribute("aria-label", dismiss.title);
+    dismiss.append(createCloseIcon());
+    dismiss.addEventListener("click", () => close());
+    header.append(heading, dismiss);
+    const body = node("div", "opportunities-extension-projection-body");
+    const details = node("dl", "opportunities-extension-projection-context");
+    const currency = product.RevnAmountCurcyCode || "USD";
+    for (const [label, value] of [
+      ["Customer", opportunity.CustomerAccount?.PartyUniqueName || "-"], ["Product", product.ProdGroupName || "-"],
+      ["Annual value", formatAmount(result.annual, currency)], ["Ramp months", String(result.ramp)],
+      ["Consumption start", formatDate(result.start)], ["First month", `${result.firstMonthDays}/${result.firstMonthTotalDays} days`]
+    ]) details.append(node("dt", "", label), node("dd", "", value));
+    body.append(details);
+    const summary = node("p", "opportunities-extension-projection-summary", `${result.divergentCount} month${result.divergentCount === 1 ? "" : "s"} with a difference`);
+    body.append(summary);
+    if (result.reason) body.append(node("p", "opportunities-extension-projection-notice", result.reason));
+    const viewport = node("div", "opportunities-extension-projection-viewport");
+    viewport.tabIndex = 0;
+    viewport.setAttribute("role", "region");
+    viewport.setAttribute("aria-label", "Monthly consumption comparison");
+    const table = node("table", "opportunities-extension-projection-table");
+    const caption = node("caption", "opportunities-extension-visually-hidden", `Monthly consumption comparison (${currency}). Difference is forecast minus calculated.`);
+    const head = node("thead"), headRow = node("tr"), tbody = node("tbody");
+    for (const label of ["Month", "Forecast", "Calculated", "Difference"]) {
+      const th = node("th", "", label); th.scope = "col"; headRow.append(th);
+    }
+    head.append(headRow);
+    for (const item of result.rows) {
+      const tr = node("tr");
+      tr.setAttribute("data-divergent", String(item.divergent));
+      const month = node("th", "", `${String(item.month).padStart(2, "0")}/${item.year}`);
+      month.scope = "row";
+      if (item.prorated) month.append(node("span", "opportunities-extension-projection-prorated", " (Prorated)"));
+      tr.append(month);
+      for (const value of [item.actual, item.calculated, item.difference]) tr.append(node("td", "", value === null ? "-" : formatAmount(value, currency)));
+      tbody.append(tr);
+    }
+    table.append(caption, head, tbody);
+    viewport.append(table);
+    body.append(viewport);
+    const errorMessage = node("p", "opportunities-extension-projection-error");
+    errorMessage.setAttribute("role", "alert");
+    errorMessage.hidden = true;
+    body.append(errorMessage);
+    const footer = node("footer", "opportunities-extension-projection-footer");
+    const updateButton = node("button", "opportunities-extension-projection-update", "Update estimates");
+    updateButton.type = "button";
+    footer.append(node("span", "", "Difference = forecast - calculated."), updateButton);
+    dialog.append(header, body, footer);
+    modal.append(dialog);
+    const siblings = Array.from(host.children).map(element => [element, element.inert]);
+    siblings.forEach(([element]) => { element.inert = true; });
+    const current = { modal, siblings, trigger, saving: false };
+    active = current;
+    async function updateEstimates() {
+      if (current.saving) return;
+      current.saving = true;
+      updateButton.disabled = true;
+      dismiss.disabled = true;
+      updateButton.textContent = "Updating...";
+      modal.setAttribute("aria-busy", "true");
+      errorMessage.hidden = true;
+      try {
+        await saveEstimates(product);
+        current.saving = false;
+        if (active === current) close();
+        notify("Workload estimates updated successfully.");
+      } catch (error) {
+        const message = error.message || "Unable to update workload estimates.";
+        if (active === current) {
+          errorMessage.textContent = message;
+          errorMessage.hidden = false;
+        }
+        notify(message, true);
+      } finally {
+        current.saving = false;
+        updateButton.disabled = false;
+        dismiss.disabled = false;
+        updateButton.textContent = "Update estimates";
+        modal.setAttribute("aria-busy", "false");
+      }
+    }
+    updateButton.addEventListener("click", () => {
+      if (current.saving || current.confirmation) return;
+      const overlay = node("div", "opportunities-extension-action-form-modal");
+      const confirmation = node("section", "opportunities-extension-action-form-dialog opportunities-extension-projection-confirm");
+      confirmation.setAttribute("role", "alertdialog");
+      confirmation.setAttribute("aria-modal", "true");
+      confirmation.setAttribute("aria-labelledby", "projection-confirm-title");
+      confirmation.setAttribute("aria-describedby", "projection-confirm-message");
+      const title = node("h2", "", "Update estimates");
+      title.id = "projection-confirm-title";
+      const message = node("p", "", "The estimates will be updated directly in the SPA using the values in the Calculated column. Would you like to confirm the update?");
+      message.id = "projection-confirm-message";
+      const actions = node("div", "opportunities-extension-projection-confirm-actions");
+      const cancel = node("button", "opportunities-extension-projection-cancel", "Cancel");
+      const confirm = node("button", "opportunities-extension-projection-update", "Confirm update");
+      cancel.type = confirm.type = "button";
+      function dismissConfirmation() {
+        overlay.remove();
+        current.confirmation = null;
+        dialog.inert = false;
+        updateButton.focus();
+      }
+      cancel.addEventListener("click", dismissConfirmation);
+      confirm.addEventListener("click", () => {
+        if (current.confirmation !== overlay || active !== current) return;
+        dismissConfirmation();
+        return updateEstimates();
+      });
+      overlay.addEventListener("keydown", event => {
+        if (event.key === "Escape") {
+          event.preventDefault(); event.stopPropagation(); dismissConfirmation();
+        } else if (event.key === "Tab") {
+          event.preventDefault(); event.stopPropagation();
+          (document.activeElement === cancel ? confirm : cancel).focus();
+        }
+      });
+      actions.append(cancel, confirm);
+      confirmation.append(title, message, actions);
+      overlay.append(confirmation);
+      current.confirmation = overlay;
+      dialog.inert = true;
+      modal.append(overlay);
+      cancel.focus();
+    });
+    host.append(modal);
+    modal.addEventListener("keydown", event => {
+      if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); }
+      if (event.key === "Tab") {
+        const controls = [dismiss, viewport, updateButton].filter(control => !control.disabled);
+        const index = controls.indexOf(document.activeElement);
+        if (index < 0 || (event.shiftKey ? index === 0 : index === controls.length - 1)) {
+          event.preventDefault(); controls[event.shiftKey ? controls.length - 1 : 0].focus();
+        }
+      }
+    });
+    dismiss.focus();
+  }
+  return { createIndicator, createOpportunityIndicator, open, close };
+}
diff --git a/src/features/products/ramp-projection.css b/src/features/products/ramp-projection.css
new file mode 100644
index 0000000..2e404bd
--- /dev/null
+++ b/src/features/products/ramp-projection.css
@@ -0,0 +1,52 @@
+.opportunities-extension-products-table th:last-child { width: 90px; padding-left: 6px; padding-right: 6px; white-space: nowrap; text-align: center; }
+.opportunities-extension-products-table .opportunities-extension-projection-cell { text-align: center; vertical-align: middle; }
+.opportunities-extension-projection-alert { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0; color: #976000; width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; }
+.opportunities-extension-projection-alert svg { display: block; flex: none; width: 19px; height: 19px; }
+.opportunities-extension-cell-actions > .opportunities-extension-opportunity-projection-alert { width: 20px; height: 20px; flex-basis: 20px; }
+.opportunities-extension-projection-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.opportunities-extension-action-form-dialog.opportunities-extension-projection-dialog { width: min(850px, 100%); display: flex; flex-direction: column; overflow: hidden; }
+.opportunities-extension-projection-dialog > header { flex: 0 0 auto; padding: 18px 20px; }
+.opportunities-extension-projection-dialog .opportunities-extension-action-form-heading { min-width: 0; overflow-wrap: anywhere; }
+.opportunities-extension-projection-body { min-height: 0; overflow: auto; padding: 16px 20px 0; }
+.opportunities-extension-projection-context { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 8px 12px; margin: 0 0 16px; font-size: 12px; }
+.opportunities-extension-projection-context dt { font-weight: 600; }
+.opportunities-extension-projection-context dd { margin: 0; overflow-wrap: anywhere; }
+.opportunities-extension-projection-summary { font-size: 13px; font-weight: 600; color: #815400; margin: 0 0 12px; }
+.opportunities-extension-projection-notice { font-size: 12px; }
+.opportunities-extension-projection-viewport { overflow-x: auto; }
+.opportunities-extension-projection-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
+.opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 9px 12px; border-bottom: 1px solid #dedbd7; text-align: right; white-space: nowrap; }
+.opportunities-extension-projection-table th:first-child { text-align: left; }
+.opportunities-extension-projection-table thead th { background: #f5f4f2; font-weight: 600; }
+.opportunities-extension-projection-table tbody th { font-weight: 400; }
+.opportunities-extension-projection-table tr[data-divergent="true"] { background: #fff7e5; }
+.opportunities-extension-projection-table tr[data-divergent="true"] td:last-child { color: #815400; font-weight: 700; }
+.opportunities-extension-projection-prorated { display: inline; color: #625d58; font-size: 10px; }
+.opportunities-extension-projection-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 20px; font-size: 11px; color: #625d58; }
+.opportunities-extension-projection-update { flex: none; padding: 8px 12px; border: 1px solid #006879; border-radius: 4px; background: #006879; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
+.opportunities-extension-projection-update:hover:not(:disabled) { background: #005563; }
+.opportunities-extension-projection-update:disabled { opacity: .6; cursor: wait; }
+.opportunities-extension-projection-update:focus-visible { outline: 2px solid #00758f; outline-offset: 2px; }
+.opportunities-extension-projection-confirm { padding: 20px; }
+.opportunities-extension-projection-confirm h2 { margin: 0 0 12px; font-size: 18px; }
+.opportunities-extension-projection-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.5; }
+.opportunities-extension-projection-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.opportunities-extension-projection-cancel { padding: 8px 12px; border: 1px solid #8b8580; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
+.opportunities-extension-projection-error { color: #b3261e; font-size: 12px; overflow-wrap: anywhere; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-error { color: #ffb4ab; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-alert,
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-summary,
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-table tr[data-divergent="true"] td:last-child { color: #ffd080; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-table thead th { background: #34312e; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-table th,
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-table td { border-color: #504b46; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-table tr[data-divergent="true"] { background: #3e3425; }
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-prorated,
+.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-footer { color: #c9c3bc; }
+@media (max-width: 600px) {
+  .opportunities-extension-projection-context { grid-template-columns: max-content minmax(0, 1fr); }
+  .opportunities-extension-projection-dialog > header { padding: 14px 12px; }
+  .opportunities-extension-projection-body { padding: 12px 12px 0; }
+  .opportunities-extension-projection-table th, .opportunities-extension-projection-table td { padding: 8px 6px; }
+  .opportunities-extension-projection-footer { padding: 12px; }
+}
diff --git a/src/features/products/ramp-projection.js b/src/features/products/ramp-projection.js
new file mode 100644
index 0000000..1567a37
--- /dev/null
+++ b/src/features/products/ramp-projection.js
@@ -0,0 +1,63 @@
+function createRampProjection() {
+  function number(value) {
+    if ((typeof value !== "number" && typeof value !== "string") || String(value).trim() === "") return null;
+    const result = Number(value);
+    return Number.isFinite(result) ? result : null;
+  }
+  function startDate(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})(?:T|$)/.exec(String(value ?? ""));
+    if (!match) return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return null;
+    return { year, month, day, days: new Date(Date.UTC(year, month, 0)).getUTCDate() };
+  }
+  function monthlyAmount(annual, ramp, month) {
+    if (month < 1) return 0;
+    // calculadora rampa.xlsx, rampas!D6:P17: exact values, before currency rounding.
+    return (2 * annual / (24 - ramp)) * Math.min(month / (ramp + 1), 1);
+  }
+  function cents(value) { return Math.round((value + Number.EPSILON * Math.abs(value)) * 100); }
+  function compare(product) {
+    const workload = product?.workload;
+    const unavailable = reason => ({ status: "unavailable", reason, rows: [], divergentCount: 0 });
+    if (!workload) return unavailable("Workload data is not available for this product.");
+    const annual = number(workload.adjustedACR);
+    const ramp = number(product.RampMonths_c);
+    const start = startDate(workload.consumptionStartDate);
+    if (annual === null || annual < 0) return unavailable("Annual value (adjustedACR) is missing or invalid.");
+    if (ramp === null || !Number.isInteger(ramp) || ramp < 0 || ramp > 11) {
+      return unavailable("RampMonths_c must be an integer from 0 to 11, as covered by the reference workbook.");
+    }
+    if (!start) return unavailable("Consumption start date is missing or invalid.");
+    if (!Array.isArray(workload.forecast) || !workload.forecast.length) return unavailable("Monthly forecast data is not available.");
+    const periods = new Set();
+    const rows = workload.forecast.map(forecast => {
+      const year = number(forecast?.year), month = number(forecast?.month);
+      const actual = number(forecast?.adjustedConsumptionAmount);
+      if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12) return null;
+      const key = `${year}-${String(month).padStart(2, "0")}`;
+      if (periods.has(key)) return null;
+      periods.add(key);
+      const index = (year - start.year) * 12 + month - start.month + 1;
+      const prorated = index === 1 && start.day > 1;
+      const exact = monthlyAmount(annual, ramp, index) * (index === 1 ? (start.days - start.day + 1) / start.days : 1);
+      const calculatedCents = cents(exact);
+      const actualCents = actual === null ? null : cents(actual);
+      if (!Number.isSafeInteger(calculatedCents) || (actualCents !== null && !Number.isSafeInteger(actualCents))) return null;
+      const differenceCents = actualCents === null ? null : actualCents - calculatedCents;
+      return { key, year, month, index, prorated, actual: actualCents === null ? null : actualCents / 100,
+        calculated: calculatedCents / 100, difference: differenceCents === null ? null : differenceCents / 100,
+        divergent: differenceCents !== null && differenceCents !== 0 };
+    });
+    if (rows.some(row => row === null)) return unavailable("Forecast contains invalid or duplicate months, or values outside the supported numeric range.");
+    rows.sort((a, b) => a.key.localeCompare(b.key));
+    const divergentCount = rows.filter(row => row.divergent).length;
+    const missingCount = rows.filter(row => row.actual === null).length;
+    return { status: divergentCount ? "divergent" : missingCount ? "unavailable" : "matched",
+      reason: missingCount ? "Some months have no adjusted consumption amount." : "", rows, divergentCount, missingCount,
+      annual, ramp, start: `${start.year}-${String(start.month).padStart(2, "0")}-${String(start.day).padStart(2, "0")}`,
+      firstMonthDays: start.days - start.day + 1, firstMonthTotalDays: start.days };
+  }
+  return { compare, monthlyAmount };
+}
diff --git a/src/features/products/workloads-cache.js b/src/features/products/workloads-cache.js
new file mode 100644
index 0000000..05644fe
--- /dev/null
+++ b/src/features/products/workloads-cache.js
@@ -0,0 +1,51 @@
+function createWorkloadsCache({ fetchAllWorkloads, storageLocalGet, storageLocalSet }) {
+  const KEY = "opportunitiesExtension.workloadsCache.v1";
+  let cachePromise = null;
+  let writePromise = Promise.resolve();
+  let generation = 0;
+  const inFlight = new Map();
+
+  function read() {
+    if (!cachePromise) cachePromise = storageLocalGet(KEY)
+      .then(result => result?.[KEY] && typeof result[KEY] === "object" && !Array.isArray(result[KEY]) ? result[KEY] : {})
+      .catch(() => ({}));
+    return cachePromise;
+  }
+  function write(cache) {
+    writePromise = writePromise.catch(() => {}).then(() => storageLocalSet({ [KEY]: cache }));
+    return writePromise;
+  }
+  async function invalidate() {
+    generation += 1;
+    inFlight.clear();
+    cachePromise = Promise.resolve({});
+    await write({});
+  }
+  async function get(customerId, token, maxAgeMs, principal) {
+    const scope = typeof principal === "string" ? principal.trim().toLowerCase() : "";
+    // isMyWorkload is user-specific. Never persist a result without a known principal.
+    if (!scope) return { ...await fetchAllWorkloads(customerId, token), fromCache: false, cachedAt: Date.now() };
+    const key = JSON.stringify([scope, customerId]);
+    const currentGeneration = generation;
+    const cache = await read();
+    if (generation !== currentGeneration) return get(customerId, token, maxAgeMs, principal);
+    const entry = cache[key];
+    const age = Date.now() - Number(entry?.fetchedAt);
+    if (Array.isArray(entry?.items) && age >= 0 && age < maxAgeMs) {
+      return { workloads: entry.items, cachedAt: Number(entry.fetchedAt), fromCache: true, debugRequests: [] };
+    }
+    if (!inFlight.has(key)) {
+      const flight = fetchAllWorkloads(customerId, token).then(async result => {
+        const cachedAt = Date.now();
+        if (generation === currentGeneration) {
+          cache[key] = { fetchedAt: cachedAt, items: result.workloads };
+          await write(cache).catch(() => {});
+        }
+        return { ...result, cachedAt, fromCache: false };
+      }).finally(() => { if (inFlight.get(key) === flight) inFlight.delete(key); });
+      inFlight.set(key, flight);
+    }
+    return inFlight.get(key);
+  }
+  return { get, invalidate };
+}
diff --git a/src/features/products/workloads.js b/src/features/products/workloads.js
new file mode 100644
index 0000000..fcac837
--- /dev/null
+++ b/src/features/products/workloads.js
@@ -0,0 +1,78 @@
+function createProductWorkloads({ productsContentState, opportunitiesQueryState, preferencesState, messageTypes,
+  requestConsumerTokenServiceOnce, sendRuntimeMessage, appendBackgroundRequestLog, getPrincipal, queueProductsTableRender }) {
+  let cycle = null;
+  function reset() {
+    cycle = null;
+    productsContentState.workloadCustomerIds = [];
+    productsContentState.workloadsByCustomer = new Map();
+  }
+  function isCurrent(current) {
+    return cycle === current && current.requestId === productsContentState.currentProductsRequestId
+      && current.version === opportunitiesQueryState.periodRequestVersion;
+  }
+  function joinProducts(optyNumber) {
+    if (!cycle || !isCurrent(cycle)) return;
+    const key = String(optyNumber);
+    const products = productsContentState.opptyProductsByNumber.get(key);
+    if (!products) return;
+    const customerId = cycle.customerByOpportunity.get(key);
+    const record = productsContentState.workloadsByCustomer.get(customerId);
+    products.items = products.items.map(product => ({ ...product,
+      workload: record?.status === "ready" ? record.byId.get(String(product.RevnId ?? "")) || null : null }));
+  }
+  async function load(opportunities, requestId) {
+    reset();
+    const current = { requestId, version: opportunitiesQueryState.periodRequestVersion,
+      customerByOpportunity: new Map(), opportunitiesByCustomer: new Map() };
+    cycle = current;
+    for (const opportunity of opportunities) {
+      const customerId = String(opportunity?.CustomerAccount?.PartyId ?? "").trim();
+      if (!/^\d+$/.test(customerId)) continue;
+      if (!current.opportunitiesByCustomer.has(customerId)) current.opportunitiesByCustomer.set(customerId, new Set());
+      if (opportunity.OptyNumber) {
+        const number = String(opportunity.OptyNumber);
+        current.customerByOpportunity.set(number, customerId);
+        current.opportunitiesByCustomer.get(customerId).add(number);
+      }
+    }
+    const ids = [...current.opportunitiesByCustomer.keys()];
+    productsContentState.workloadCustomerIds = ids;
+    const records = productsContentState.workloadsByCustomer;
+    for (const id of ids) records.set(id, { status: "loading", workloads: [], byId: new Map() });
+    if (!ids.length || !isCurrent(current)) return;
+    const principal = getPrincipal();
+    const cacheMaxAgeMs = preferencesState.opptyProductsCacheHours * 60 * 60 * 1000;
+    try {
+      const authorizations = await requestConsumerTokenServiceOnce();
+      if (!isCurrent(current)) return;
+      let next = 0;
+      const worker = async () => {
+        while (isCurrent(current) && next < ids.length) {
+          const customerId = ids[next++];
+          const record = records.get(customerId);
+          try {
+            const result = await sendRuntimeMessage({ type: messageTypes.requestWorkloads, customerId,
+              authorization: authorizations?.workloadActions, cacheMaxAgeMs, principal });
+            if (!isCurrent(current)) return;
+            appendBackgroundRequestLog(result?.debugRequests);
+            if (!result?.ok || !Array.isArray(result.workloads)) throw new Error(result?.error || "Unable to load workloads.");
+            Object.assign(record, { status: "ready", workloads: result.workloads,
+              byId: new Map(result.workloads.map(workload => [String(workload.id), workload])),
+              fromCache: Boolean(result.fromCache), cachedAt: Number(result.cachedAt) || 0 });
+          } catch (error) {
+            if (!isCurrent(current)) return;
+            record.status = "error";
+            record.error = error.message || "Unable to load workloads.";
+          }
+          for (const number of current.opportunitiesByCustomer.get(customerId)) joinProducts(number);
+          queueProductsTableRender();
+        }
+      };
+      await Promise.all(Array.from({ length: Math.min(4, ids.length) }, worker));
+    } catch (error) {
+      if (!isCurrent(current)) return;
+      for (const record of records.values()) { record.status = "error"; record.error = error.message || "Unable to load workloads."; }
+    }
+  }
+  return { load, joinProducts, reset };
+}
diff --git a/src/services/spa/workloads.js b/src/services/spa/workloads.js
new file mode 100644
index 0000000..4c8c5bf
--- /dev/null
+++ b/src/services/spa/workloads.js
@@ -0,0 +1,79 @@
+function createSpaWorkloads({ fetchJson, getCachedWorkloads, normalizeCacheMaxAge, invalidateWorkloadsCache }) {
+  async function requestWorkloadForecastUpdate(message) {
+    const debugRequests = [];
+    try {
+      const id = String(message.workloadId ?? "");
+      const token = message.authorization?.value;
+      if (!/^\d+$/.test(id)) throw new Error("A numeric workload ID is required.");
+      if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+      if (!Array.isArray(message.payload) || !message.payload.length) throw new Error("Monthly estimates are required.");
+      const periods = new Set();
+      const payload = message.payload.map(({ year, month, amount, updatedBy }) => {
+        if (!Number.isInteger(year) || year < 1000 || year > 9999 || !Number.isInteger(month) || month < 1 || month > 12
+          || typeof amount !== "number" || !Number.isFinite(amount) || amount < 0
+          || typeof updatedBy !== "string" || !updatedBy.trim()) throw new Error("Invalid monthly estimate.");
+        const period = `${year}-${month}`;
+        if (periods.has(period)) throw new Error("Duplicate forecast month.");
+        periods.add(period);
+        return { year, month, amount, updatedBy: updatedBy.trim() };
+      });
+      const result = await fetchJson(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/workloads/${id}/forecast`, {
+        method: "PATCH", credentials: "include",
+        headers: { Accept: "application/json", "Content-Type": "application/json", "wwb-provider-authorization": token.trim() },
+        body: JSON.stringify(payload)
+      }, "requestWorkloadForecastUpdate", debugRequests, { allowEmpty: true });
+      await invalidateWorkloadsCache().catch(() => {});
+      return { ok: true, result, debugRequests };
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+  async function requestWorkloads(message) {
+    const customerId = String(message.customerId ?? "").trim();
+    const token = message.authorization?.value;
+    if (!/^\d+$/.test(customerId)) throw new Error("A numeric CustomerAccount.PartyId is required.");
+    if (typeof token !== "string" || !token.trim()) throw new Error("WWB-TS uiaasHeader.value is unavailable.");
+    const result = await getCachedWorkloads(customerId, token.trim(), normalizeCacheMaxAge(message.cacheMaxAgeMs), message.principal);
+    return { ok: true, customerId, ...result };
+  }
+
+  async function fetchAllWorkloads(customerId, token) {
+    const debugRequests = [];
+    const workloads = new Map();
+    let offset = 0;
+    let limit = 500;
+    try {
+      for (let page = 0; page < 1000; page += 1) {
+        const url = new URL(`https://spa.oracle.com/oalcrm/web/api/provider-proxy/wwb-provider/service/workbench-proxy/wwb/mgmt/customers/${customerId}/workloads`);
+        for (const [name, value] of Object.entries({ workloadStatus: "Pipeline,Implementation,Live", opportunityForecastType: "All",
+          includeForEstimates: "ALL", financialYear: "ROLLING_4_QTRS", offset, limit })) url.searchParams.set(name, String(value));
+        const result = await fetchJson(url.toString(), {
+          method: "GET", credentials: "include",
+          headers: { Accept: "application/json", "wwb-provider-authorization": token }
+        }, "requestWorkloads", debugRequests);
+        if (!result || !Array.isArray(result.workloads) || typeof result.hasNext !== "boolean"
+          || result.workloads.some(item => !item || !/^\d+$/.test(String(item.id ?? "")))) {
+          throw new Error("requestWorkloads returned an invalid collection.");
+        }
+        const countBefore = workloads.size;
+        for (const item of result.workloads) workloads.set(String(item.id), item);
+        if (!result.hasNext) return { workloads: [...workloads.values()], debugRequests };
+        const responseOffset = Number(result.offset ?? offset);
+        const responseLimit = Number(result.limit ?? limit);
+        if (workloads.size === countBefore || !Number.isSafeInteger(responseOffset) || responseOffset !== offset
+          || !Number.isSafeInteger(responseLimit) || responseLimit <= 0 || !Number.isSafeInteger(responseOffset + responseLimit)) {
+          throw new Error("requestWorkloads pagination did not advance.");
+        }
+        offset = responseOffset + responseLimit;
+        limit = responseLimit;
+      }
+      throw new Error("requestWorkloads exceeded the pagination limit.");
+    } catch (error) {
+      error.debugRequests = debugRequests;
+      throw error;
+    }
+  }
+
+  return { requestWorkloads, fetchAllWorkloads, requestWorkloadForecastUpdate };
+}
diff --git a/src/shared/messages.js b/src/shared/messages.js
index b78fab9..ee37c69 100644
--- a/src/shared/messages.js
+++ b/src/shared/messages.js
@@ -19,6 +19,8 @@ function createMessageTypes() {
     requestInstallBase: "opportunitiesExtension.requestInstallBase",
     requestCustomerServiceRequest: "opportunitiesExtension.requestCustomerServiceRequest",
     requestWlActions: "opportunitiesExtension.requestWlActions",
+    requestWorkloads: "opportunitiesExtension.requestWorkloads",
+    requestWorkloadForecastUpdate: "opportunitiesExtension.requestWorkloadForecastUpdate",
     requestActionTeamMembers: "opportunitiesExtension.requestActionTeamMembers",
     requestActionFindLookup: "opportunitiesExtension.requestActionFindLookup",
     requestMgmtAction: "opportunitiesExtension.requestMgmtAction",
diff --git a/tests/debugTabs.test.cjs b/tests/debugTabs.test.cjs
index 39334d4..526d029 100644
--- a/tests/debugTabs.test.cjs
+++ b/tests/debugTabs.test.cjs
@@ -292,7 +292,7 @@ test("full-page debug CSS defines responsive bounds and readable semantic colors
 test("scoped debug styles are packaged after the unchanged main stylesheet", () => {
   const root = path.join(__dirname, "..");
   const css = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css"]
-    .concat("src/features/manage-time/styles.css")
+    .concat("src/features/manage-time/styles.css", "src/features/products/ramp-projection.css")
     .map(file => fs.readFileSync(path.join(root, file), "utf8")).join("\n");
   assert.ok(composeScript("content").includes(`const redwoodStyles = ${JSON.stringify(css)};`));
   assert.ok(!composeScript("background").includes("opportunities-extension-debug-tabs"));
diff --git a/tests/fixtures/extension.js b/tests/fixtures/extension.js
index 99e6bf4..5dc4938 100644
--- a/tests/fixtures/extension.js
+++ b/tests/fixtures/extension.js
@@ -2,11 +2,12 @@
   const listeners = [];
   const storage = new Map();
   const internalSrPreview = new URLSearchParams(location.search).has("internal-sr");
+  const projectionPreview = new URLSearchParams(location.search).has("projection");
   const opportunities = Array.from({ length: 25 }, (_, index) => ({
     OptyNumber: `TEST${index + 1}`,
     OptyId: 1000 + index,
     Name: `Synthetic opportunity ${index + 1} - Database migration`,
-    CustomerAccount: { PartyUniqueName: "Example public sector customer (Example City, BR)", PartyId: internalSrPreview ? 789 : "test-party", PartyNumber: "test-account", Region_c_localizedValue: "LAD", PrimaryAddress: { CountryCode: "BR" } },
+    CustomerAccount: { PartyUniqueName: "Example public sector customer (Example City, BR)", PartyId: internalSrPreview || projectionPreview ? 789 : "test-party", PartyNumber: "test-account", Region_c_localizedValue: "LAD", PrimaryAddress: { CountryCode: "BR" } },
     Owner: { PersonFirstName: "Example", PersonLastName: "Owner" },
     PrimaryRevenue: { RevnAmountCurcyCode: "USD", RevnAmount: "25000", WinProb: 60 },
     EffectiveDate: index === 24 ? null : `2026-11-${String(index < 8 ? 15 : 1 + index).padStart(2, "0")}T00:00:00Z`,
@@ -15,6 +16,7 @@
     StatusCode: ["OPEN", "CLOSED", "LOST", "WON", "WON_PENDING"][index % 5]
   }));
   const products = [{ ProdGroupName: "Migrate databases to cloud", WorkloadName_c: "Example workload", RevnAmountCurcyCode: "USD", RevnAmount: "25000", TypeCode: "NEWCOMMIT", StatusCode: "OPEN", WinProb: 60, EffectiveDate: "2026-11-15", ConsumptionStartDate_c: "2026-11-15", RampMonths_c: 3 }];
+  if (projectionPreview) products[0] = { ...products[0], RevnId: 123, RampMonths_c: 2 };
   const trend = Array.from({ length: 30 }, (_, index) => ({
     fyDate: `2026-09-${String((index % 28) + 1).padStart(2, "0")}`,
     fiscalTime: [`${String((index % 28) + 1).padStart(2, "0")}-Sep-26`],
@@ -26,10 +28,17 @@
     accountSummary: { label: "Account-Ti-Authorization", value: "synthetic-accp" },
     accountPlans: { label: "G2m-Authorization", value: "synthetic-ocicons" }
   };
+  if (projectionPreview) authorizations.workloadActions = { label: "Wwb-Provider-Authorization", value: "synthetic-wwb" };
   const runtime = {
     onMessage: { addListener: listener => listeners.push(listener) },
     async sendMessage(message) {
       const operation = message.type.split(".").at(-1);
+      if (operation === "requestWorkloadForecastUpdate") return { ok: true, result: null, debugRequests: [] };
+      if (operation === "requestWorkloads") return { ok: true, workloads: [{ id: 123, name: "Example workload",
+        adjustedACR: 50000, consumptionStartDate: "2026-11-15T00:00:00", forecast: Array.from({ length: 12 }, (_, index) => ({
+          month: (5 + index) % 12 + 1, year: index < 7 ? 2026 : 2027,
+          adjustedConsumptionAmount: index < 5 ? 0 : index === 5 ? 1000 : index === 6 ? 3030.30 : 4500
+        })) }], debugRequests: [] };
       if (operation === "requestTimeEntries") return { ok: true, items: [], debugRequests: [] };
       if (operation === "requestLookupTaskType") return { ok: true, items: [{ lookUpCode_c: "SCTA_SERVICE_CONFIG", lookUpMeaning_c: "Config", tags_c: "SERVICE" }, { lookUpCode_c: "SCTA_SERVICE_STANDARD", lookUpMeaning_c: "Standard", tags_c: "SERVICE" }, { lookUpCode_c: "SCTA_NON_SERVICE_TRAINING", lookUpMeaning_c: "Training", tags_c: "NON_SERVICE" }], debugRequests: [] };
       if (operation === "requestServiceRequestExpand") return { ok: true, items: [...message.srNumbers, "non-service-sr"].map(SrNumber => ({ SrNumber, SRActivities_c: "Account Plan;Customer Research, Assessment and Recommendation;Success Plan" })), debugRequests: [] };
diff --git a/tests/formRequestCache.test.cjs b/tests/formRequestCache.test.cjs
index 9ffaeb8..bd1b23d 100644
--- a/tests/formRequestCache.test.cjs
+++ b/tests/formRequestCache.test.cjs
@@ -34,7 +34,7 @@ test("failed results are never cached and identity changes discard previous resp
   h.user(""); await h.cache.send(msg, send); await h.cache.send(msg, send); assert.equal(calls, 5);
 });
 test("writes and token requests always execute; successful saves and Refresh all invalidate queries", async () => {
-  for (const name of ["requestTimeEntriesSave", "requestTimeEntriesDelete", "requestMgmtAction", "requestPostServiceRequest", "requestPostInternalServiceRequest", "invalidateProductsCache"]) {
+  for (const name of ["requestTimeEntriesSave", "requestTimeEntriesDelete", "requestMgmtAction", "requestPostServiceRequest", "requestPostInternalServiceRequest", "requestWorkloadForecastUpdate", "invalidateProductsCache"]) {
     const h = setup(); let queries = 0, writes = 0;
     const query = message("requestActionFindLookup");
     const queryTransport = async () => { queries++; return { ok: true }; };
@@ -47,6 +47,42 @@ test("writes and token requests always execute; successful saves and Refresh all
   for (let i = 0; i < 2; i++) await h.cache.send(message("requestSrTokenCatalog"), async () => { calls++; return { ok: true }; });
   assert.equal(calls, 2);
 });
+test("reopening workloads reuses account cache across token renewals and keeps original persistent expiry", async () => {
+  const h = setup(); let calls = 0;
+  h.hours(1);
+  const transport = async () => { calls++; return { ok: true, workloads: [{ id: 1, forecast: [] }], cachedAt: 50000, fromCache: true }; };
+  const msg = message("requestWorkloads", { customerId: 123, principal: "a@example.invalid", authorization: { value: "old-token" } });
+  const first = await h.cache.send(msg, transport);
+  first.workloads[0].forecast.push({ month: 1 });
+  const second = await h.cache.send({ ...msg, customerId: "123", cacheMaxAgeMs: 3600000, authorization: { value: "new-token" } }, transport);
+  assert.equal(calls, 1);
+  assert.equal(second.fromCache, true);
+  assert.equal(second.cachedAt, 50000);
+  assert.equal(second.workloads[0].forecast.length, 0);
+  h.advance(3550000);
+  await h.cache.send(msg, transport);
+  assert.equal(calls, 2, "expires from persistent fetchedAt rather than modal opening time");
+  await h.cache.send({ ...msg, customerId: 456 }, transport);
+  assert.equal(calls, 3);
+  h.user("b@example.invalid");
+  await h.cache.send({ ...msg, principal: "b@example.invalid" }, transport);
+  assert.equal(calls, 4);
+});
+test("workload cache survives failed updates but invalidates after success and Refresh all", async () => {
+  const h = setup(); let calls = 0;
+  const msg = message("requestWorkloads", { customerId: 123 });
+  const transport = async () => { calls++; return { ok: true, workloads: [] }; };
+  await h.cache.send(msg, transport);
+  await h.cache.send(message("requestWorkloadForecastUpdate"), async () => ({ ok: false }));
+  await h.cache.send(msg, transport);
+  assert.equal(calls, 1);
+  await h.cache.send(message("requestWorkloadForecastUpdate"), async () => ({ ok: true }));
+  await h.cache.send(msg, transport);
+  assert.equal(calls, 2);
+  await h.cache.send(message("invalidateProductsCache"), async () => ({ ok: true }));
+  await h.cache.send(msg, transport);
+  assert.equal(calls, 3);
+});
 test("concurrent queries share work but old responses cannot repopulate an invalidated cache", async () => {
   const h = setup(); let resolve, calls = 0;
   const msg = message("requestLookupTypePlatform");
diff --git a/tests/opportunityTable.test.cjs b/tests/opportunityTable.test.cjs
index b04d3fd..4701114 100644
--- a/tests/opportunityTable.test.cjs
+++ b/tests/opportunityTable.test.cjs
@@ -132,6 +132,32 @@ test("product labels support multiple digits without changing their tooltip", ()
   assert.equal(count.attributes["aria-label"], "12 products for opportunity TEST-1");
 });
 
+test("opportunity projection alert is last and aggregates only divergent products", () => {
+  const h = setup();
+  const alert = () => findClass(h.cell("name"), "opportunities-extension-opportunity-projection-alert");
+  const product = amount => ({ RampMonths_c: 0, workload: { adjustedACR: 1200, consumptionStartDate: "2026-10-01",
+    forecast: [{ year: 2026, month: 10, adjustedConsumptionAmount: amount }] } });
+  assert.equal(alert(), undefined);
+  h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { items: [product(90), product(100), product(110), {}] });
+  h.app.opportunitiesTable.renderOpportunitiesTable();
+  assert.equal(alert().title, "Consumption forecast differs in 2 products. View products.");
+  const actions = findClass(h.cell("name"), "opportunities-extension-cell-actions");
+  assert.equal(actions.children.at(-1), alert());
+  assert.equal(alert().tag, "button");
+  assert.equal(alert().attributes["aria-expanded"], "false");
+  alert().click();
+  assert.equal(h.rows()[1].className, "opportunities-extension-products-detail-row");
+  assert.equal(alert().attributes["aria-expanded"], "true");
+  assert.equal(walk(h.rows()[1]).filter(node => node.attributes["aria-haspopup"] === "dialog").length, 2);
+  assert.deepEqual(h.summaries, ["TEST-1"]);
+  alert().click();
+  assert.equal(h.rows()[1].className, "opportunities-extension-products-detail-row", "clicking again never collapses the list");
+  assert.deepEqual(h.summaries, ["TEST-1"], "already expanded list is not reloaded");
+  h.app.productsContentState.opptyProductsByNumber.set("TEST-1", { items: [product(100), {}] });
+  h.app.opportunitiesTable.renderOpportunitiesTable();
+  assert.equal(alert(), undefined);
+});
+
 test("opportunity badges share height, typography and alignment including the Action plus button", () => {
   const css = fs.readFileSync(path.join(__dirname, "../src/features/opportunities/styles.css"), "utf8");
   const shared = css.match(/\.opportunities-extension-cell-actions > \.opportunities-extension-products-count,\s*\.opportunities-extension-cell-actions > \.opportunities-extension-products-ramp,\s*\.opportunities-extension-cell-actions > \.opportunities-extension-crm-sr-badge\s*\{([^}]+)\}/);
@@ -254,6 +280,6 @@ test("table styles reserve compact widths, prioritize Name/Customer and keep nes
     assert.ok(remaining > 0);
     assert.ok(remaining / 2 >= 12 + 84, "three customer controls fit after the left inset");
   }
-  const allCss = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css", "src/features/manage-time/styles.css"].map(read).join("\n");
+  const allCss = ["src/content/styles/redwood.css", "src/features/debug/styles.css", "src/features/opportunities/styles.css", "src/features/install-base/styles.css", "src/features/service-requests/styles.css", "src/features/consumption/plan-detail.css", "src/features/ratecard/styles.css", "src/features/opportunities/customer-table-search.css", "src/features/opportunities/calendar.css", "src/features/manage-time/styles.css", "src/features/products/ramp-projection.css"].map(read).join("\n");
   assert.ok(composeScript("content").includes(`const redwoodStyles = ${JSON.stringify(allCss)};`));
 });
diff --git a/tests/ramp-projection.test.cjs b/tests/ramp-projection.test.cjs
new file mode 100644
index 0000000..882f943
--- /dev/null
+++ b/tests/ramp-projection.test.cjs
@@ -0,0 +1,209 @@
+const assert = require("node:assert/strict");
+const { test } = require("node:test");
+const { loadApplication } = require("./support/application.cjs");
+const model = loadApplication("content").rampProjection;
+const product = (workload = {}, overrides = {}) => ({ RampMonths_c: 2, RevnAmount: 1,
+  ConsumptionStartDate_c: "2000-01-01", workload: { adjustedACR: 50000,
+    consumptionStartDate: "2026-11-01T00:00:00", forecast: [{ month: 11, year: 2026, adjustedConsumptionAmount: 1515.15 }],
+    ...workload }, ...overrides });
+
+test("ramp formula agrees with all twelve workbook ramps and preserves the annual total", () => {
+  // rampas!E6:E17 and the stabilized values in P6:P17, annual value F2 = 50000.
+  const first = [4166.666666666667, 2173.913043478261, 1515.151515151515, 1190.4761904761904, 1000,
+    877.1929824561404, 793.6507936507936, 735.2941176470588, 694.4444444444445, 666.6666666666667,
+    649.3506493506494, 641.025641025641];
+  const stable = [4166.666666666667, 4347.826086956522, 4545.454545454545, 4761.9047619047615,
+    5000, 5263.1578947368425, 5555.555555555556, 5882.35294117647, 6250, 6666.666666666667,
+    7142.857142857143, 7692.307692307692];
+  for (let ramp = 0; ramp <= 11; ramp++) {
+    assert.ok(Math.abs(model.monthlyAmount(50000, ramp, 1) - first[ramp]) < 1e-9);
+    assert.ok(Math.abs(model.monthlyAmount(50000, ramp, 12) - stable[ramp]) < 1e-9);
+    const months = Array.from({ length: 12 }, (_, i) => model.monthlyAmount(50000, ramp, i + 1));
+    assert.ok(Math.abs(months.reduce((sum, value) => sum + value, 0) - 50000) < 1e-9);
+    assert.equal(model.monthlyAmount(50000, ramp, 13), months[11], "no annual restart");
+    assert.equal(model.monthlyAmount(50000, ramp, 0), 0);
+  }
+});
+
+test("comparison uses adjustedACR, product RampMonths_c, calendar months and cent precision", () => {
+  const result = model.compare(product({ rampMonths: 0, actualRampMonths: 11, forecast: [
+    { month: 1, year: 2027, adjustedConsumptionAmount: 4500 },
+    { month: 11, year: 2026, adjustedConsumptionAmount: "1515.151515" },
+    { month: 12, year: 2026, adjustedConsumptionAmount: 3200 },
+    { month: 10, year: 2026, adjustedConsumptionAmount: 0 }
+  ] }));
+  assert.equal(result.status, "divergent");
+  assert.equal(result.divergentCount, 2);
+  assert.deepEqual(Array.from(result.rows, row => [row.key, row.calculated, row.difference]), [
+    ["2026-10", 0, 0], ["2026-11", 1515.15, 0], ["2026-12", 3030.30, 169.70], ["2027-01", 4545.45, -45.45]
+  ]);
+  assert.equal(model.compare(product()).status, "matched");
+});
+
+test("first month is prorated inclusively without timezone shifts, including leap years", () => {
+  for (const [start, month, year, expected, days, total] of [
+    ["2026-11-25T00:00:00-0300", 11, 2026, 303.03, 6, 30],
+    ["2026-11-30T00:00:00Z", 11, 2026, 50.51, 1, 30],
+    ["2028-02-29T00:00:00+1400", 2, 2028, 52.25, 1, 29],
+    ["2027-02-28", 2, 2027, 54.11, 1, 28],
+    ["2026-12-01", 12, 2026, 1515.15, 31, 31]
+  ]) {
+    const result = model.compare(product({ consumptionStartDate: start,
+      forecast: [{ month, year, adjustedConsumptionAmount: expected }] }));
+    assert.equal(result.rows[0].calculated, expected, start);
+    assert.equal(result.status, "matched", start);
+    assert.equal(result.firstMonthDays, days);
+    assert.equal(result.firstMonthTotalDays, total);
+  }
+});
+
+test("missing or invalid inputs never create false mismatches or silently default to zero", () => {
+  for (const value of [null, "", "garbage", -1, Infinity]) assert.equal(model.compare(product({ adjustedACR: value })).status, "unavailable");
+  for (const value of [null, "", "garbage", -1, 12, 1.5]) assert.equal(model.compare(product({}, { RampMonths_c: value })).status, "unavailable");
+  for (const value of [null, "", "2026-02-30", "2026-13-01"]) assert.equal(model.compare(product({ consumptionStartDate: value })).status, "unavailable");
+  assert.equal(model.compare({}).status, "unavailable");
+  for (const forecast of [[], null, [{ year: 2026, month: 0 }], [{ year: 2026, month: 11 }, { year: 2026, month: 11 }]]) {
+    assert.equal(model.compare(product({ forecast })).status, "unavailable");
+  }
+  assert.equal(model.compare(product({ adjustedACR: 0, forecast: [{ year: 2026, month: 11, adjustedConsumptionAmount: 0 }] }, { RampMonths_c: "0" })).status, "matched");
+  const missing = model.compare(product({ forecast: [{ year: 2026, month: 11, projectedConsumptionAmount: 500 }] }));
+  assert.equal(missing.status, "unavailable");
+  assert.equal(missing.rows[0].actual, null);
+  assert.equal(missing.rows[0].difference, null);
+});
+
+test("calculation is read-only and keeps missing monthly values visible beside real differences", () => {
+  const input = product({ forecast: [{ year: 2026, month: 11 }, { year: 2026, month: 12, adjustedConsumptionAmount: 0 }] });
+  const before = JSON.stringify(input);
+  const result = model.compare(input);
+  assert.equal(JSON.stringify(input), before);
+  assert.equal(result.status, "divergent");
+  assert.equal(result.divergentCount, 1);
+  assert.equal(result.missingCount, 1);
+  assert.ok(result.reason);
+});
+
+function dom() {
+  const document = { activeElement: null };
+  class Element {
+    constructor(tag) { this.tag = tag; this.children = []; this.attributes = {}; this.dataset = {}; this.listeners = {}; this.classList = { toggle() {} }; this.inert = false; this.isConnected = true; }
+    set textContent(value) { this.text = String(value); this.children = []; }
+    get textContent() { return (this.text || "") + this.children.map(child => child.textContent).join(""); }
+    append(...children) { for (const child of children) { child.parent = this; this.children.push(child); } }
+    setAttribute(name, value) { this.attributes[name] = value; }
+    addEventListener(name, fn) { this.listeners[name] = fn; }
+    focus() { document.activeElement = this; }
+    remove() { this.parent.children = this.parent.children.filter(child => child !== this); this.isConnected = false; }
+    click() { this.listeners.click?.({ preventDefault() {}, stopPropagation() {} }); }
+  }
+  const host = new Element("main"), content = new Element("div");
+  host.append(content);
+  document.createElement = tag => new Element(tag);
+  document.createElementNS = (_, tag) => new Element(tag);
+  document.getElementById = () => host;
+  return { document, host, content };
+}
+const walk = root => [root, ...root.children.flatMap(walk)];
+
+test("Update estimates prevents duplicate clicks, reports errors, retries and closes on success", async () => {
+  const { document, host } = dom();
+  const app = loadApplication("content", { document, Intl, Date });
+  const input = product({ forecast: [{ year: 2026, month: 11, adjustedConsumptionAmount: 0 }] });
+  const notifications = [];
+  app.opportunitiesLinks.showCopyConfirmation = (...args) => notifications.push(args);
+  let reject, calls = 0;
+  app.workloadForecastUpdate.save = () => { calls++; return new Promise((_, fail) => { reject = fail; }); };
+  app.rampProjectionView.open(input, { OptyNumber: "TEST" });
+  const modal = host.children[1];
+  const button = walk(modal).find(node => node.textContent === "Update estimates");
+  const event = { preventDefault() {}, stopPropagation() {} };
+  button.listeners.click(event);
+  assert.equal(calls, 0, "opening confirmation must not save");
+  const confirmation = () => walk(modal).find(node => node.attributes.role === "alertdialog");
+  assert.ok(confirmation().textContent.includes("The estimates will be updated directly in the SPA"));
+  const cancel = walk(confirmation()).find(node => node.textContent === "Cancel");
+  assert.equal(document.activeElement, cancel);
+  cancel.click();
+  assert.equal(confirmation(), undefined);
+  assert.equal(document.activeElement, button);
+  assert.equal(calls, 0, "cancelling must not save");
+  button.click();
+  const pending = walk(confirmation()).find(node => node.textContent === "Confirm update").listeners.click(event);
+  button.click();
+  assert.equal(confirmation(), undefined);
+  assert.equal(calls, 1);
+  assert.equal(button.disabled, true);
+  assert.equal(app.rampProjectionView.close(), true);
+  assert.equal(host.children.length, 2, "cannot dismiss while saving");
+  reject(new Error("Forbidden"));
+  await pending;
+  assert.equal(button.disabled, false);
+  assert.deepEqual(notifications, [["Forbidden", true]]);
+  app.workloadForecastUpdate.save = async () => { calls++; };
+  button.click();
+  await walk(confirmation()).find(node => node.textContent === "Confirm update").listeners.click(event);
+  assert.equal(host.children.length, 1);
+  assert.deepEqual(notifications[1], ["Workload estimates updated successfully."]);
+});
+
+test("single-product opportunity alert opens the comparison directly with opportunity context", () => {
+  const { document, host, content } = dom();
+  const app = loadApplication("content", { document, Intl, Date });
+  const opportunity = { OptyNumber: "ONLY", CustomerAccount: { PartyUniqueName: "Single customer" } };
+  const input = product({ forecast: [{ year: 2026, month: 11, adjustedConsumptionAmount: 0 }] });
+  let expansions = 0;
+  app.productsDetails.expandProducts = () => { expansions++; };
+  const alert = app.rampProjectionView.createOpportunityIndicator({ items: [input] }, opportunity, false);
+  content.append(alert);
+  assert.equal(alert.attributes["aria-haspopup"], "dialog");
+  assert.equal(alert.attributes["aria-expanded"], undefined);
+  assert.match(alert.title, /View comparison/);
+  alert.click();
+  assert.equal(expansions, 0);
+  assert.equal(host.children[1].attributes.role, "dialog");
+  assert.ok(host.children[1].textContent.includes("ONLY"));
+  assert.ok(host.children[1].textContent.includes("Single customer"));
+  app.rampProjectionView.close();
+  assert.equal(document.activeElement, alert);
+  const multiple = app.rampProjectionView.createOpportunityIndicator({ items: [input, product()] }, opportunity, false);
+  assert.equal(multiple.attributes["aria-haspopup"], undefined);
+  multiple.click();
+  assert.equal(expansions, 1, "two products still expand even when only one is divergent");
+  assert.equal(host.children.length, 1);
+});
+
+test("product column opens accessible read-only comparison and restores focus/background on close", () => {
+  const { document, host, content } = dom();
+  const app = loadApplication("content", { document, Intl, Date });
+  const input = product({ consumptionStartDate: "2026-11-25", forecast: [{ year: 2026, month: 11, adjustedConsumptionAmount: 1000 }] },
+    { RevnId: 1, ProdGroupName: "<b>Product</b>", RevnAmountCurcyCode: "USD" });
+  app.productsContentState.opptyProductsByNumber.set("TEST", { items: [input] });
+  const row = app.productsDetails.createProductsDetailRow({ OptyNumber: "TEST", CustomerAccount: { PartyUniqueName: "Example" } }, 10);
+  const alert = walk(row).find(node => node.attributes["aria-haspopup"] === "dialog");
+  assert.ok(walk(row).some(node => node.tag === "th" && node.textContent === "Projection"));
+  assert.ok(alert);
+  assert.equal(alert.children[0].tag, "svg");
+  content.append(row);
+  alert.click();
+  const modal = host.children[1];
+  assert.equal(modal.attributes.role, "dialog");
+  assert.equal(content.inert, true);
+  const elements = walk(modal);
+  for (const text of ["Forecast", "Calculated", "Difference", "11/2026 (Prorated)", "$303.03", "$696.97"]) {
+    assert.ok(elements.some(node => node.textContent === text), text);
+  }
+  assert.ok(elements.some(node => node.textContent === "<b>Product</b>"));
+  assert.equal(elements.some(node => node.tag === "b"), false, "names use safe text nodes");
+  const closeButton = elements.find(node => node.title === "Close consumption projection");
+  assert.equal(document.activeElement, closeButton);
+  let prevented = false;
+  modal.listeners.keydown({ key: "Tab", shiftKey: true, preventDefault() { prevented = true; } });
+  assert.equal(prevented, true);
+  assert.equal(document.activeElement.textContent, "Update estimates");
+  modal.listeners.keydown({ key: "Escape", preventDefault() {}, stopPropagation() {} });
+  assert.equal(host.children.length, 1);
+  assert.equal(content.inert, false);
+  assert.equal(document.activeElement, alert);
+  assert.equal(app.rampProjectionView.createIndicator(product(), {}).textContent, "OK");
+  assert.equal(app.rampProjectionView.createIndicator({}, {}).textContent, "-");
+});
diff --git a/tests/workload-forecast-update.test.cjs b/tests/workload-forecast-update.test.cjs
new file mode 100644
index 0000000..1d0f2c7
--- /dev/null
+++ b/tests/workload-forecast-update.test.cjs
@@ -0,0 +1,102 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const { loadBackground, response, plain } = require("./support/characterization.cjs");
+const { loadApplication } = require("./support/application.cjs");
+const type = "opportunitiesExtension.requestWorkloadForecastUpdate";
+const payload = [{ year: 2026, month: 11, amount: 303.03, updatedBy: "test@example.invalid" }];
+const message = { type, workloadId: "1234", authorization: { value: "synthetic-wwb" }, payload };
+
+for (const family of ["chrome", "firefox"]) {
+  test(`${family}: forecast PATCH uses dynamic workload, JSON, WWB authorization and invalidates cache on 204`, async () => {
+    const calls = [];
+    const storage = { "opportunitiesExtension.workloadsCache.v1": { old: { items: [{ id: 1234 }] } } };
+    const h = loadBackground({ family, storage, fetch: async (url, options) => {
+      calls.push({ url, options });
+      return new Response(null, { status: 204 });
+    } });
+    const result = await h.dispatch(message);
+    assert.equal(result.ok, true);
+    assert.equal(calls.length, 1);
+    assert.ok(calls[0].url.endsWith("/workloads/1234/forecast"));
+    assert.equal(calls[0].options.method, "PATCH");
+    assert.equal(calls[0].options.credentials, "include");
+    assert.equal(calls[0].options.headers["wwb-provider-authorization"], "synthetic-wwb");
+    assert.equal(calls[0].options.headers["Content-Type"], "application/json");
+    assert.deepEqual(JSON.parse(calls[0].options.body), payload);
+    assert.deepEqual(storage["opportunitiesExtension.workloadsCache.v1"], {});
+    assert.equal(result.debugRequests[0].name, "requestWorkloadForecastUpdate");
+    assert.equal(result.debugRequests[0].httpStatus, 204);
+  });
+
+  test(`${family}: denied PATCH preserves cache, returns debug and is not automatically retried`, async () => {
+    let calls = 0;
+    const storage = { "opportunitiesExtension.workloadsCache.v1": { old: { items: [{ id: 1234 }] } } };
+    const before = JSON.stringify(storage);
+    const h = loadBackground({ family, storage, fetch: async () => { calls++; return response({ error: "Denied" }, 403); } });
+    const result = await h.dispatch(message);
+    assert.equal(result.ok, false);
+    assert.equal(result.httpStatus, 403);
+    assert.equal(calls, 1);
+    assert.equal(JSON.stringify(storage), before);
+    assert.equal(result.debugRequests[0].httpStatus, 403);
+  });
+}
+
+test("forecast update rejects invalid identity, invalid amounts and duplicate months before fetch", async () => {
+  let calls = 0;
+  const h = loadBackground({ fetch: async () => { calls++; return response({}); } });
+  for (const change of [{ workloadId: "../other" }, { authorization: {} }, { payload: [] },
+    { payload: [{ ...payload[0], amount: -1 }] }, { payload: [{ ...payload[0], month: 13 }] },
+    { payload: [{ ...payload[0], updatedBy: "" }] }, { payload: [payload[0], payload[0]] }]) {
+    assert.equal((await h.dispatch({ ...message, ...change })).ok, false);
+  }
+  assert.equal(calls, 0);
+});
+
+function setup() {
+  const app = loadApplication("content");
+  const item = { RevnId: 1234, RampMonths_c: 2, workload: { id: 1234, adjustedACR: 50000,
+    consumptionStartDate: "2026-11-25", forecast: [
+      { year: 2026, month: 10, adjustedConsumptionAmount: 0 },
+      { year: 2026, month: 11, adjustedConsumptionAmount: 100 },
+      { year: 2026, month: 12, adjustedConsumptionAmount: 100 }
+    ] } };
+  app.currentUser.ensure = async () => {};
+  app.currentUser.getUserId = () => "test@example.invalid";
+  app.authContentSession.requestConsumerTokenServiceOnce = async () => ({ workloadActions: message.authorization });
+  app.debugContentLog.appendBackgroundRequestLog = () => {};
+  app.productsContentJobs.queueProductsTableRender = () => {};
+  app.productsContentState.opptyProductsByNumber.set("ONE", { items: [item] });
+  app.productsContentState.opptyProductsByNumber.set("TWO", { items: [{ ...item }] });
+  app.productsContentState.workloadsByCustomer.set("99", { status: "ready", workloads: [item.workload], byId: new Map([["1234", item.workload]]) });
+  return { app, item };
+}
+
+test("content constructs calculated months and updates both joins only after successful PATCH", async () => {
+  const { app, item } = setup();
+  let release, sent;
+  app.platformContentMessages.sendRuntimeMessage = value => { sent = value; return new Promise(resolve => { release = resolve; }); };
+  const saving = app.workloadForecastUpdate.save(item);
+  await new Promise(resolve => setImmediate(resolve));
+  assert.equal(item.workload.forecast[1].adjustedConsumptionAmount, 100);
+  assert.equal(sent.type, type);
+  assert.equal(sent.workloadId, "1234");
+  assert.deepEqual(plain(sent.payload), [payload[0], { year: 2026, month: 12, amount: 3030.30, updatedBy: "test@example.invalid" }]);
+  await assert.rejects(app.workloadForecastUpdate.save(item), /already being updated/);
+  release({ ok: true });
+  await saving;
+  assert.equal(app.rampProjection.compare(item).status, "matched");
+  assert.equal(app.productsContentState.workloadsByCustomer.get("99").byId.get("1234").forecast[1].adjustedConsumptionAmount, 303.03);
+  for (const record of app.productsContentState.opptyProductsByNumber.values()) assert.equal(app.rampProjection.compare(record.items[0]).status, "matched");
+});
+
+test("failed forecast update leaves values unchanged and allows a deliberate retry", async () => {
+  const { app, item } = setup();
+  const before = JSON.stringify(item);
+  app.platformContentMessages.sendRuntimeMessage = async () => ({ ok: false, error: "Forbidden" });
+  await assert.rejects(app.workloadForecastUpdate.save(item), /Forbidden/);
+  assert.equal(JSON.stringify(item), before);
+  app.platformContentMessages.sendRuntimeMessage = async () => ({ ok: true });
+  await app.workloadForecastUpdate.save(item);
+  assert.equal(app.rampProjection.compare(item).status, "matched");
+});
diff --git a/tests/workloads.test.cjs b/tests/workloads.test.cjs
new file mode 100644
index 0000000..ac406f0
--- /dev/null
+++ b/tests/workloads.test.cjs
@@ -0,0 +1,237 @@
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const { loadBackground, plain, response } = require("./support/characterization.cjs");
+const { loadApplication } = require("./support/application.cjs");
+const TYPE = "opportunitiesExtension.requestWorkloads";
+const CACHE = "opportunitiesExtension.workloadsCache.v1";
+const flush = () => new Promise(resolve => setImmediate(resolve));
+const request = (extra = {}) => ({ type: TYPE, customerId: "123", principal: "user@example.invalid",
+  authorization: { value: "synthetic-wwb-token" }, cacheMaxAgeMs: 3600000, ...extra });
+const page = (ids, extra = {}) => ({ workloads: ids.map(id => ({ id, name: `Workload ${id}`, forecast: [] })), hasNext: false, ...extra });
+
+for (const family of ["chrome", "firefox"]) {
+  test(`${family}: workloads paginate with response offset/limit and reuse persistent per-account cache`, async () => {
+    const calls = [], storage = {};
+    const h = loadBackground({ family, storage, fetch: async (url, options) => {
+      calls.push({ url: new URL(url), options });
+      const offset = Number(new URL(url).searchParams.get("offset"));
+      return response(offset === 0 ? page([11, 12], { hasNext: true, offset: 0, limit: 2 })
+        : offset === 2 ? page([13], { hasNext: true, offset: 2, limit: 1 }) : page([14]));
+    } });
+    const result = await h.dispatch(request());
+    assert.equal(result.ok, true);
+    assert.deepEqual(result.workloads.map(item => item.id), [11, 12, 13, 14]);
+    assert.deepEqual(calls.map(call => call.url.searchParams.get("offset")), ["0", "2", "3"]);
+    for (const { url, options } of calls) {
+      assert.equal(url.origin, "https://spa.oracle.com");
+      assert.ok(url.pathname.endsWith("/customers/123/workloads"));
+      assert.equal(url.searchParams.get("workloadStatus"), "Pipeline,Implementation,Live");
+      assert.equal(url.searchParams.get("opportunityForecastType"), "All");
+      assert.equal(url.searchParams.get("includeForEstimates"), "ALL");
+      assert.equal(url.searchParams.get("financialYear"), "ROLLING_4_QTRS");
+      assert.equal(options.method, "GET");
+      assert.equal(options.credentials, "include");
+      assert.equal(options.headers["wwb-provider-authorization"], "synthetic-wwb-token");
+    }
+    assert.equal(result.debugRequests.length, 3);
+    assert.ok(result.debugRequests.every(entry => entry.name === "requestWorkloads"));
+    assert.equal(result.fromCache, false);
+    assert.equal((await h.dispatch(request())).fromCache, true);
+    assert.equal(calls.length, 3);
+    assert.doesNotMatch(JSON.stringify(storage), /synthetic-wwb-token|debugRequests|requestHeaders/);
+    const restarted = loadBackground({ family, storage });
+    const cached = await restarted.dispatch(request());
+    assert.equal(cached.fromCache, true);
+    assert.deepEqual(cached.workloads, result.workloads);
+    assert.equal(cached.cachedAt, result.cachedAt);
+    h.advance(3600001);
+    assert.equal((await h.dispatch(request())).fromCache, false);
+    assert.equal(calls.length, 6);
+    assert.equal((await h.dispatch(request({ customerId: "456" }))).fromCache, false);
+    assert.equal((await h.dispatch(request({ principal: "other@example.invalid" }))).fromCache, false);
+    assert.equal(calls.length, 12);
+  });
+
+  test(`${family}: workload cache coalesces flights and Refresh all prevents late cache restoration`, async () => {
+    const pending = [], storage = {};
+    const h = loadBackground({ family, storage, fetch: () => new Promise(resolve => pending.push(resolve)) });
+    const old = h.dispatch(request()), shared = h.dispatch(request());
+    await flush();
+    assert.equal(pending.length, 1);
+    assert.equal((await h.dispatch({ type: "opportunitiesExtension.invalidateProductsCache" })).ok, true);
+    const fresh = h.dispatch(request());
+    await flush();
+    assert.equal(pending.length, 2);
+    pending[1](response(page([22])));
+    await fresh;
+    pending[0](response(page([11])));
+    assert.deepEqual(await old, await shared);
+    const cached = await h.dispatch(request());
+    assert.equal(cached.fromCache, true);
+    assert.deepEqual(cached.workloads.map(item => item.id), [22]);
+    assert.equal(pending.length, 2);
+  });
+
+  test(`${family}: successful empty workloads are cached; storage failures do not lose results`, async () => {
+    let calls = 0;
+    const h = loadBackground({ family, fetch: async () => { calls++; return response(page([])); } });
+    assert.deepEqual((await h.dispatch(request())).workloads, []);
+    assert.equal((await h.dispatch(request())).fromCache, true);
+    assert.equal(calls, 1);
+    const unavailable = loadBackground({ family, storageError: true, fetch: async () => response(page([10])) });
+    assert.equal((await unavailable.dispatch(request())).ok, true);
+  });
+}
+
+test("workload failures and stalled pagination are not cached as complete results", async () => {
+  for (const bad of [response({}, 403), response({ workloads: [] }), response(page([], { hasNext: true })),
+    response(page([11], { hasNext: true, offset: 0, limit: 0 }))]) {
+    let calls = 0;
+    const h = loadBackground({ fetch: async () => ++calls === 1 ? bad : response(page([12])) });
+    const failed = await h.dispatch(request());
+    assert.equal(failed.ok, false);
+    assert.equal(failed.debugRequests.length, 1);
+    assert.equal((await h.dispatch(request())).ok, true);
+    assert.equal(calls, 2);
+  }
+  let calls = 0;
+  const repeated = loadBackground({ fetch: async () => { calls++; return response(page([11], { hasNext: true })); } });
+  assert.match((await repeated.dispatch(request())).error, /did not advance/);
+  assert.equal(calls, 2);
+  let attempt = 0;
+  const partial = loadBackground({ fetch: async () => ++attempt === 1
+    ? response(page([11], { hasNext: true })) : response({}, 500) });
+  const failure = await partial.dispatch(request());
+  assert.equal(failure.ok, false);
+  assert.equal(failure.debugRequests.length, 2);
+  assert.equal(Object.keys(partial.storage[CACHE] || {}).length, 0);
+});
+
+test("workload validation rejects unsafe IDs or missing WWB tokens before requesting", async () => {
+  const h = loadBackground();
+  for (const extra of [{ customerId: "../123" }, { customerId: "" }, { authorization: {} }]) {
+    const result = await h.dispatch(request(extra));
+    assert.equal(result.ok, false);
+    assert.deepEqual(result.debugRequests, []);
+  }
+});
+
+test("workloads without a known principal are never persisted or reused across users", async () => {
+  const storage = {};
+  let calls = 0;
+  const h = loadBackground({ storage, fetch: async () => { calls++; return response(page([11])); } });
+  await h.dispatch(request({ principal: "" }));
+  await h.dispatch(request({ principal: "" }));
+  assert.equal(calls, 2);
+  assert.equal(storage[CACHE], undefined);
+});
+
+function content() {
+  let listener;
+  const app = loadApplication("content", {
+    document: { getElementById: () => null }, window: { requestAnimationFrame() {} },
+    chrome: { runtime: { onMessage: { addListener(fn) { listener = fn; } } } }
+  });
+  const calls = [], logs = [];
+  let tokens = 0;
+  app.currentUser.getUserId = () => "user@example.invalid";
+  app.authContentSession.requestConsumerTokenServiceOnce = async () => { tokens++; return { workloadActions: { value: "wwb" } }; };
+  app.debugContentLog.appendBackgroundRequestLog = entries => logs.push(...(entries || []));
+  app.platformContentMessages.sendRuntimeMessage = message => {
+    if (message.type !== TYPE) return Promise.resolve({ ok: true });
+    return new Promise(resolve => calls.push({ message: plain(message), resolve }));
+  };
+  app.productsContentJobs.ensureProductsBackgroundMessageHandler();
+  const start = opportunities => {
+    app.productsContentJobs.requestOpptyProductsInBackground(opportunities, "fusion-token");
+    return app.productsContentState.currentProductsRequestId;
+  };
+  const progress = (id, number, items, fromCache = false) => listener({ type: "opportunitiesExtension.opptyProductsProgress",
+    requestId: id, optyNumber: number, items, fromCache, state: "running" });
+  return { app, calls, logs, start, progress, tokens: () => tokens };
+}
+const opportunity = (OptyNumber, PartyId) => ({ OptyNumber, CustomerAccount: { PartyId } });
+
+for (const productsFirst of [true, false]) {
+  test(`accounts deduplicate independently of filters; products-first=${productsFirst} joins by account and RevnId`, async () => {
+    const h = content();
+    h.app.preferencesState.opptyProductsCacheHours = 12;
+    h.app.opportunitiesFilterState.tableSearch = "hides all opportunities";
+    const id = h.start([opportunity("A", 123), opportunity("B", "123"), opportunity("C", 456),
+      { OptyNumber: "NO_ACCOUNT", PartyId: 999, Owner: { PartyId: 888 } }]);
+    await flush();
+    assert.deepEqual(h.calls.map(call => call.message.customerId), ["123", "456"]);
+    assert.deepEqual(plain(h.app.productsContentState.workloadCustomerIds), ["123", "456"]);
+    assert.equal(h.tokens(), 1);
+    assert.equal(h.calls[0].message.authorization.value, "wwb");
+    assert.equal(h.calls[0].message.cacheMaxAgeMs, 12 * 3600000);
+    assert.equal(h.calls[0].message.principal, "user@example.invalid");
+    const original = { RevnId: 11, Name: "Original product" };
+    function products() {
+      h.progress(id, "A", [original, { RevnId: "999" }]);
+      h.progress(id, "B", [{ RevnId: "12" }], true);
+      h.progress(id, "C", [{ RevnId: 11 }, { RevnId: 22 }]);
+    }
+    if (productsFirst) products();
+    h.calls[0].resolve({ ok: true, ...page([11, 12]), cachedAt: 100, fromCache: true, debugRequests: [{ name: "requestWorkloads" }] });
+    h.calls[1].resolve({ ok: true, ...page([22]), cachedAt: 200 });
+    await flush();
+    if (!productsFirst) products();
+    const results = h.app.productsContentState.opptyProductsByNumber;
+    assert.equal(results.get("A").items[0].workload.id, 11);
+    assert.equal(results.get("A").items[0].Name, "Original product");
+    assert.equal(original.workload, undefined, "do not mutate raw product responses or their cache");
+    assert.equal(results.get("A").items[1].workload, null);
+    assert.equal(results.get("B").items[0].workload.id, 12);
+    assert.equal(results.get("B").fromCache, true);
+    assert.equal(results.get("C").items[0].workload, null, "never join a workload from another account");
+    assert.equal(results.get("C").items[1].workload.id, 22);
+    assert.equal(h.app.productsContentState.workloadsByCustomer.get("123").fromCache, true);
+    assert.equal(h.logs.length, 1);
+  });
+}
+
+test("workload queue limits concurrency to four and ignores a superseded Reference", async () => {
+  const h = content();
+  h.start(Array.from({ length: 9 }, (_, i) => opportunity(`A${i}`, i + 1)));
+  await flush();
+  assert.equal(h.calls.length, 4);
+  h.app.opportunitiesQueryState.periodRequestVersion++;
+  const id = h.start([opportunity("NEW", 100)]);
+  await flush();
+  assert.equal(h.calls.length, 5);
+  for (const call of h.calls.slice(0, 4)) call.resolve({ ok: true, ...page([11]) });
+  await flush();
+  assert.equal(h.calls.length, 5, "do not continue accounts from the old Reference");
+  assert.deepEqual([...h.app.productsContentState.workloadsByCustomer.keys()], ["100"]);
+  h.calls[4].resolve({ ok: true, ...page([22]) });
+  await flush();
+  h.progress(id, "NEW", [{ RevnId: 22 }]);
+  assert.equal(h.app.productsContentState.opptyProductsByNumber.get("NEW").items[0].workload.id, 22);
+});
+
+test("one failed account does not block other accounts or discard products", async () => {
+  const h = content();
+  const id = h.start([opportunity("A", 123), opportunity("B", 456)]);
+  await flush();
+  h.progress(id, "A", [{ RevnId: 11 }]);
+  h.calls[0].resolve({ ok: false, error: "Synthetic failure", debugRequests: [{ name: "requestWorkloads", httpStatus: 403 }] });
+  h.calls[1].resolve({ ok: true, ...page([22]) });
+  await flush();
+  assert.equal(h.app.productsContentState.workloadsByCustomer.get("123").status, "error");
+  assert.equal(h.app.productsContentState.workloadsByCustomer.get("456").status, "ready");
+  assert.equal(h.app.productsContentState.opptyProductsByNumber.get("A").items.length, 1);
+  assert.equal(h.logs[0].httpStatus, 403);
+});
+
+test("no accounts skips authentication, and failed authentication settles workload states", async () => {
+  const h = content();
+  h.start([]);
+  await flush();
+  assert.equal(h.tokens(), 0);
+  h.app.authContentSession.requestConsumerTokenServiceOnce = async () => { throw new Error("Session unavailable"); };
+  h.start([opportunity("A", 123)]);
+  await flush();
+  assert.equal(h.calls.length, 0);
+  assert.equal(h.app.productsContentState.workloadsByCustomer.get("123").error, "Session unavailable");
+});