/* PRO_SAVE_LOAD_001D_READINESS_UI_HOTFIX_20260702 */
.pro-update-loading[hidden],
.pro-update-facts[hidden],
.pro-update-explainer[hidden],
.pro-update-error[hidden] { display: none !important; }

.pro-canvas-loaded-update {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 10px 14px 0;
  padding: 13px 15px;
  border: 1px solid rgba(245, 158, 11, .30);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(255, 255, 255, .88));
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.74);
}
.pro-canvas-loaded-update[hidden] { display: none !important; }
.pro-canvas-loaded-update > div:first-child { min-width: 0; }
.pro-canvas-loaded-update span { display: block; color: #9a5b06; font-size: 9px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.pro-canvas-loaded-update strong { display: block; margin-top: 2px; color: #10213d; font-size: 14px; font-weight: 950; }
.pro-canvas-loaded-update em,
.pro-canvas-loaded-update small { display: block; margin-top: 2px; color: #5f6f84; font-size: 10.5px; font-style: normal; font-weight: 720; }
.pro-canvas-loaded-update small { color: #b42318; }
.pro-canvas-loaded-update.is-current {
  grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.6fr) auto;
  border-color: rgba(16, 185, 129, .28);
  background: linear-gradient(135deg, rgba(236, 253, 245, .97), rgba(255,255,255,.90));
}
.pro-canvas-loaded-update.is-current span { color: #087f5b; }
.pro-update-comparison { display: grid; grid-template-columns: repeat(4, minmax(78px, 1fr)); gap: 8px; }
.pro-update-comparison > div { padding: 8px 10px; border: 1px solid rgba(16, 185, 129, .14); border-radius: 12px; background: rgba(255,255,255,.72); }
.pro-update-comparison span { color: #64748b; font-size: 8px; letter-spacing: .10em; }
.pro-update-comparison strong { font-size: 13px; }
.pro-update-comparison em { font-size: 8.5px; }
.pro-update-overlay { position: fixed; inset: 0; z-index: 24000; display: grid; place-items: center; padding: 24px; background: rgba(8, 18, 38, .52); backdrop-filter: blur(12px) saturate(130%); }
.pro-update-overlay[hidden] { display: none !important; }
.pro-update-dialog { width: min(720px, calc(100vw - 34px)); max-height: min(760px, calc(100vh - 34px)); overflow: auto; border: 1px solid rgba(99,125,255,.26); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,248,255,.94)); box-shadow: 0 34px 88px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.9); }
.pro-update-head { display: flex; justify-content: space-between; gap: 18px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(99,125,255,.14); }
.pro-update-head span { color: #4864b6; font-size: 9px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.pro-update-head h2 { margin: 3px 0 2px; color: #10213d; font-size: 24px; line-height: 1.1; }
.pro-update-head p { margin: 0; color: #5d7088; font-size: 11.5px; font-weight: 680; }
.pro-update-close { width: 38px; height: 38px; border: 1px solid rgba(239, 68, 68, .22); border-radius: 12px; color: #b42318; background: rgba(255, 241, 242, .9); font-size: 24px; line-height: 1; cursor: pointer; }
.pro-update-body { display: grid; gap: 14px; padding: 20px 22px; }
.pro-update-loading { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 14px; border: 1px solid rgba(59,130,246,.20); border-radius: 16px; background: rgba(239,246,255,.80); color: #1d3f86; }
.pro-update-loading > span { width: 18px; height: 18px; border: 2px solid rgba(59,130,246,.25); border-top-color: #2563eb; border-radius: 999px; animation: proUpdateSpin .8s linear infinite; }
@keyframes proUpdateSpin { to { transform: rotate(360deg); } }
.pro-update-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pro-update-facts > div { padding: 13px; border: 1px solid rgba(99,125,255,.16); border-radius: 15px; background: rgba(255,255,255,.78); }
.pro-update-facts span { display: block; color: #6b7f99; font-size: 8.5px; font-weight: 900; letter-spacing: .10em; text-transform: uppercase; }
.pro-update-facts strong { display: block; margin-top: 4px; color: #10213d; font-size: 16px; }
.pro-update-facts em { display: block; margin-top: 2px; color: #61728a; font-size: 9px; font-style: normal; }
.pro-update-explainer { padding: 15px 16px; border-left: 5px solid #4f8df7; border-radius: 15px; background: linear-gradient(135deg, rgba(239,246,255,.92), rgba(245,243,255,.86)); }
.pro-update-explainer strong { color: #173c80; }
.pro-update-explainer p { margin: 4px 0 0; color: #4b607a; font-size: 11px; line-height: 1.45; }
.pro-update-error { padding: 13px 15px; border: 1px solid rgba(239,68,68,.22); border-radius: 14px; background: rgba(255,241,242,.92); }
.pro-update-error strong,
.pro-update-error span { display: block; color: #9f1239; }
.pro-update-error span { margin-top: 3px; font-size: 10.5px; }
.pro-update-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px 20px; border-top: 1px solid rgba(99,125,255,.12); }
@media (max-width: 1050px) {
  .pro-canvas-loaded-update.is-current { grid-template-columns: 1fr auto; }
  .pro-update-comparison { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 720px) {
  .pro-canvas-loaded-update, .pro-canvas-loaded-update.is-current { grid-template-columns: 1fr; }
  .pro-update-comparison, .pro-update-facts { grid-template-columns: repeat(2, 1fr); }
  .pro-update-actions { flex-direction: column-reverse; }
  .pro-update-actions .pro-ui-button { width: 100%; }
}