.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
      border-color: var(--clr-8) !important;
      box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(99 199 151 / 60%) !important;
    }
    .ck.ck-balloon-panel.ck-powered-by-balloon[class*=position_border]{
      border: 1px solid var(--clr-8) !important;
    }
    .wizard-header{
      background-color:var(--clr-6);
      color:var(--clr-white);
      font-weight: 800;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
  }
  /* ---- Theme tokens & fallbacks ---- */
  .wiz-wrap{
    --card-radius: 14px;
    --hero-a: var(--clr-6);
    --hero-b: var(--clr-8);
    --ink-1: #1f2937;
    --ink-2: #334155;
    --ink-3: #64748b;
    --line:  #e5e7eb;
    --surface: #fff;
    --wizard-sticky-offset: 80px; /* adjust to your fixed header height */
  }


  /* ---- Hero banner ---- */
  .wiz-hero{
    background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
    color: #fff;
    border-radius: var(--card-radius);
    padding: clamp(14px, 1.5vw, 18px);
    box-shadow: var(--soft-shadow);
    position: relative;
    overflow: hidden;
  }
  .wiz-hero h1{
    margin: 0 0 6px;
    font-weight: 800;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    letter-spacing: .2px;
  }
  .wiz-hero p{ margin: 0; opacity: .95; }
  .wiz-hero::after{
    content:"";
    position:absolute; inset:auto -20% -40% -20%;
    height:140%; border-radius:50%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 60%);
    filter: blur(30px);
    pointer-events:none;
  }

  /* ---- Sticky stepper ---- */
  .wizard-sticky{
    position: sticky;
    top: var(--wizard-sticky-offset);
    z-index: 0; /* above content, below modals */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: var(--soft-shadow);
    overflow: clip;
  }
  .wizard-sticky-inner{ padding: .5rem .75rem; }

  /* Optional progress rail (expects {{ wizard_progress }} 0–100) */
  .wizard-progress{
    height: 3px;
    background: var(--line);
  }
  .wizard-progress > .bar{
    width: {{ wizard_progress|default:"0" }}%;
    height: 100%;
    background: var(--bs-primary);
    transition: width .3s ease;
  }

  /* ---- Body / card ---- */
  .eb-card{
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: var(--soft-shadow);
  }
  .eb-card header{
    padding: 1rem 1.25rem .75rem;
  }
  .eb-card .eb-card-body{ padding: 1.25rem; }

  /* ---- Loading overlay ---- */
  .interactive-form-container{ position: relative; min-height: 220px; }
  .interactive-form-spinner{
    position: absolute; inset: 0; display: grid; place-items: center;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
    border-radius: var(--card-radius);
  }
  .is-loading .interactive-form-spinner{ opacity: 1; visibility: visible; }

  /* ---- Form tweaks ---- */
  .signup .form-control, .signup .form-select{ border-radius: .8rem; }
  .signup .form-text{ color: var(--ink-3); }
  .form-actions{ gap: .75rem; }

  /* ---- Utilities ---- */
  .hr-soft{ border:0; height:1px; background: var(--line); margin: .75rem 0 1rem; }

  .ck.ck-content.ck-editor__editable {
    min-height: 150px !important;
}

  @media (max-width: 576px){
    .eb-card .eb-card-body{ 
      padding: 0px 0px 1rem 0px !important; 
    }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }