/* ── CSS VARIABLES ─────────────────────────────── */
    :root {
      --wb-red:       #B91C22;
      --wb-red-light: #fef2f2;
      --wb-red-border:#fecaca;
      --wb-orange:    #C45516;
      --wb-green:     #15803d;
      --wb-green-light:#f0fdf4;
      --wb-blue:      #1d4ed8;
      --wb-radius:    12px;
      --wb-shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
      --wb-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    }

    /* ── SKIP LINK ──────────────────────────────────── */
    .wb-skip-link {
      position:absolute; left:-9999px; top:1rem; z-index:9999;
      background:var(--wb-red); color:#fff; padding:.5rem 1rem;
      border-radius:6px; font-size:.875rem; font-weight:500;
      text-decoration:none;
    }
    .wb-skip-link:focus { left:1rem; }

    /* ── APP SHELL ──────────────────────────────────── */
    .wb-app-shell {
      max-width: 1100px;
      width: 100%;
      margin: 2rem auto;
      padding: 0 1.5rem 3rem;
    }

    /* On wider screens, split the configuration card into two balanced
       columns so the dashboard fills the available width and reads like a
       desktop app rather than a tall, narrow mobile column. */
    @media (min-width: 900px) {
      #screen-config .wb-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        align-items: start;
      }
      /* neutralise the vertical-stack spacing inside the grid */
      #screen-config .wb-card.space-y-4 > * + * { margin-top: 0; }
      #screen-config .wb-card > * { margin-bottom: 1rem; }

      /* elements that should stretch across both columns */
      #screen-config .wb-card > .wb-examples-block,
      #screen-config .wb-card > .wb-design-block,
      #screen-config .wb-card > hr.wb-divider,
      #screen-config .wb-card > .wb-btn-primary,
      #screen-config .wb-card > .wb-alert {
        grid-column: 1 / -1;
      }

      /* full-width example gallery: larger cards filling the whole row */
      #screen-config .wb-examples-block .wb-examples-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: .75rem;
      }
      #screen-config .wb-examples-block .wb-example-card {
        padding: 1.25rem 1.1rem;
      }
      #screen-config .wb-examples-block .wb-example-icon {
        font-size: 1.75rem;
        margin-bottom: .5rem;
      }
      #screen-config .wb-examples-block .wb-example-name {
        font-size: .9rem;
      }
      #screen-config .wb-examples-block .wb-example-desc {
        font-size: .75rem;
        margin-top: .3rem;
      }
    }

    /* ── BRAND HEADER ───────────────────────────────── */
    /* Bold gradient banner so it stands out from the page background. */
    .wb-brand-header {
      margin-bottom: 1.25rem;
      padding: 1.1rem 1.35rem;
      border-radius: 16px;
      background: linear-gradient(120deg, #7f1014 0%, var(--wb-red) 45%, var(--wb-orange) 100%);
      box-shadow: 0 8px 24px rgba(185, 28, 34, .28);
      position: relative;
      overflow: hidden;
      color: #fff;
    }
    /* subtle decorative glow */
    .wb-brand-header::after {
      content: "";
      position: absolute;
      top: -40%; right: -5%;
      width: 220px; height: 220px;
      background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
      pointer-events: none;
    }
    .wb-brand-header > * { position: relative; z-index: 1; }
    /* override the inline/utility colours so text reads on the gradient */
    .wb-brand-header h1 { color: #fff !important; letter-spacing: -.01em; }
    .wb-brand-header p  { color: rgba(255,255,255,.85) !important; }
    /* the round "AI" badge becomes a frosted chip */
    .wb-brand-header > div:first-child {
      background: rgba(255,255,255,.18) !important;
      border: 1px solid rgba(255,255,255,.35);
      backdrop-filter: blur(4px);
      width: 2.75rem; height: 2.75rem;
      font-size: .85rem; letter-spacing: .03em;
    }
    /* cost pill sits on the dark banner */
    .wb-brand-header .wb-cost-pill {
      background: rgba(255,255,255,.15);
      border-color: rgba(255,255,255,.4);
      color: #fff;
    }

    /* ── STEPPER ────────────────────────────────────── */
    /* Distinct light card so the progress track separates from the page. */
    .wb-stepper {
      margin-bottom: 1.5rem;
      padding: .85rem 1.1rem;
      background: #fff;
      border: 1px solid #fde2e2;
      border-radius: 14px;
      box-shadow: 0 2px 10px rgba(17, 24, 39, .06);
    }
    /* make the step circles a touch bigger and add a ring on the active one */
    .wb-stepper [aria-current="step"] {
      box-shadow: 0 0 0 4px rgba(185, 28, 34, .18);
    }
    /* connector lines tinted toward the brand colour */
    .wb-stepper .bg-gray-200 { background: #f1d5d6 !important; }

    /* ── SCREENS ────────────────────────────────────── */
    .wb-screen { display: none; }
    .wb-screen.active { display: block; }

    /* ── CARD ───────────────────────────────────────── */
    .wb-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: var(--wb-radius);
      box-shadow: var(--wb-shadow);
      padding: 1.25rem;
    }

    /* ── SELECT BUTTONS (mode, font, theme, mood, provider, output) ── */
    .wb-select-btn, .wb-font-btn, .wb-theme-btn,
    .wb-mood-btn, .wb-provider-btn, .wb-output-btn {
      background: #fff; border: 1px solid #e5e7eb;
      border-radius: 8px; cursor: pointer;
      transition: border-color .15s, background .15s, color .15s;
      color: #6b7280; font-size: .75rem;
    }
    .wb-select-btn.active, .wb-font-btn.active, .wb-theme-btn.active,
    .wb-mood-btn.active, .wb-provider-btn.active, .wb-output-btn.active {
      border-color: var(--wb-red); color: var(--wb-red);
      background: var(--wb-red-light); font-weight: 500;
    }
    .wb-select-btn:hover:not(.active), .wb-font-btn:hover:not(.active),
    .wb-theme-btn:hover:not(.active), .wb-mood-btn:hover:not(.active),
    .wb-provider-btn:hover:not(.active), .wb-output-btn:hover:not(.active) {
      border-color: #d1d5db; color: #374151;
    }

    /* ── COLOUR SWATCHES ───────────────────────────── */
    .wb-swatch {
      width: 28px; height: 28px; border-radius: 50%;
      border: 2px solid transparent; cursor: pointer;
      transition: transform .12s, border-color .12s;
      flex-shrink: 0;
    }
    .wb-swatch:hover { transform: scale(1.15); }
    .wb-swatch.active { border-color: #1f2937; transform: scale(1.1); }

    /* ── PAGE CHECKBOXES ───────────────────────────── */
    .wb-page-check {
      background: #fff; border: 1px solid #e5e7eb;
      border-radius: 8px; cursor: pointer;
      transition: border-color .15s, background .15s;
      color: #6b7280;
    }
    .wb-page-check.checked {
      border-color: var(--wb-red); background: var(--wb-red-light); color: var(--wb-red);
    }
    .wb-page-check input { accent-color: var(--wb-red); }

    /* ── CUSTOM PAGE INPUT ─────────────────────────── */
    .wb-custom-page-row {
      display: flex; gap: .5rem; align-items: center; margin-top: .5rem;
    }
    .wb-custom-page-row input {
      flex: 1; border: 1px solid #e5e7eb; border-radius: 8px;
      font-size: .75rem; padding: .4rem .75rem;
    }
    .wb-custom-page-row button {
      background: var(--wb-red); color: #fff; border: none;
      border-radius: 8px; font-size: .75rem; padding: .4rem .75rem;
      cursor: pointer; white-space: nowrap;
    }
    .wb-custom-tag {
      display: inline-flex; align-items: center; gap: .3rem;
      background: var(--wb-red-light); border: 1px solid var(--wb-red-border);
      color: var(--wb-red); font-size: .7rem; padding: .25rem .6rem;
      border-radius: 20px; margin: .25rem .25rem 0 0;
    }
    .wb-custom-tag button {
      background: none; border: none; cursor: pointer;
      color: var(--wb-red); font-size: .8rem; padding: 0; line-height: 1;
    }

    /* ── FORM INPUTS ───────────────────────────────── */
    .wb-input, .wb-textarea {
      width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
      font-size: .875rem; padding: .625rem .75rem; font-family: inherit;
      transition: border-color .15s;
      box-sizing: border-box;
    }
    .wb-input:focus, .wb-textarea:focus {
      outline: none; border-color: var(--wb-red);
      box-shadow: 0 0 0 3px rgba(185,28,34,.1);
    }
    .wb-textarea { resize: vertical; }

    /* ── PRIMARY BUTTON ─────────────────────────────── */
    .wb-btn-primary {
      width: 100%; padding: .7rem 1.5rem;
      background: var(--wb-red); color: #fff;
      border: none; border-radius: 10px;
      font-size: .9rem; font-weight: 600;
      cursor: pointer; transition: opacity .15s, transform .1s;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
    }
    .wb-btn-primary:hover:not(:disabled) { opacity: .9; }
    .wb-btn-primary:active:not(:disabled) { transform: scale(.99); }
    .wb-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
    .wb-btn-primary.green { background: var(--wb-green); }

    /* ── COST ESTIMATOR ─────────────────────────────── */
    .wb-cost-pill {
      display: inline-flex; align-items: center; gap: .35rem;
      background: #f0fdf4; border: 1px solid #bbf7d0;
      color: #15803d; font-size: .7rem; font-weight: 500;
      padding: .25rem .75rem; border-radius: 20px;
    }

    /* ── EXAMPLE GALLERY ────────────────────────────── */
    .wb-examples-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
    }
    @media (min-width: 640px) {
      .wb-examples-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .wb-example-card {
      border: 1px solid #e5e7eb; border-radius: 10px;
      padding: .75rem; cursor: pointer; text-align: left;
      background: #fff; transition: border-color .15s, box-shadow .15s;
    }
    .wb-example-card:hover {
      border-color: var(--wb-red); box-shadow: var(--wb-shadow-md);
    }
    .wb-example-icon { font-size: 1.25rem; margin-bottom: .25rem; display: block; }
    .wb-example-name { font-size: .75rem; font-weight: 600; color: #111827; }
    .wb-example-desc { font-size: .65rem; color: #6b7280; margin-top: .15rem; }

    /* ── PROMPT ENHANCER ────────────────────────────── */
    /* WCAG 2.0: solid accent fill with white text gives a contrast ratio of
       ~6.5:1 (well above the 4.5:1 minimum for normal text), and a clearly
       visible non-colour focus indicator for keyboard users. */
    .wb-enhance-btn {
      background: var(--wb-red); border: 1px solid var(--wb-red);
      border-radius: 6px; font-size: .7rem; font-weight: 600;
      color: #fff; padding: .3rem .7rem;
      cursor: pointer;
      transition: background .15s, border-color .15s, box-shadow .15s;
      display: inline-flex; align-items: center; gap: .3rem;
    }
    .wb-enhance-btn:hover { background: #9a161b; border-color: #9a161b; }
    .wb-enhance-btn:focus-visible {
      outline: 3px solid #fff;
      box-shadow: 0 0 0 3px var(--wb-red), 0 0 0 5px rgba(185,28,34,.4);
    }
    .wb-enhance-btn.loading { opacity: .6; pointer-events: none; }

    /* ── MODEL SELECTOR ─────────────────────────────── */
    .wb-model-select {
      width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
      font-size: .8rem; padding: .5rem .75rem; font-family: inherit;
      background: #fff; cursor: pointer;
    }

    /* ── PROGRESS SCREEN ────────────────────────────── */
    .wb-progress-bar-track {
      height: 8px; background: #f3f4f6; border-radius: 9999px; overflow: hidden;
    }
    .wb-progress-fill {
      height: 100%; background: var(--wb-red);
      border-radius: 9999px; transition: width .6s ease;
    }

    /* ── PHASE STEPS ─────────────────────────────────── */
    .wb-phases {
      display: flex; gap: .25rem; margin: 1rem 0; flex-wrap: wrap;
    }
    .wb-phase-step {
      flex: 1; min-width: 60px; background: #f9fafb;
      border: 1px solid #e5e7eb; border-radius: 6px;
      padding: .4rem .5rem; font-size: .65rem; text-align: center;
      color: #9ca3af; transition: all .3s;
    }
    .wb-phase-step.active {
      background: #fff7f7; border-color: var(--wb-red);
      color: var(--wb-red); font-weight: 600;
    }
    .wb-phase-step.done {
      background: var(--wb-green-light); border-color: #86efac;
      color: var(--wb-green); font-weight: 600;
    }

    /* ── AGENT STRIP ──────────────────────────────────── */
    .wb-agent-row {
      display: flex; align-items: center; gap: .6rem;
      padding: .4rem .5rem; border-radius: 8px;
      font-size: .75rem; transition: background .2s;
    }
    .wb-agent-row.running { background: #fff7f7; }
    .wb-agent-row.done    { background: var(--wb-green-light); }
    .wb-agent-row.error   { background: #fef2f2; }
    .wb-agent-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #d1d5db; flex-shrink: 0; transition: background .3s;
    }
    .wb-agent-row.running .wb-agent-dot {
      background: var(--wb-orange);
      animation: wb-pulse 1.2s ease-in-out infinite;
    }
    .wb-agent-row.done .wb-agent-dot    { background: var(--wb-green); }
    .wb-agent-row.error .wb-agent-dot   { background: #dc2626; }
    @keyframes wb-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.5; transform:scale(1.4); }
    }
    .wb-agent-name  { font-weight: 500; color: #374151; flex: 1; }
    .wb-agent-status{ font-size: .65rem; color: #9ca3af; }
    .wb-agent-row.running .wb-agent-status { color: var(--wb-orange); }
    .wb-agent-row.done    .wb-agent-status { color: var(--wb-green); }

    /* ── BRAND BRIEF PREVIEW ─────────────────────────── */
    .wb-brief-preview {
      background: #f9fafb; border: 1px solid #e5e7eb;
      border-radius: 10px; padding: .75rem; margin-top: .75rem;
      display: none;
    }
    .wb-brief-preview.visible { display: block; }
    .wb-swatch-row { display: flex; gap: .4rem; margin-top: .25rem; }
    .wb-swatch-mini {
      width: 20px; height: 20px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,.1);
    }

    /* ── ACTIVITY LOG ────────────────────────────────── */
    .wb-log {
      max-height: 160px; overflow-y: auto;
      border: 1px solid #e5e7eb; border-radius: 8px;
      background: #f9fafb; padding: .5rem;
    }
    .wb-log-item {
      display: flex; gap: .5rem; align-items: flex-start;
      padding: .3rem 0; border-bottom: 1px solid #f3f4f6; font-size: .7rem;
    }
    .wb-log-item:last-child { border-bottom: none; }
    .wb-log-avatar {
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .55rem; font-weight: 600; color: #fff; flex-shrink: 0;
    }
    .wb-log-content { flex: 1; }
    .wb-log-agent   { font-weight: 500; color: #374151; }
    .wb-log-msg     { color: #6b7280; }
    .wb-log-time    { font-size: .6rem; color: #9ca3af; flex-shrink: 0; }

    /* ── ERROR CARD ──────────────────────────────────── */
    .wb-error-card {
      background: #fef2f2; border: 1px solid #fecaca;
      border-radius: 8px; padding: .75rem; display: none; margin-top: .75rem;
    }
    .wb-error-card.visible { display: block; }
    .wb-retry-btn {
      background: var(--wb-red); color: #fff; border: none;
      border-radius: 6px; font-size: .7rem; padding: .35rem .75rem;
      cursor: pointer; margin-top: .5rem;
    }

    /* ── DOWNLOAD SCREEN ─────────────────────────────── */
    .wb-output-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
      margin-bottom: 1rem;
    }
    @media (min-width:480px) { .wb-output-grid { grid-template-columns: repeat(4, 1fr); } }
    .wb-output-card {
      background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
      padding: .75rem; text-align: center;
    }
    .wb-output-card .wb-output-icon { font-size: 1.25rem; display: block; margin-bottom: .25rem; }
    .wb-output-card .wb-output-name { font-size: .7rem; font-weight: 600; color: #1f2937; }
    .wb-output-card .wb-output-sub  { font-size: .65rem; color: #6b7280; }

    /* ── QA SUMMARY ──────────────────────────────────── */
    .wb-qa-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: .4rem 0; border-bottom: 1px solid #f3f4f6; font-size: .75rem;
    }
    .wb-qa-row:last-child { border-bottom: none; }
    .wb-badge-pass {
      background: var(--wb-green-light); color: var(--wb-green);
      border: 1px solid #bbf7d0; font-size: .65rem;
      padding: .15rem .5rem; border-radius: 20px; font-weight: 600;
    }
    .wb-badge-warn {
      background: #fffbeb; color: #92400e;
      border: 1px solid #fde68a; font-size: .65rem;
      padding: .15rem .5rem; border-radius: 20px; font-weight: 600;
    }

    /* ── DEPLOY BUTTONS ──────────────────────────────── */
    .wb-deploy-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
    }
    .wb-deploy-btn {
      background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
      padding: .6rem .5rem; font-size: .7rem; text-align: center;
      cursor: pointer; transition: border-color .15s, background .15s;
      color: #374151;
    }
    .wb-deploy-btn:hover { border-color: var(--wb-red); background: var(--wb-red-light); }
    .wb-deploy-icon { font-size: 1rem; display: block; margin-bottom: .2rem; }

    /* ── DIVIDERS ────────────────────────────────────── */
    .wb-divider {
      border: none; border-top: 1px solid #f3f4f6; margin: .75rem 0;
    }

    /* ── SECTION LABEL ───────────────────────────────── */
    .wb-section-label {
      font-size: .7rem; font-weight: 500; color: #9ca3af;
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: .5rem; display: block;
    }

    /* ── ALERT / INFO ────────────────────────────────── */
    .wb-alert {
      display: flex; gap: .5rem; padding: .6rem .75rem;
      border-radius: 8px; font-size: .75rem;
    }
    .wb-alert.info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
    .wb-alert.success { background:var(--wb-green-light); border:1px solid #bbf7d0; color:var(--wb-green); }
    .wb-alert.danger  { background:var(--wb-red-light); border:1px solid var(--wb-red-border); color:#991b1b; }

    /* ── CONFETTI ────────────────────────────────────── */
    .wb-confetti-container {
      position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden;
    }
    .wb-confetti-piece {
      position: absolute; width: 8px; height: 8px; opacity: 0;
      animation: wb-confetti-fall 2.5s ease-in forwards;
    }
    @keyframes wb-confetti-fall {
      0%   { opacity:1; transform:translateY(-20px) rotate(0deg); }
      100% { opacity:0; transform:translateY(100vh) rotate(720deg); }
    }

    /* ── GRID HELPERS (dashboard-scoped) ─────────────── */
    /* The compiled Tailwind build only ships grid-cols-1, so define the
       multi-column variants used by the dashboard here. */
    .wb-app-shell .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wb-app-shell .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wb-app-shell .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    @media (min-width: 640px) {
      .wb-app-shell .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ── UTILITY ─────────────────────────────────────── */
    /* Scoped to the dashboard shell only. A global `.hidden { !important }`
       would override Tailwind's responsive `md:flex`/`md:block` utilities and
       permanently hide the site's top navigation links. Keeping it scoped lets
       the dashboard's own JS toggling keep working without breaking the header. */
    .wb-app-shell .hidden { display: none !important; }
    .sr-only {
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); border:0;
    }
    .space-y-4 > * + * { margin-top: 1rem; }
    .space-y-3 > * + * { margin-top: .75rem; }
    .space-y-2 > * + * { margin-top: .5rem; }
    .space-y-1 > * + * { margin-top: .25rem; }

    /* ── PHOTO UPLOADS (Your photos section) ───────────── */
    .wb-add-photos-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px; font-size: .75rem; font-weight: 500;
      color: #374151; background: #fff; cursor: pointer;
      border: 2px dashed #d1d5db; border-radius: 8px;
      transition: border-color .15s, color .15s;
    }
    .wb-add-photos-btn:hover { border-color: var(--wb-red); color: var(--wb-red); }
    .wb-asset-row {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; font-size: .75rem;
      border: 1px solid #e5e7eb; border-radius: 8px; background: #f9fafb;
    }
    .wb-asset-name {
      flex: 1; min-width: 0; color: #374151;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wb-asset-label-input {
      width: 130px; flex-shrink: 0; padding: 3px 8px; font-size: .7rem;
      border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    }
    .wb-asset-label-input:focus { outline: 2px solid var(--wb-red); outline-offset: 1px; }
    .wb-asset-remove {
      flex-shrink: 0; border: none; background: none; cursor: pointer;
      color: #9ca3af; font-size: 1rem; line-height: 1; padding: 2px 4px;
    }
    .wb-asset-remove:hover { color: #dc2626; }