astro-island,astro-slot,astro-static-slot{display:contents}

  /* ── Outer wrapper — matches qb-wrapper ── */
  .de-wrap {
    padding: 1.25rem;
    border: 1px solid var(--grayscale-a5);
    border-radius: calc(var(--radius) * 2);
    background: var(--grayscale-a3);
    max-width: 900px;
    font-family: var(--font-body);
    box-sizing: border-box;
  }

  .de-stack > * + * { margin-top: 1.25rem; }

  .de-divider { border: none; border-top: 1px solid var(--grayscale-a5); margin: 0; }

  /* ── Labels — match qb-label / qb-label-sm ── */
  .de-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--grayscale-12);
    margin-bottom: 0.5rem;
  }
  .de-hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--grayscale-11);
    margin-top: 0.25rem;
  }

  /* ── Inputs — match qb-input exactly ── */
  .de-input {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--grayscale-a5);
    padding: 0.4375rem 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    background: var(--background);
    color: var(--grayscale-12);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
    box-sizing: border-box;
    outline: none;
  }
  .de-input::placeholder { color: var(--grayscale-11); }
  .de-input:focus { border-color: var(--accent-9); box-shadow: 0 0 0 3px var(--accent-a3); }

  .de-row { display: flex; align-items: center; gap: 0.75rem; }
  .de-row .de-input { flex: 1; }
  .de-col > * + * { margin-top: 0.75rem; }

  /* ── Persona chips — pill toggle group ── */
  .de-persona-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.625rem; }
  .de-persona-chip {
    padding: 0.3125rem 0.75rem;
    font-size: var(--text-sm);
    border-radius: 99px;
    border: 1px solid var(--grayscale-a5);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    background: var(--grayscale-a3);
    color: var(--grayscale-12);
    font-family: var(--font-body);
  }
  .de-persona-chip:hover:not(:disabled) { border-color: var(--accent-9); color: var(--accent-9); background: var(--accent-3); }
  .de-persona-chip.de-active { background: var(--accent-9); border-color: var(--accent-9); color: #fff; }
  .de-persona-chip:disabled { opacity: 0.45; cursor: not-allowed; }

  .de-meta {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--grayscale-11);
    margin-bottom: 0.75rem;
  }

  /* ── Top-level tabs ── */
  .de-tabs { display: flex; gap: 0.5rem; }
  .de-tab {
    padding: 0.4375rem 0.75rem;
    font-size: var(--text-sm);
    border-radius: var(--radius);
    border: 1px solid var(--grayscale-a5);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    background: var(--grayscale-a3);
    color: var(--grayscale-12);
    font-family: var(--font-body);
  }
  .de-tab:hover:not(:disabled) { border-color: var(--accent-9); color: var(--accent-9); background: var(--accent-3); }
  .de-tab.de-active { background: var(--accent-9); border-color: var(--accent-9); color: #fff; }
  .de-tab:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ── Scenario grid ── */
  .de-scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: 0.5rem;
  }
  .de-scenario-btn {
    padding: 0.625rem 0.75rem;
    background: var(--background);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: var(--font-body);
    color: var(--grayscale-12);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .de-scenario-btn:hover:not(:disabled) { border-color: var(--accent-9); background: var(--accent-3); }
  .de-scenario-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .de-scenario-name { font-size: var(--text-sm); font-weight: 600; }
  .de-scenario-meta { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--grayscale-11); }

  /* ── Action grid ── */
  .de-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 0.75rem;
  }
  .de-action-card {
    padding: 0.875rem 1rem;
    background: var(--background);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }
  .de-action-header { display: flex; align-items: center; gap: 0.5rem; }
  .de-action-icon { display: flex; align-items: center; color: var(--grayscale-11); }
  .de-action-title { font-size: var(--text-sm); font-weight: 600; color: var(--grayscale-12); }
  .de-action-desc { font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--grayscale-11); }
  .de-action-count { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); color: var(--grayscale-11); }
  .de-count-input {
    width: 4rem;
    border-radius: var(--radius);
    border: 1px solid var(--grayscale-a5);
    padding: 0.25rem 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    background: var(--grayscale-a3);
    color: var(--grayscale-12);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: var(--font-body);
    box-sizing: border-box;
    outline: none;
    text-align: center;
  }
  .de-count-input:focus { border-color: var(--accent-9); box-shadow: 0 0 0 3px var(--accent-a3); }

  /* ── Buttons — match qb-btn-primary ── */
  .de-btn-primary {
    padding: 0.4375rem 0.875rem;
    background: var(--accent-9);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: var(--font-body);
    width: 100%;
  }
  .de-btn-primary:hover:not(:disabled) { opacity: 0.88; }
  .de-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ── Log — matches qb-pre container style ── */
  .de-log {
    background: var(--grayscale-a3);
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .de-progress-track { height: 2px; background: var(--grayscale-a5); }
  .de-progress-fill { height: 2px; background: var(--accent-9); transition: width 0.4s ease; }
  .de-log-header {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--grayscale-a5);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .de-log-title {
    flex: 1;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--grayscale-11);
    font-family: var(--font-code);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .de-log-clear {
    font-size: var(--text-xs);
    color: var(--grayscale-11);
    background: none;
    border: 1px solid var(--grayscale-a5);
    border-radius: var(--radius);
    padding: 0.1875rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-family: var(--font-body);
  }
  .de-log-clear:hover { border-color: var(--accent-9); color: var(--accent-9); }
  .de-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-9); flex-shrink: 0; }
  .de-pulse.de-active { animation: de-pulse-anim 1s ease-in-out infinite; }
  .de-pulse:not(.de-active) { opacity: 0; }
  @keyframes de-pulse-anim { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
  .de-log-body {
    padding: 0.75rem;
    font-family: var(--font-code);
    font-size: var(--text-xs);
    line-height: 1.625;
    max-height: 16rem;
    overflow-y: auto;
    color: var(--grayscale-12);
  }
  .de-log-body::-webkit-scrollbar { width: 3px; }
  .de-log-body::-webkit-scrollbar-thumb { background: var(--grayscale-a5); border-radius: 2px; }
  .de-log-line { display: flex; gap: 0.75rem; align-items: baseline; }
  .de-log-time { color: var(--grayscale-11); flex-shrink: 0; }
  .de-log-msg.de-success { color: var(--accent-9); }
  .de-log-msg.de-error   { color: var(--red-11, #ce2c31); }
  .de-log-msg.de-warn    { color: var(--grayscale-11); font-style: italic; }
  .de-log-msg.de-dim     { color: var(--grayscale-11); }
  .de-log-msg.de-heading { font-weight: 600; }
  .dark .de-log-msg.de-error { color: var(--red-11, #ff6369); }

  @media (max-width: 640px) {
    .de-action-grid  { grid-template-columns: 1fr 1fr; }
    .de-scenario-grid { grid-template-columns: 1fr 1fr; }
  }