/* Dirty-check modal overlay */
  .dirty-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3,0,15,0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }
  .dirty-overlay.active { display: flex; }
  .dirty-modal {
    background: var(--color-grey-900);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 36px var(--spacing-5);
    max-width: 440px;
    width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .dirty-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--color-core-2), var(--color-core-1));
  }
  .dirty-modal-icon { font-size: 38px; margin-bottom: 14px; }
  .dirty-modal-title { font-size: 18px; font-weight: 800; color: white; margin-bottom: var(--spacing-1); }
  .dirty-modal-body  { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 28px; }
  .dirty-modal-btns  { display: flex; gap: 12px; justify-content: center; }
  .dirty-btn-save {
    padding: 8px 16px; border: 2px solid transparent; border-radius: 9999px; cursor: pointer;
    background-color: #000000;
    color: #ffffff; font-family: sans-serif; font-size: 14px; font-weight: 600;
    transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
  }
  .dirty-btn-save:hover { background-color: #d1d1d1; color: #000000; }
  .dirty-btn-discard {
    padding: 8px 16px; border: 2px solid #ffffff; border-radius: 9999px;
    cursor: pointer; background: transparent; color: #ffffff;
    font-family: sans-serif; font-size: 14px; font-weight: 600; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .dirty-btn-discard:hover { background-color: rgba(255,255,255,0.1); }
  .dirty-btn-cancel {
    padding: 8px 16px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
    cursor: pointer; background: transparent; color: rgba(255,255,255,0.5);
    font-family: sans-serif; font-size: 14px; font-weight: 600; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .dirty-btn-cancel:hover { color: white; border-bottom-color: white; }

  /* Floating save button (per-page, bottom-right) */
  .floating-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    background-color: #000000;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
  }
  .floating-save:hover { background-color: #d1d1d1; color: #000000; }
  /* Tactile press feedback */
  .floating-save:active { transform: scale(0.94); }

  /* Save confirmation animation — flashed on the button after a successful save
     (added/removed by saveProgress()) so every page's Save button gives the same
     visible feedback, including Use Case -> Solution Mapping (page 5). */
  @keyframes floatingSavePulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(22,163,74,0.55); background-color: #16a34a; color:#fff; }
    40%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(22,163,74,0.18); background-color: #16a34a; color:#fff; }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(22,163,74,0);    }
  }
  .floating-save.just-saved {
    animation: floatingSavePulse 0.65s ease;
  }

  /* Unsaved indicator dot on step */
  .step-item.dirty .step-num::after {
    content: '';
    position: absolute;
    top: -2px; right: -2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-warning-dark);
    border: 1.5px solid var(--color-core-3);
  }
  .step-item .step-num { position: relative; }