/* Native dialogs keep focus inside the overlay and restore it to the opener. */
dialog.app-dialog-backdrop, dialog.modal-backdrop {
  inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  padding: 24px; border: 0; background: transparent; color: #24334a;
  overflow: hidden; box-sizing: border-box;
}
dialog.app-dialog-backdrop::backdrop, dialog.modal-backdrop::backdrop { background: #101d3277; }
dialog.app-dialog-backdrop:not([open]), dialog.modal-backdrop:not([open]) { display: none; }
.workspace-page .app-dialog-card, .workspace-page #competitorModal .modal-card {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  width: min(520px, 100%); max-height: 100%; min-height: 0; overflow: hidden;
  border: 1px solid #dce3ee; border-radius: var(--brand-card-radius); background: #fff;
  box-shadow: 0 24px 80px color-mix(in srgb,var(--brand-ink) 19%,transparent);
}
.workspace-page #competitorModal .modal-card { width: min(880px, 100%); height: min(760px, 100%); }
.workspace-page .app-dialog-head, .workspace-page #competitorModal .modal-header {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--brand-line);
}
.workspace-page .app-dialog-head h3, .workspace-page #competitorModal h3 { font-size: 1.05rem; color: #24334a; font-weight: 600; letter-spacing: -.025em; margin: 5px 0 0; }
.workspace-page #competitorModal .modal-title p { color: var(--brand-muted); font-size: .78rem; line-height: 1.6; margin: 6px 0 0; }
.workspace-page .app-dialog-close, .workspace-page #competitorModal .icon-button { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--brand-control-radius); border: 1px solid #dce3ee; background: #fff; color: #718099; font-size: .85rem; }
.workspace-page .app-dialog-close:hover, .workspace-page #competitorModal .icon-button:hover { background: #f0f5ff; color: var(--brand-primary); }
.workspace-page .app-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 24px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5cfde transparent; }
.workspace-page .app-dialog-message:not(.hidden) { margin: 0 0 18px; font-size: .8rem; color: var(--brand-muted); line-height: 1.65; }
.workspace-page .app-dialog-field label { font-size: .75rem; color: #4e5f76; }
.workspace-page .app-dialog-field :is(input,select,textarea) { font-size: .82rem; padding: 11px 12px; background: #fff; border-radius: var(--brand-control-radius); }
.workspace-page .app-dialog-field :is(input,select,textarea):focus { border-color: var(--brand-purple); box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand-primary) 7%,transparent); }
.workspace-page .app-dialog-actions, .workspace-page #competitorModal .modal-actions { flex: 0 0 auto; position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; padding: 16px 24px; border-top: 1px solid var(--brand-line); background: var(--brand-canvas); }
.workspace-page .app-dialog-btn, .workspace-page #competitorModal .action-button { border-radius: var(--brand-control-radius); min-height: 40px; padding: 9px 15px; font-size: .78rem; font-weight: 600; border: 1px solid var(--brand-line); color: var(--brand-muted); background: #fff; cursor: pointer; }
.workspace-page .app-dialog-btn.primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.workspace-page .app-dialog-btn.primary:hover { background: var(--brand-primary-hover); }
.workspace-page #competitorModal .competitor-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px; gap: 10px; background: var(--brand-canvas); scrollbar-width: thin; scrollbar-color: #c5cfde transparent; }
.workspace-page .competitor-option { padding: 15px; gap: 10px; border: 1px solid var(--brand-line); border-radius: 10px; background: #fff; cursor: pointer; }
.workspace-page .competitor-option:has(input:checked) { border-color: var(--brand-lavender-line); background: var(--brand-lavender); }
.workspace-page .competitor-option:focus-within { outline: 2px solid var(--brand-purple); outline-offset: 2px; }
.workspace-page .competitor-option input { accent-color: var(--brand-primary); flex: 0 0 auto; }
.workspace-page .competitor-option-head > div { min-width: 0; }
.workspace-page .competitor-option strong { font-size: .85rem; font-weight: 600; color: var(--brand-ink); line-height: 1.5; }
.workspace-page .competitor-option a { font-size: .72rem; color: var(--brand-primary); overflow-wrap: anywhere; }
.workspace-page .competitor-option p { font-size: .75rem; color: var(--brand-muted); line-height: 1.6; margin-top: 5px; }
.workspace-page .competitor-meta { padding-left: 30px; }
.workspace-page .competitor-meta span { border-radius: 5px; font-size: .65rem; background: #edf2f8; }
.competitor-selection-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.competitor-selection-tools span { font-size: .73rem; color: #526b96; margin-right: 8px; }
.competitor-selection-tools button { padding: 5px 9px; background: #fff; border: 1px solid #dce3ee; border-radius: var(--brand-control-radius); color: var(--brand-primary); font-size: .7rem; cursor: pointer; }
@media (max-width: 600px), (max-height: 500px) {
  dialog.app-dialog-backdrop, dialog.modal-backdrop { padding: 12px; }
  .workspace-page .app-dialog-head, .workspace-page #competitorModal .modal-header { padding: 14px 16px; }
  .workspace-page .app-dialog-body, .workspace-page #competitorModal .competitor-grid { padding: 14px 16px; }
  .workspace-page .app-dialog-actions, .workspace-page #competitorModal .modal-actions { padding: 12px 16px; }
  .workspace-page #competitorModal .modal-title p { font-size: .72rem; }
  .competitor-selection-tools { margin-top: 8px; }
}

/* Shared modal system: neutral surfaces, editorial headings and purple actions. */
dialog.app-dialog-backdrop[open] { display:flex; align-items:center; justify-content:center; z-index:250; }
.app-dialog-form,.app-dialog-fields,.app-dialog-field { display:grid; gap:12px; }
.app-dialog-field { gap:7px; }
.app-dialog-field :is(input,select,textarea) { width:100%; box-sizing:border-box; border:1px solid var(--ui-line,var(--brand-line)); font:inherit; color:var(--ui-ink,var(--brand-ink)); }
.app-dialog-field textarea { min-height:110px; resize:vertical; }
.app-dialog-btn.hidden,.app-dialog-message.hidden,.app-dialog-fields.hidden { display:none; }
body.workspace-page .app-dialog-card { border-color:var(--ui-line); border-radius:var(--brand-card-radius); box-shadow:0 24px 80px color-mix(in srgb,var(--brand-ink) 19%,transparent); font-family:Inter,Arial,sans-serif; }
body.workspace-page .app-dialog-head { background:#f9fafc; border-color:var(--ui-line); padding:20px 24px; }
.app-dialog-title-group { display:flex; gap:12px; align-items:center; min-width:0; }
.app-dialog-title-icon { display:grid; place-items:center; width:36px; height:36px; flex-shrink:0; border-radius:8px; background:#ecf1fa; color:#536584; }
.app-dialog-title-icon .sketch-icon { width:23px; height:23px; }
body.workspace-page .app-dialog-head h3 { font-family:Inter,Arial,sans-serif; font-size:1.65rem; font-weight:600; line-height:1.2; color:var(--ui-ink); margin:0; overflow-wrap:anywhere; }
body.workspace-page .app-dialog-message:not(.hidden) { color:var(--ui-muted); font-size:.81rem; line-height:1.7; white-space:pre-wrap; }
body.workspace-page .app-dialog-field label { color:var(--ui-ink); font-size:.78rem; font-weight:600; }
body.workspace-page .app-dialog-field :is(input,select,textarea) { border-color:var(--ui-line); border-radius:var(--brand-control-radius); color:var(--ui-ink); background:#fff; font-family:inherit; line-height:1.5; }
body.workspace-page .app-dialog-field :is(input,select,textarea):focus { border-color:#81a3dd; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 8%,transparent); }
body.workspace-page .app-dialog-actions { background:#fff; border-color:var(--ui-line); padding:16px 24px; }
body.workspace-page .app-dialog-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:6px; border-color:var(--ui-line); color:var(--ui-muted); background:#fff; font-family:inherit; }
body.workspace-page .app-dialog-btn.hidden { display:none; }
body.workspace-page .app-dialog-btn.primary { background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
body.workspace-page .app-dialog-btn.primary:hover { background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); }
body.workspace-page .app-dialog-btn.is-destructive { color:#973943; background:#fff0f2; border-color:#eac3c9; }
body.workspace-page .app-dialog-btn.is-destructive:hover { background:#fbe0e5; border-color:#dca6b0; }
body.workspace-page .app-dialog-btn .sketch-icon { width:18px; height:18px; }
body.workspace-page .app-dialog-close { display:grid; place-items:center; width:34px; height:34px; border-radius:var(--brand-control-radius); border-color:var(--ui-line); color:var(--ui-muted); cursor:pointer; }
body.workspace-page .app-dialog-close .sketch-icon { width:17px; height:17px; }
body.workspace-page .app-dialog-close:hover { color:var(--brand-primary); background:var(--brand-lavender); }
body.workspace-page .planner-dialog,body.writing-app .writing-dialog { font-family:Inter,Arial,sans-serif; color:var(--ui-ink); border-color:var(--ui-line); border-radius:var(--brand-card-radius); background:#fff; box-shadow:0 24px 80px color-mix(in srgb,var(--brand-ink) 19%,transparent); }
body.workspace-page .planner-dialog header,body.workspace-page .modal-card .modal-header { background:#f9fafc; border-color:var(--ui-line); }
body.workspace-page .planner-dialog h2,body.writing-app .writing-dialog .dialog-heading h2,body.workspace-page .modal-card .modal-title h3 { font-family:Inter,Arial,sans-serif; font-size:1.6rem; font-weight:600; color:var(--ui-ink); line-height:1.25; }
body.workspace-page .planner-dialog header p,body.workspace-page .modal-card .modal-title p,body.writing-app .writing-dialog :is(.assistant-note,.panel-intro) { color:var(--ui-muted); }
body.writing-app .writing-dialog .dialog-heading { background:#f9fafc; border-bottom:1px solid var(--ui-line); margin:-24px -24px 20px; padding:20px 24px; gap:14px; }
body.workspace-page .planner-close,body.writing-app .writing-dialog .dialog-heading button { display:grid; place-items:center; width:34px; height:34px; padding:0; flex-shrink:0; border:1px solid var(--ui-line); border-radius:var(--brand-control-radius); color:var(--ui-muted); background:#fff; }
body.workspace-page .planner-dialog :is(input,select,textarea),body.writing-app .writing-dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { border-color:var(--ui-line); border-radius:var(--brand-control-radius); color:var(--ui-ink); background:#fff; }
dialog:is(.app-dialog-backdrop,.modal-backdrop,.writing-dialog,.planner-dialog)::backdrop { background:color-mix(in srgb,var(--brand-ink) 44%,transparent); backdrop-filter:blur(3px); }
@media(max-width:600px) { body.workspace-page .app-dialog-head,body.workspace-page .app-dialog-body { padding:18px; } body.workspace-page .app-dialog-actions { padding:14px 18px; } body.workspace-page .app-dialog-head h3 { font-size:1.45rem; } }
body.workspace-page .choose-plan-dialog { border-radius:var(--brand-card-radius); border-color:var(--ui-line); color:var(--ui-ink); font-family:Inter,Arial,sans-serif; box-shadow:0 24px 80px color-mix(in srgb,var(--brand-ink) 19%,transparent); }
body.workspace-page .choose-plan-heading h2 { font-family:Inter,Arial,sans-serif; font-size:1.7rem; font-weight:600; color:var(--ui-ink); }
body.workspace-page .choose-plan-heading p { color:var(--ui-muted); }
body.workspace-page .choose-plan-close { border:1px solid var(--ui-line); border-radius:var(--brand-control-radius); color:var(--ui-muted); background:#fff; }
.choose-plan-dialog::backdrop { background:color-mix(in srgb,var(--brand-ink) 44%,transparent); backdrop-filter:blur(3px); }