/*
  OpenAI Ads console UI layer.
  The screens in /dev use this stylesheet before they replace production.
*/

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css");

:root {
  --oa-bg: #f4f4f4;
  --oa-surface: #ffffff;
  --oa-surface-strong: #ffffff;
  --oa-ink: #161616;
  --oa-muted: #525252;
  --oa-subtle: #6f6f6f;
  --oa-line: #d9dde5;
  --oa-line-strong: #b8c4d4;
  --oa-red: #e60012;
  --oa-red-dark: #b0000e;
  --oa-danger: #e60012;
  --oa-warning: #d98200;
  --oa-chart-spend: #d98200;
  --oa-chart-impressions: #0f62fe;
  --oa-chart-clicks: #0f8f63;
  --oa-teal: #087a75;
  --oa-blue: #0f62fe;
  --oa-gold: #a97615;
  --oa-green: #19704f;
  --oa-graphite: #141c2b;
  --oa-graphite-2: #202a3c;
  --oa-graphite-3: #303b50;
  --oa-radius: 8px;
  --oa-radius-sm: 4px;
  --oa-shadow: none;
  --oa-shadow-soft: 0 2px 8px rgb(22 22 22 / 5%);
  --oa-font:
    "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --oa-mono:
    "SFMono-Regular", Consolas, "Liberation Mono", "Roboto Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.dev-console {
  min-height: 100dvh;
  margin: 0;
  background: var(--oa-bg);
  color: var(--oa-ink);
  font-family: var(--oa-font);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

body.menu-settings-pending [data-menu-key],
body.menu-settings-pending [data-guide-deck] {
  display: none !important;
}

body.dev-console button,
body.dev-console input,
body.dev-console textarea,
body.dev-console select,
body.dev-console table {
  font: inherit;
}

body.dev-console a {
  color: inherit;
}

body.dev-console :focus-visible {
  outline: 3px solid rgb(230 0 18 / 26%);
  outline-offset: 2px;
}

.shell {
  width: min(1540px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 76px;
}

.app-frame {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100dvh - 40px);
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #ffffff;
  box-shadow: var(--oa-shadow);
  overflow: hidden;
}

.rail {
  background: var(--oa-graphite);
  color: #f8fafc;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--oa-radius);
  background: var(--oa-red);
  color: #fff;
  font-weight: 950;
  box-shadow: none;
}

.brand-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.brand-meta {
  margin: 3px 0 0;
  color: #aab3c4;
  font-size: 12px;
  line-height: 1.35;
}

.rail-section {
  display: grid;
  gap: 8px;
}

.rail-label {
  color: #8994a8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rail-link,
.rail-button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--oa-radius);
  background: transparent;
  color: #d7deeb;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.rail-link:has(.rail-link-note) {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.rail-link-note {
  justify-self: end;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: var(--oa-radius-sm);
  padding: 1px 5px;
  color: #fecdd3;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.4;
}

.rail-link:hover,
.rail-button:hover,
.rail-button.is-active {
  transform: translateY(-1px);
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.rail-button.is-active {
  background: var(--oa-red);
  border-color: var(--oa-red);
}

.rail-link.is-admin-visible-disabled,
.rail-button.is-admin-visible-disabled,
.guide-tab.is-admin-visible-disabled {
  opacity: .72;
}

.rail-link.is-admin-visible-disabled::after,
.rail-button.is-admin-visible-disabled::after {
  content: "OFF";
  align-self: center;
  justify-self: end;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  padding: 2px 6px;
  color: #fecdd3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.admin-gated-link.is-disabled,
.admin-gated-link.is-disabled:hover {
  border-color: rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 4%);
  color: #778195;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.head-actions .admin-gated-link.is-disabled,
.head-actions .admin-gated-link.is-disabled:hover {
  border-color: #d7e0ec;
  background: #f3f6fb;
  color: #8a95a8;
}

.admin-gated-link.is-disabled .ti {
  color: #8a95a8;
}

.rail-link .ti,
.rail-button .ti {
  color: #ffb9bd;
  font-size: 18px;
}

.rail-footer {
  display: grid;
  gap: 7px;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / 12%);
  padding-top: 16px;
  color: #aab3c4;
  font-size: 11px;
  line-height: 1.45;
}

.rail-footer strong {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.rail-footer a {
  color: #dce5f5;
  font-weight: 850;
  text-decoration: none;
}

.rail-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.rail-footer small {
  color: #7f8aa0;
  font-size: 10px;
  line-height: 1.45;
}

.context-footer {
  margin-top: 18px;
}

.stage {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--oa-bg);
}

.stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  padding: 24px 32px 18px;
  border-bottom: 1px solid var(--oa-line);
  background: #ffffff;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--oa-red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stage-title,
.page-title {
  margin: 0;
  color: var(--oa-ink);
  max-width: 980px;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.08;
  font-weight: 950;
  text-wrap: balance;
}

.stage-title span {
  display: block;
}

.login-panel .page-title,
.context-panel .page-title {
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.08;
}

.stage-copy,
.page-copy {
  max-width: 820px;
  margin: 12px 0 0;
  color: var(--oa-muted);
  font-size: 15px;
  line-height: 1.65;
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.content {
  min-width: 0;
  padding: 24px 32px 34px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.metric {
  min-width: 0;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: var(--oa-surface);
  padding: 13px 14px;
  box-shadow: none;
}

.metric span {
  display: block;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 800;
}

.metric strong {
  display: block;
  margin-top: 6px;
  color: var(--oa-ink);
  font-family: var(--oa-font);
  font-size: clamp(23px, 2.5vw, 34px);
  font-weight: 900;
  line-height: 1;
}

.metric .status-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  border-radius: 999px;
  padding: 0 14px;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: .02em;
}

.metric .status-indicator.is-on {
  background: #e9fbf1;
  color: #067647;
}

.metric .status-indicator.is-off {
  background: #fff1f1;
  color: var(--oa-red-dark);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr);
  gap: 16px;
  align-items: start;
}

.workspace.is-wide-mode,
.workspace.is-qa-mode {
  grid-template-columns: minmax(0, 1fr);
}

.workspace.is-wide-mode .workbench,
.workspace.is-qa-mode .workbench {
  order: 1;
}

.workspace.is-wide-mode .inspector,
.workspace.is-qa-mode .inspector {
  order: 2;
}

.workspace.is-wide-mode .inspector .surface-head,
.workspace.is-qa-mode .inspector .surface-head {
  padding: 14px 16px 0;
}

.workspace.is-wide-mode .inspector .surface-body,
.workspace.is-qa-mode .inspector .surface-body {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(260px, .95fr) minmax(340px, 1.15fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px 16px;
}

.workspace.is-wide-mode .inspector .timeline,
.workspace.is-qa-mode .inspector .timeline {
  grid-template-columns: 1fr;
}

.workspace.is-wide-mode .inspector .timeline-item,
.workspace.is-qa-mode .inspector .timeline-item {
  grid-template-columns: 32px minmax(0, 1fr);
}

.workspace.is-wide-mode .inspector .timeline-index,
.workspace.is-qa-mode .inspector .timeline-index {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.workspace.is-wide-mode .inspector .status-line,
.workspace.is-qa-mode .inspector .status-line {
  align-self: end;
  margin: auto 0 0;
}

.workbench,
.inspector,
.surface {
  min-width: 0;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: var(--oa-surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.surface-dark {
  border-color: rgb(255 255 255 / 12%);
  background: var(--oa-graphite);
  color: #f8fafc;
}

.surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 0;
}

.surface-title {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
}

.surface-copy {
  margin: 6px 0 0;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.surface-dark .surface-copy {
  color: #aab3c4;
}

.surface-body {
  padding: 18px;
}

.inspector-grid {
  min-width: 0;
}

.inspector-status-card,
.inspector-flow,
.inspector-reliability {
  min-width: 0;
}

.inspector-status-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.inspector-status-card .status-line {
  min-height: 0;
}

.inspector-flow,
.inspector-reliability {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px;
}

.inspector-label {
  display: inline-block;
  margin: 0 0 6px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.inspector-reliability {
  background: linear-gradient(135deg, #fff 0%, #fff8f3 100%);
}

.inspector-reliability h3 {
  margin: 0 0 10px;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.inspector-reliability ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inspector-reliability li {
  position: relative;
  padding-left: 13px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.55;
}

.inspector-reliability li::before {
  content: "";
  position: absolute;
  top: .68em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--oa-red);
}

.inspector-reliability strong {
  color: var(--oa-ink);
  font-weight: 950;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qa-layout {
  grid-template-columns: minmax(320px, .72fr) minmax(520px, 1.28fr);
  gap: 18px;
  align-items: start;
}

.qa-input-panel {
  position: sticky;
  top: 18px;
  align-self: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stack {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field label,
.field-label {
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 900;
}

.required-mark {
  color: var(--oa-red);
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.field .help,
.help {
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.field-error {
  margin: 0;
  color: var(--oa-red-dark);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.control,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--oa-line-strong);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: var(--oa-ink);
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: none;
}

.field.has-error .control,
.field.has-error .textarea,
.field.has-error .select {
  border-color: #f5a0a8;
  background: #fffafa;
  box-shadow: 0 0 0 3px rgb(215 17 30 / 8%);
}

.textarea {
  min-height: 132px;
  resize: vertical;
}

.control:focus,
.textarea:focus,
.select:focus {
  border-color: var(--oa-red);
  outline: none;
  box-shadow: 0 0 0 3px rgb(230 0 18 / 13%);
}

.control[readonly] {
  background: #f8fafc;
  color: var(--oa-muted);
}

.control[type="file"] {
  padding: 8px;
}

.control[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid var(--oa-line-strong);
  border-radius: var(--oa-radius-sm);
  background: #f3f6fb;
  color: var(--oa-ink);
  padding: 8px 12px;
  font-weight: 900;
  cursor: pointer;
}

.file-upload-field {
  position: relative;
}

.file-upload-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  border: 1px solid #cdd8e7;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #fff 0%, #f8fbff 100%);
  padding: 14px;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background-color 160ms ease;
}

.file-upload-card:hover,
.file-upload-input:focus-visible + .file-upload-card {
  border-color: #ef9a9f;
  box-shadow: 0 14px 32px rgb(20 28 43 / 9%);
  transform: translateY(-1px);
}

.file-upload-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff4f4;
  color: var(--oa-red);
  font-size: 24px;
}

.file-upload-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.file-upload-copy strong {
  color: var(--oa-ink);
  font-size: 14px;
  font-weight: 950;
}

.file-upload-copy small {
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.file-upload-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #ffc9cc;
  border-radius: 999px;
  background: #fff;
  color: var(--oa-red-dark);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.btn-command,
.btn-primary,
.btn-secondary,
.btn-plain,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--oa-radius-sm);
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.btn-command {
  background: var(--oa-red);
  border-color: var(--oa-red);
  color: #fff;
  box-shadow: 0 8px 18px rgb(230 0 18 / 18%);
}

.btn-command,
.btn-primary,
.btn-command:visited,
.btn-primary:visited,
.btn-primary i,
.btn-command i {
  color: #fff;
}

.btn-primary {
  background: var(--oa-red);
  border-color: var(--oa-red);
  color: #fff;
  box-shadow: 0 10px 22px rgb(230 0 18 / 18%);
}

.btn-secondary {
  background: #fff;
  border-color: var(--oa-line-strong);
  color: var(--oa-ink);
}

.btn-plain {
  background: transparent;
  border-color: transparent;
  color: var(--oa-muted);
}

.btn-danger {
  background: #fff4f4;
  border-color: #ffc9cc;
  color: var(--oa-red-dark);
}

.btn-command:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-plain:hover,
.btn-danger:hover {
  transform: translateY(-1px);
}

.surface-dark .btn-secondary {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 8%);
  color: #fff;
}

.btn-command:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: .52;
  transform: none;
}

.btn-command.is-busy,
.btn-primary.is-busy {
  opacity: .82;
}

.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgb(255 255 255 / 46%);
  border-top-color: #fff;
  border-radius: 999px;
  animation: button-spin .8s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

.global-loading {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms;
}

.global-loading.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 160ms ease,
    visibility 0s linear 0s;
}

.global-loading-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  overflow: hidden;
  background: rgb(230 0 18 / 12%);
}

.global-loading-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--oa-red), transparent);
  animation: global-loading-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}

.global-loading-badge {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 850;
  box-shadow: var(--oa-shadow-soft);
  transform: translateY(-8px);
  opacity: 0;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.global-loading.is-active .global-loading-badge {
  transform: translateY(0);
  opacity: 1;
}

.global-loading-badge .button-spinner {
  flex: 0 0 auto;
  border-color: rgb(230 0 18 / 24%);
  border-top-color: var(--oa-red);
}

@keyframes global-loading-slide {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(260%);
  }
}

body.dev-console.modal-open {
  overflow: hidden;
}

.entry-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgb(17 24 39 / 68%), rgb(17 24 39 / 54%)),
    rgb(17 24 39 / 60%);
  backdrop-filter: blur(10px);
}

.entry-notice-overlay[hidden] {
  display: none;
}

.entry-notice-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 18px;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 34px 90px rgb(0 0 0 / 34%);
  padding: 24px;
}

.entry-notice-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--oa-line);
  border-radius: 999px;
  background: #fff;
  color: var(--oa-muted);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.entry-notice-close:hover {
  border-color: #ffc9cc;
  background: #fff4f4;
  color: var(--oa-red-dark);
  transform: translateY(-1px);
}

.entry-notice-mark {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ffd5d8;
  border-radius: 12px;
  background: #fff4f4;
  color: var(--oa-red);
  font-size: 26px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

.entry-notice-head {
  min-width: 0;
  padding-right: 42px;
}

.entry-notice-head .eyebrow {
  margin-bottom: 8px;
}

.entry-notice-head h2 {
  margin: 0;
  color: var(--oa-ink);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0;
}

.entry-notice-head span {
  display: inline-flex;
  gap: 6px;
  margin-top: 10px;
  border: 1px solid #ffd5d8;
  border-radius: 999px;
  background: #fff8f8;
  padding: 5px 10px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.entry-notice-head strong {
  color: var(--oa-red-dark);
}

.entry-notice-body,
.entry-notice-source,
.entry-notice-actions {
  grid-column: 1 / -1;
}

.entry-notice-body {
  border-top: 1px solid var(--oa-line);
  padding-top: 18px;
}

.entry-notice-content {
  color: #344054;
  font-size: 15px;
  line-height: 1.68;
}

.entry-notice-content ul,
.entry-notice-content ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.entry-notice-content li::marker {
  color: var(--oa-red);
}

.entry-notice-content p {
  margin: 0 0 12px;
}

.entry-notice-content strong,
.entry-notice-content b {
  color: var(--oa-ink);
  font-weight: 950;
}

.entry-notice-content a {
  color: #155eef;
  font-weight: 900;
}

.entry-notice-content h2 {
  margin: 4px 0 12px;
  color: var(--oa-ink);
  font-size: 22px;
  line-height: 1.35;
}

.entry-notice-content blockquote {
  margin: 14px 0;
  border-left: 4px solid var(--oa-red);
  background: #fff5f5;
  padding: 12px 14px;
  color: #344054;
  font-weight: 800;
}

.entry-notice-source {
  margin: 0;
  border: 1px solid #f0d9c7;
  border-left: 4px solid var(--oa-red);
  border-radius: var(--oa-radius-sm);
  background: #fffaf5;
  padding: 11px 12px;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.5;
}

.entry-notice-source a {
  color: var(--oa-red-dark);
  font-weight: 950;
  text-decoration: none;
}

.entry-notice-source a:hover {
  text-decoration: underline;
}

.entry-notice-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding-top: 4px;
}

.entry-notice-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--oa-muted);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.entry-notice-skip input {
  width: 16px;
  height: 16px;
  accent-color: var(--oa-red);
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

.answer-pane,
.empty-pane,
.status-pane {
  border: 1px dashed var(--oa-line-strong);
  border-radius: var(--oa-radius);
  background: #fffaf1;
  padding: 18px;
  color: var(--oa-muted);
  font-size: 14px;
  line-height: 1.65;
  min-height: 180px;
}

.answer-pane h3 {
  margin: 0 0 8px;
  color: var(--oa-ink);
  font-size: 16px;
}

.answer-pane p {
  margin: 0 0 10px;
}

.faq-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--oa-line);
  padding-top: 18px;
}

.faq-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.faq-head h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 18px;
  font-weight: 950;
}

.faq-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.faq-category {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: var(--oa-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.faq-category:hover,
.faq-category.is-active {
  transform: translateY(-1px);
  border-color: #ffc9cc;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.faq-category span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.faq-category b {
  flex: 0 0 auto;
  font-family: var(--oa-mono);
  font-size: 12px;
}

.faq-list {
  display: grid;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  overflow: hidden;
}

.faq-item.is-open {
  border-color: #d7b8a2;
  background: #fffdf8;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--oa-ink);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.faq-question .ti {
  flex: 0 0 auto;
  color: var(--oa-red);
  font-size: 16px;
}

.faq-answer {
  border-top: 1px solid var(--oa-line);
  background: #fffaf1;
  color: var(--oa-muted);
  padding: 12px 14px 14px;
  font-size: 13px;
  line-height: 1.65;
}

.source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.source-chip,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: var(--oa-muted);
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 800;
}

.source-chip {
  text-decoration: none;
}

.source-chip:hover {
  border-color: var(--oa-line-strong);
  color: var(--oa-ink);
}

.source-tier {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border-radius: var(--oa-radius-sm);
  padding: 0 5px;
  background: #f4f4f4;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
}

.source-chip.source-official {
  border-color: #bad2ff;
  background: #f4f8ff;
  color: #114aaf;
}

.source-chip.source-official .source-tier {
  background: #e9f1ff;
  color: var(--oa-blue);
}

.source-chip.source-internal {
  border-color: #bfe7d5;
  background: #effaf5;
  color: #12583e;
}

.source-chip.source-internal .source-tier {
  background: #dff5eb;
  color: var(--oa-green);
}

.source-chip.source-pending,
.tag-amber {
  border-color: #f4d28d;
  background: #fff8e7;
  color: var(--oa-gold);
}

.source-chip.source-pending .source-tier {
  background: #fff0c2;
  color: var(--oa-gold);
}

.source-chip.source-none {
  border-style: dashed;
  color: var(--oa-subtle);
}

.tag-red {
  border-color: #ffcbce;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.tag-green {
  border-color: #bfe7d5;
  background: #effaf5;
  color: var(--oa-green);
}

.tag-blue {
  border-color: #c7dbef;
  background: #eff6ff;
  color: var(--oa-blue);
}

.data-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
}

.data-grid th,
.data-grid td {
  border-bottom: 1px solid var(--oa-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.45;
}

.data-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f6fb;
  color: #3a4251;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.data-grid tbody tr:hover td {
  background: #f8fafc;
}

.data-grid tr:last-child td {
  border-bottom: 0;
}

.form-actions,
.row-actions,
.list-toolbar,
.list-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.form-actions {
  flex-wrap: wrap;
}

.form-actions .btn-command {
  flex: 1 1 220px;
}

.list-toolbar {
  justify-content: space-between;
}

.official-toolbar {
  align-items: end;
}

.official-pagination {
  justify-content: flex-end;
  padding-top: 2px;
}

.list-toolbar label {
  display: grid;
  flex: 1 1 220px;
  gap: 5px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.list-pagination {
  justify-content: flex-end;
}

.list-pagination .status-line {
  min-width: 96px;
  margin: 0;
  text-align: center;
}

.row-actions {
  flex-wrap: nowrap;
}

.row-actions .btn-plain,
.row-actions .btn-danger {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 12px;
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
  color: var(--oa-muted);
  cursor: pointer;
}

.btn-icon:hover,
.btn-icon.is-active {
  border-color: #ffc4c8;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.btn-compact {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.input-with-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.btn-inline {
  min-height: 44px;
  padding-inline: 12px;
  white-space: nowrap;
}

.secret-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 6px 8px;
  color: var(--oa-muted);
  font-size: 12px;
}

.secret-preview[hidden] {
  display: none;
}

.secret-preview-label {
  font-weight: 900;
  color: var(--oa-ink);
  white-space: nowrap;
}

.secret-preview code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--oa-ink);
  font-family: var(--oa-font-mono, "Consolas", monospace);
  font-size: 12px;
  line-height: 1.45;
}

.secret-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  height: 32px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
  color: var(--oa-muted);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
}

.secret-toggle:hover {
  border-color: rgb(230 0 18 / 35%);
  color: var(--oa-red);
}

.secret-toggle:disabled {
  cursor: wait;
  opacity: .65;
}

.ads-key-table {
  table-layout: fixed;
}

.ads-key-table th:nth-child(1),
.ads-key-table td:nth-child(1) {
  width: 28%;
}

.ads-key-table th:nth-child(2),
.ads-key-table td:nth-child(2) {
  width: 96px;
}

.ads-key-table th:nth-child(3),
.ads-key-table td:nth-child(3),
.ads-key-table th:nth-child(4),
.ads-key-table td:nth-child(4) {
  width: 17%;
}

.ads-key-table th:nth-child(5),
.ads-key-table td:nth-child(5) {
  width: 70px;
  text-align: center;
}

.ads-key-table th:nth-child(6),
.ads-key-table td:nth-child(6) {
  width: 122px;
  text-align: center;
}

.ads-key-table td {
  overflow-wrap: anywhere;
}

.ads-key-table .row-actions {
  justify-content: center;
  gap: 4px;
}

.ads-key-table .btn-plain,
.ads-key-table .btn-danger {
  min-width: 0;
  padding: 5px 7px;
}

.adcopy-generator-surface .surface-head {
  align-items: flex-start;
}

.adcopy-generator-surface.is-plugin-engine .adcopy-admate-only,
.adcopy-generator-surface.is-admate-engine .adcopy-plugin-only {
  display: none !important;
}

.adcopy-purpose-panel {
  display: grid;
  gap: 14px;
  border: 1px solid #cfe0f4;
  border-radius: var(--oa-radius);
  background: linear-gradient(135deg, #f7fbff 0%, #fff 72%);
  padding: 18px;
}

.adcopy-purpose-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
}

.adcopy-purpose-summary::-webkit-details-marker {
  display: none;
}

.adcopy-purpose-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.adcopy-purpose-summary strong {
  color: var(--oa-navy);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.adcopy-purpose-summary > small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.adcopy-purpose-body {
  display: grid;
  gap: 14px;
}

.adcopy-purpose-body > p:first-child {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

.adcopy-purpose-panel:not([open]) {
  padding-block: 13px;
}

.adcopy-purpose-head {
  display: grid;
  gap: 5px;
}

.adcopy-purpose-head h3,
.adcopy-purpose-head p,
.adcopy-purpose-limit {
  margin: 0;
}

.adcopy-purpose-head h3 {
  color: var(--oa-navy);
  font-size: 18px;
  line-height: 1.35;
}

.adcopy-purpose-head p {
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

.adcopy-purpose-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.adcopy-purpose-steps > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  border: 1px solid #e1eaf4;
  border-radius: 10px;
  background: #fff;
  padding: 11px;
}

.adcopy-purpose-steps i {
  color: var(--oa-blue);
  font-size: 18px;
}

.adcopy-purpose-steps span,
.adcopy-purpose-steps strong,
.adcopy-purpose-steps small {
  display: block;
}

.adcopy-purpose-steps strong {
  color: var(--oa-navy);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-purpose-steps small {
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.adcopy-purpose-limit {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7c3d42;
  font-size: 12px;
  font-weight: 800;
}

.adcopy-generator-surface .doc-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.adcopy-action-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.adcopy-action-group .btn-secondary {
  padding-inline: 10px;
}

.adcopy-safe-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #c7dbef;
  border-left: 4px solid var(--oa-blue);
  border-radius: var(--oa-radius-sm);
  background: #f5f9ff;
  color: #2f5f99;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
}

.adcopy-safe-note > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.adcopy-safe-note strong {
  color: #194f91;
  font-weight: 950;
  white-space: nowrap;
}

.adcopy-safe-note .btn-secondary {
  flex: 0 0 auto;
  background: #fff;
}

.adcopy-guide-panel {
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  overflow: hidden;
}

.adcopy-guide-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--oa-ink);
  cursor: pointer;
  list-style: none;
}

.adcopy-guide-panel summary::-webkit-details-marker {
  display: none;
}

.adcopy-guide-panel summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  font-size: 13px;
  font-weight: 950;
}

.adcopy-guide-panel summary i {
  color: var(--oa-red);
  font-size: 17px;
}

.adcopy-guide-panel summary small {
  min-width: 0;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-guide-panel[open] summary {
  border-bottom: 1px solid #e5edf6;
  background: #fffafa;
}

.adcopy-guide-body {
  padding: 12px 14px 14px;
}

.adcopy-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  counter-reset: adcopy-guide;
  list-style: none;
}

.adcopy-guide-steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 132px;
  border: 1px solid #e5edf6;
  border-radius: var(--oa-radius-sm);
  background: #fbfcff;
  padding: 12px 12px 12px 42px;
  counter-increment: adcopy-guide;
}

.adcopy-guide-steps li::before {
  content: counter(adcopy-guide, decimal-leading-zero);
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff0f1;
  color: var(--oa-red-dark);
  font-size: 11px;
  font-weight: 950;
}

.adcopy-guide-steps strong {
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
}

.adcopy-guide-steps p {
  margin: 0;
  color: #5d6c82;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.55;
  word-break: keep-all;
}

.adcopy-guide-steps b {
  color: #263449;
  font-weight: 950;
}

.adcopy-import-panel {
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  overflow: hidden;
}

.adcopy-import-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--oa-ink);
  cursor: pointer;
  list-style: none;
}

.adcopy-import-panel summary::-webkit-details-marker {
  display: none;
}

.adcopy-import-panel summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 950;
}

.adcopy-import-panel summary i {
  color: var(--oa-blue);
  font-size: 17px;
}

.adcopy-import-panel summary small {
  min-width: 0;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-import-panel[open] summary {
  border-bottom: 1px solid #e5edf6;
  background: #f8fbff;
}

.adcopy-import-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}

.adcopy-import-body .textarea {
  min-height: 138px;
  font-family: var(--oa-font-mono, "Consolas", monospace);
  font-size: 12px;
  line-height: 1.55;
}

.adcopy-import-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.adcopy-import-actions .status-line {
  flex: 1 1 260px;
  margin: 0;
}

.adcopy-snapshot-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
}

.adcopy-snapshot-controls .control {
  min-width: 0;
}

.adcopy-generator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.adcopy-generator-layout.has-result {
  grid-template-columns: minmax(0, 1fr);
}

.adcopy-generator-layout.has-result:not(.show-source-panel) .adcopy-form {
  display: none;
}

.adcopy-generator-layout.has-result.show-source-panel {
  grid-template-columns: minmax(0, 1fr);
}

.adcopy-generator-layout.has-result .adcopy-preview {
  grid-column: 1 / -1;
  position: static;
  padding: 18px;
}

.adcopy-generator-layout.has-result.show-source-panel .adcopy-preview {
  grid-column: 1 / -1;
  position: static;
}

.adcopy-form,
.adcopy-preview {
  min-width: 0;
}

.adcopy-form {
  display: grid;
  gap: 12px;
}

.adcopy-panel-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #dfe8f5;
  border-radius: var(--oa-radius-sm);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 12px;
}

.adcopy-panel-intro-result {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border-color: #f1d8da;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
}

.adcopy-source-toggle {
  align-self: center;
  white-space: nowrap;
}

.adcopy-source-toggle[hidden] {
  display: none;
}

.adcopy-panel-step {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 28px;
  border-radius: 999px;
  background: #edf5ff;
  color: var(--oa-blue);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-panel-intro-result .adcopy-panel-step {
  background: #fff1f1;
  color: var(--oa-red-dark);
}

.adcopy-panel-intro strong {
  display: block;
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
}

.adcopy-panel-intro p {
  margin: 4px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
  word-break: keep-all;
}

.adcopy-section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-bottom: 3px;
  color: var(--oa-red-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.adcopy-engine-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #cbdff3;
  border-radius: var(--oa-radius);
  background: linear-gradient(145deg, #f8fbff 0%, #fff 62%);
  padding: 14px;
}

.adcopy-engine-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.adcopy-engine-head h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-engine-head p {
  margin: 3px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-engine-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.adcopy-engine-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.adcopy-engine-card:hover {
  border-color: #9dbfe0;
}

.adcopy-engine-card.is-selected {
  border-color: var(--oa-blue);
  background: #f4f9ff;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.08);
}

.adcopy-engine-card.is-disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.adcopy-engine-card > input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.adcopy-engine-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #edf5ff;
  color: var(--oa-blue);
  font-size: 18px;
}

.adcopy-engine-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.adcopy-engine-copy strong {
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
}

.adcopy-engine-copy strong em {
  display: inline-flex;
  margin-left: 4px;
  border-radius: 999px;
  background: #e8f2ff;
  color: var(--oa-blue);
  padding: 2px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  vertical-align: 1px;
}

.adcopy-engine-copy small {
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.4;
}

.adcopy-engine-check {
  color: #c7d2df;
  font-size: 18px;
}

.adcopy-engine-card.is-selected .adcopy-engine-check {
  color: var(--oa-blue);
}

.adcopy-plugin-workflow {
  display: grid;
  gap: 12px;
  border: 1px solid #b9d8c8;
  border-radius: var(--oa-radius);
  background: linear-gradient(145deg, #f4fbf7 0%, #fff 65%);
  padding: 14px;
}

.adcopy-brief-upload-panel {
  display: grid;
  gap: 12px;
  border: 1px solid #b9d4f5;
  border-radius: var(--oa-radius);
  background: linear-gradient(145deg, #f5f9ff 0%, #fff 68%);
  padding: 16px;
}

.adcopy-brief-upload-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.adcopy-brief-upload-head h3,
.adcopy-brief-upload-head p {
  margin: 0;
}

.adcopy-brief-upload-head h3 {
  margin-top: 2px;
  color: var(--oa-ink);
  font-size: 17px;
  font-weight: 950;
}

.adcopy-brief-upload-head p {
  margin-top: 5px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.55;
}

.adcopy-brief-upload-actions,
.adcopy-brief-format-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.adcopy-brief-format-note span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dce7f5;
  border-radius: 999px;
  background: #fff;
  color: #53657c;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}

.adcopy-brief-upload-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid #cfe0f4;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.adcopy-brief-upload-summary[hidden] {
  display: none;
}

.adcopy-brief-upload-summary div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adcopy-brief-upload-summary span {
  color: var(--oa-muted);
  font-size: 10px;
  font-weight: 850;
}

.adcopy-brief-upload-summary strong {
  overflow: hidden;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-brief-upload-summary p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.45;
}

.adcopy-brief-upload-summary.is-warning {
  border-color: #f6d790;
  background: #fffaf0;
}

.adcopy-manual-entry {
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius);
  background: #fff;
  overflow: hidden;
}

.adcopy-manual-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}

.adcopy-manual-entry > summary::-webkit-details-marker {
  display: none;
}

.adcopy-manual-entry > summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--oa-ink);
  font-size: 13px;
}

.adcopy-manual-entry > summary i {
  color: var(--oa-blue);
  font-size: 17px;
}

.adcopy-manual-entry > summary small {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 800;
}

.adcopy-manual-entry[open] > summary {
  border-bottom: 1px solid #e5edf6;
  background: #f8fbff;
}

.adcopy-manual-entry-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.adcopy-plugin-workflow[hidden] {
  display: none;
}

.adcopy-plugin-workflow-head h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-plugin-workflow-head p {
  margin: 3px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-plugin-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adcopy-plugin-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #d9e9e0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
}

.adcopy-plugin-steps li > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e7f5ed;
  color: var(--oa-green);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-plugin-steps li > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.adcopy-plugin-steps strong {
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-plugin-steps code {
  overflow-wrap: anywhere;
  border-radius: 7px;
  background: #f2f6f4;
  color: #274438;
  padding: 6px 8px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
}

.adcopy-plugin-steps small {
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.4;
}

.adcopy-form.is-plugin-mode > .adcopy-brief-meter,
.adcopy-form.is-plugin-mode > .adcopy-form-section {
  display: none;
}

@media (max-width: 760px) {
  .adcopy-purpose-summary {
    display: grid;
    align-items: start;
  }

  .adcopy-purpose-summary > small {
    white-space: normal;
  }

  .adcopy-engine-options {
    grid-template-columns: 1fr;
  }

  .adcopy-engine-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .adcopy-brief-upload-head,
  .adcopy-manual-entry > summary {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 12px;
  }

  .adcopy-brief-upload-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adcopy-plugin-steps li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .adcopy-plugin-steps li > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

.adcopy-brief-meter {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 13px 14px;
}

.adcopy-brief-meter.is-strong {
  border-color: #bfe7d5;
  background: #f5fcf8;
}

.adcopy-brief-meter.is-ready {
  border-color: #c7dbef;
  background: #f7fbff;
}

.adcopy-brief-meter.is-caution {
  border-color: #f6d790;
  background: #fffaf0;
}

.adcopy-brief-meter.is-risk {
  border-color: #ffc9cc;
  background: #fff7f7;
}

.adcopy-brief-score {
  display: grid;
  align-content: center;
  gap: 4px;
}

.adcopy-brief-score span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
}

.adcopy-brief-score strong {
  color: var(--oa-ink);
  font-size: 36px;
  font-weight: 950;
  line-height: 1;
}

.adcopy-brief-checks {
  min-width: 0;
}

.adcopy-brief-checks p {
  margin: 7px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.adcopy-brief-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.adcopy-brief-chip {
  border: 1px solid #e1e7f0;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--oa-muted);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 850;
}

.adcopy-brief-chip.is-on {
  border-color: #bfe7d5;
  background: #effaf5;
  color: var(--oa-green);
}

.adcopy-form-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px;
}

.adcopy-form-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.adcopy-form-section-head > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #fff4f4;
  color: var(--oa-red-dark);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-form-section-head h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-form-section-head p {
  margin: 3px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-form .field {
  gap: 6px;
}

.adcopy-form .field-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}

.adcopy-form .textarea {
  min-height: 112px;
}

.adcopy-count-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.adcopy-count-control label {
  display: grid;
  gap: 4px;
}

.adcopy-count-control label > span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 850;
}

.inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.adcopy-preset-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid #e1e8f2;
  border-radius: var(--oa-radius-sm);
  background: #fbfdff;
  padding: 10px 12px;
}

.adcopy-preset-panel strong {
  display: block;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-preset-panel span {
  display: block;
  margin-top: 3px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-preset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 6px;
  width: 220px;
  justify-content: end;
}

.adcopy-preset-actions .btn-secondary {
  justify-content: center;
  white-space: nowrap;
}

.adcopy-policy-grid {
  display: grid;
  grid-template-columns: minmax(180px, .86fr) minmax(0, 1.14fr);
  gap: 12px;
  align-items: start;
}

.adcopy-policy-grid .field:nth-child(3) {
  grid-column: 1 / -1;
}

.adcopy-policy-grid .field {
  align-content: start;
}

.adcopy-policy-grid .textarea {
  min-height: 126px;
}

.adcopy-landing-insight {
  border: 1px solid #c7dbef;
  border-left: 4px solid var(--oa-blue);
  border-radius: var(--oa-radius-sm);
  background: #f7fbff;
  padding: 11px 12px;
}

.adcopy-landing-insight strong {
  display: block;
  color: var(--oa-blue);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-landing-insight p,
.adcopy-landing-insight small {
  display: block;
  margin: 5px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.adcopy-preview {
  position: static;
  display: grid;
  gap: 12px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fbfcff;
  padding: 14px;
}

.adcopy-preview .empty-pane {
  border-style: dashed;
  background: #fffdf8;
  color: var(--oa-muted);
  padding: 24px;
  text-align: center;
}

.adcopy-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.adcopy-preview-head h3,
.adcopy-result-section h4 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-preview-head p {
  margin: 4px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.adcopy-summary-grid > div {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 10px;
}

.adcopy-summary-grid span {
  display: block;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.adcopy-summary-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--oa-ink);
  font-size: 18px;
  font-weight: 950;
}

.adcopy-quality-panel {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 12px;
}

.adcopy-quality-panel.is-strong {
  border-color: #bfe7d5;
  background: #f5fcf8;
}

.adcopy-quality-panel.is-ready {
  border-color: #c7dbef;
  background: #f7fbff;
}

.adcopy-quality-panel.is-caution {
  border-color: #f6d790;
  background: #fffaf0;
}

.adcopy-quality-panel.is-risk {
  border-color: #ffc9cc;
  background: #fff7f7;
}

.adcopy-quality-score {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.adcopy-quality-score span,
.adcopy-quality-score small {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.adcopy-quality-score strong {
  color: var(--oa-ink);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.adcopy-quality-meta {
  min-width: 0;
}

.adcopy-quality-meta p {
  margin: 7px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-quality-meta ul {
  display: grid;
  gap: 5px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.adcopy-quality-meta li {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adcopy-quality-meta li strong {
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-quality-meta li span {
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.adcopy-upload-checklist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.adcopy-upload-check {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 9px;
}

.adcopy-upload-check i {
  color: var(--oa-muted);
  font-size: 16px;
}

.adcopy-upload-check span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-upload-check strong {
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.adcopy-upload-check.is-ok {
  border-color: #bfe7d5;
  background: #f5fcf8;
}

.adcopy-upload-check.is-ok i,
.adcopy-upload-check.is-ok strong {
  color: var(--oa-green);
}

.adcopy-upload-check.is-caution {
  border-color: #f6d790;
  background: #fffaf0;
}

.adcopy-upload-check.is-caution i,
.adcopy-upload-check.is-caution strong {
  color: var(--oa-gold);
}

.adcopy-upload-check.is-risk {
  border-color: #ffc9cc;
  background: #fff7f7;
}

.adcopy-upload-check.is-risk i,
.adcopy-upload-check.is-risk strong {
  color: var(--oa-red-dark);
}

.adcopy-upload-check.is-muted {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  color: var(--oa-muted);
}

.adcopy-draft-panel {
  display: block;
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  overflow: hidden;
}

.adcopy-draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.adcopy-draft-head::-webkit-details-marker {
  display: none;
}

.adcopy-draft-head:focus-visible {
  outline: 2px solid var(--oa-red);
  outline-offset: -2px;
}

.adcopy-draft-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid #e8edf4;
  padding: 12px;
}

.adcopy-draft-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.adcopy-draft-toggle i {
  transition: transform .18s ease;
}

.adcopy-draft-panel[open] .adcopy-draft-toggle i {
  transform: rotate(180deg);
}

.adcopy-draft-panel[open] .adcopy-draft-toggle-label {
  font-size: 0;
}

.adcopy-draft-panel[open] .adcopy-draft-toggle-label::after {
  content: "접기";
  font-size: 12px;
}

.adcopy-draft-head > div:first-child {
  flex: 1 1 260px;
  min-width: 220px;
}

.adcopy-draft-head h4 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-draft-head p {
  margin: 4px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
  max-width: 36rem;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.adcopy-draft-head .tag {
  flex: 0 0 auto;
  white-space: nowrap;
}

.adcopy-draft-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 0;
  flex-wrap: wrap;
}

.adcopy-draft-head-actions .btn-compact {
  flex: 0 0 auto;
}

.adcopy-draft-controls {
  display: grid;
  grid-template-columns: minmax(140px, .85fr) minmax(180px, 1.15fr);
  gap: 8px;
}

.adcopy-draft-guardrail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adcopy-draft-guardrail span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid #dbe7f3;
  border-radius: 999px;
  background: #f8fbff;
  padding: 4px 9px;
  color: #516174;
  font-size: 11px;
  font-weight: 900;
}

.adcopy-draft-guardrail i {
  color: #0f8f66;
  font-size: 14px;
}

.adcopy-draft-guardrail .is-locked {
  border-color: #f3d1d6;
  background: #fff7f8;
  color: #b4232d;
}

.adcopy-draft-guardrail .is-locked i {
  color: #d91825;
}

.adcopy-draft-summary {
  display: grid;
  gap: 5px;
  border: 1px dashed #c9d6e8;
  border-radius: var(--oa-radius-sm);
  background: #f8fbff;
  padding: 10px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.adcopy-draft-summary strong {
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
}

.adcopy-draft-summary span,
.adcopy-draft-summary small {
  color: var(--oa-muted);
  font-weight: 800;
}

.adcopy-draft-summary ul {
  display: grid;
  gap: 3px;
  margin: 2px 0 0;
  padding-left: 16px;
  color: var(--oa-gold);
  font-weight: 850;
}

.adcopy-draft-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.adcopy-draft-step {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  border: 1px solid #dbe4ef;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 8px;
  color: var(--oa-ink);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.adcopy-draft-step:not(:disabled):hover {
  border-color: #a9bad0;
  background: #f8fbff;
  transform: translateY(-1px);
}

.adcopy-draft-step:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.adcopy-draft-step span {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef3f9;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 950;
}

.adcopy-draft-step strong {
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-draft-step small {
  min-width: 0;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-draft-step.is-complete {
  border-color: #bfe7d5;
  background: #f5fcf8;
  color: var(--oa-green);
  opacity: 1;
}

.adcopy-draft-step.is-complete span {
  background: #dff6ea;
  color: var(--oa-green);
}

.adcopy-draft-step.is-running {
  border-color: #b8ccff;
  background: #f5f8ff;
  color: #2457c5;
  opacity: 1;
}

.adcopy-draft-step.is-danger:not(:disabled) {
  border-color: #ffc9cc;
  background: #fff7f7;
  color: var(--oa-red-dark);
}

.adcopy-draft-log {
  display: grid;
  gap: 5px;
  min-height: 38px;
  max-height: 150px;
  overflow: auto;
  border-radius: var(--oa-radius-sm);
  background: #101827;
  padding: 8px;
  color: #b9c4d3;
  font-size: 11px;
  line-height: 1.45;
}

.adcopy-draft-log-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adcopy-draft-log-item strong {
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.adcopy-draft-log-item span,
.adcopy-draft-log-item code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.adcopy-draft-log-item.is-success strong {
  color: #7dd3a8;
}

.adcopy-draft-log-item.is-warning strong {
  color: #f8c66a;
}

.adcopy-draft-log-item.is-error strong {
  color: #ff8a91;
}

.adcopy-result-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.adcopy-result-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.adcopy-review-stage-title {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.adcopy-review-stage-title h4,
.adcopy-review-stage-title p {
  margin: 0;
}

.adcopy-review-stage-title p {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.adcopy-result-section-head > div:first-child {
  min-width: 0;
}

.adcopy-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.adcopy-review-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.adcopy-review-lane {
  display: grid;
  gap: 8px;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px;
  min-width: 0;
}

.adcopy-review-lane.is-human {
  background: #fff;
}

.adcopy-review-lane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.adcopy-review-lane-head > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.adcopy-review-lane-head strong {
  color: var(--oa-navy);
  font-size: 13px;
  font-weight: 950;
}

.adcopy-review-lane-head > div:first-child > span,
.adcopy-review-storage-note {
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

.adcopy-review-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.adcopy-review-counts {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.adcopy-review-counts span {
  min-height: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  padding: 4px 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.adcopy-review-counts b {
  color: var(--oa-navy);
}

.adcopy-preview-filter {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.adcopy-export-filter,
.adcopy-review-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid #dfe7f1;
  border-radius: 999px;
  background: #fff;
  padding: 0 8px 0 10px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.adcopy-export-filter {
  min-height: 36px;
  border-radius: 8px;
  padding-inline: 10px 8px;
}

.adcopy-export-filter span,
.adcopy-review-filter span {
  color: #64748b;
}

.adcopy-export-filter select,
.adcopy-review-filter select {
  height: 26px;
  min-width: 116px;
  border: 0;
  background: transparent;
  color: var(--oa-navy);
  font: inherit;
  outline: none;
  cursor: pointer;
}

.adcopy-export-filter select {
  min-width: 96px;
}

.adcopy-export-filter:has(select:disabled),
.adcopy-review-filter:has(select:disabled) {
  cursor: not-allowed;
  opacity: .5;
}

.adcopy-export-filter select:disabled,
.adcopy-review-filter select:disabled {
  cursor: not-allowed;
}

.adcopy-bulk-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.adcopy-bulk-actions .btn-compact {
  min-height: 28px;
  padding-inline: 8px;
  white-space: nowrap;
}

.adcopy-auto-actions {
  display: flex;
  justify-content: flex-end;
}

.adcopy-bulk-actions .btn-compact:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.adcopy-review-more {
  position: relative;
}

.adcopy-review-more summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  list-style: none;
  cursor: pointer;
}

.adcopy-review-more summary::-webkit-details-marker {
  display: none;
}

.adcopy-review-more-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  min-width: 180px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  padding: 5px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}

.adcopy-review-more-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 8px;
  color: #b4232c;
  font-size: 11px;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.adcopy-review-more-menu button:hover,
.adcopy-review-more-menu button:focus-visible {
  background: #fff1f2;
  outline: none;
}

.adcopy-review-more-menu button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.adcopy-review-save-state {
  min-height: 26px;
  border-radius: 999px;
  background: #ecfdf3;
  padding: 4px 8px;
  color: #067647;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.adcopy-review-save-state.is-unsaved {
  background: #fff7ed;
  color: #b54708;
}

.adcopy-review-save-state.is-temporary {
  background: #fff1f2;
  color: #b4232c;
}

.adcopy-review-storage-note {
  margin: 0;
}

.adcopy-review-action-guide {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px 10px;
  color: #475569;
  font-size: 12px;
  line-height: 1.5;
}

.adcopy-review-action-guide strong {
  color: #334155;
}

.adcopy-ai-review-note {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  border-left: 3px solid #cbd5e1;
  background: #f8fafc;
  padding: 6px 8px;
}

.adcopy-ai-review-note span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.adcopy-ai-review-note strong {
  color: #334155;
  font-size: 11px;
  line-height: 1.4;
}

.adcopy-preview-filter button {
  min-height: 28px;
  border: 1px solid #dfe7f1;
  border-radius: 999px;
  background: #fff;
  color: var(--oa-muted);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.adcopy-preview-filter button.is-active {
  border-color: #ffc4c8;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.adcopy-preview-filter button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.adcopy-preview-list,
.adcopy-validation-list {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  max-height: 460px;
  overflow: auto;
  padding-right: 2px;
}

.adcopy-generator-layout.has-result .adcopy-preview-list {
  max-height: 720px;
}

.adcopy-generator-layout.has-result .adcopy-result-section-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.adcopy-generator-layout.has-result .adcopy-review-workbench {
  grid-template-columns: minmax(0, 1fr);
  position: sticky;
  z-index: 12;
  top: 8px;
  border-radius: 10px;
  background: rgb(255 255 255 / 96%);
  padding-bottom: 6px;
  box-shadow: 0 8px 18px rgb(15 23 42 / 6%);
  backdrop-filter: blur(8px);
}

.adcopy-generator-layout.has-result .adcopy-mini-table th:first-child,
.adcopy-generator-layout.has-result .adcopy-mini-table td:first-child {
  width: 13%;
}

.adcopy-generator-layout.has-result .adcopy-mini-table th:nth-child(2),
.adcopy-generator-layout.has-result .adcopy-mini-table td:nth-child(2) {
  width: 23%;
}

.adcopy-generator-layout.has-result .adcopy-mini-table th:nth-child(3),
.adcopy-generator-layout.has-result .adcopy-mini-table td:nth-child(3) {
  width: 30%;
}

.adcopy-generator-layout.has-result .adcopy-mini-table th:nth-child(4),
.adcopy-generator-layout.has-result .adcopy-mini-table td:nth-child(4) {
  width: 34%;
}

.adcopy-generator-layout.has-result .adcopy-mini-table th,
.adcopy-generator-layout.has-result .adcopy-mini-table td,
.adcopy-generator-layout.has-result .adcopy-edit-control {
  font-size: 13px;
}

.adcopy-generator-layout.has-result .adcopy-edit-control {
  min-height: 44px;
  padding: 9px 10px;
}

.adcopy-generator-layout.has-result .adcopy-review-controls {
  grid-template-columns: minmax(130px, .9fr) minmax(160px, 1.1fr);
  gap: 8px;
  margin-top: 0;
  padding: 10px;
}

.adcopy-generator-layout.has-result .adcopy-ai-review-note {
  grid-column: 1 / -1;
  padding: 8px 10px;
}

.adcopy-generator-layout.has-result .adcopy-exclusion-field {
  grid-column: 1 / -1;
}

.adcopy-generator-layout.has-result .adcopy-exclusion-field:has(input:disabled) {
  display: none;
}

.adcopy-generator-layout.has-result .adcopy-review-controls label > span,
.adcopy-generator-layout.has-result .adcopy-ai-review-note span {
  color: #475569;
  font-size: 11px;
}

.adcopy-generator-layout.has-result .adcopy-review-select,
.adcopy-generator-layout.has-result .adcopy-review-input,
.adcopy-generator-layout.has-result .adcopy-ai-review-note strong {
  font-size: 12px;
}

.adcopy-group-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 12px;
}

.adcopy-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.adcopy-group-head::-webkit-details-marker {
  display: none;
}

.adcopy-group-head i {
  display: inline-block;
  margin-left: 3px;
  transition: transform .16s ease;
}

.adcopy-group-card:not([open]) .adcopy-group-head i {
  transform: rotate(-90deg);
}

.adcopy-group-head strong {
  min-width: 0;
  color: var(--oa-ink);
  font-size: 14px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adcopy-group-head span {
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.adcopy-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.adcopy-keyword {
  border: 1px solid #e3e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #4b5565;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 800;
}

.adcopy-keyword.is-customer {
  border-color: #bfe7d5;
  background: #effaf5;
  color: var(--oa-green);
}

.adcopy-mini-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
  border-radius: var(--oa-radius-sm);
}

.adcopy-mini-table th,
.adcopy-mini-table td {
  min-width: 0;
  padding: 8px;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.adcopy-mini-table th:first-child,
.adcopy-mini-table td:first-child {
  width: 30%;
}

.adcopy-mini-table th:nth-child(2),
.adcopy-mini-table td:nth-child(2) {
  width: 32%;
}

.adcopy-mini-table th:nth-child(3),
.adcopy-mini-table td:nth-child(3) {
  width: 30%;
}

.adcopy-mini-table th:nth-child(4),
.adcopy-mini-table td:nth-child(4) {
  width: 34%;
}

.adcopy-review-cell {
  vertical-align: top;
}

.adcopy-mini-table small {
  display: block;
  margin-top: 3px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 850;
}

.adcopy-mini-table small.is-ok {
  color: var(--oa-green);
}

.adcopy-mini-table small.is-warning {
  color: var(--oa-gold);
}

.adcopy-mini-table small.is-error {
  color: var(--oa-red-dark);
}

.adcopy-edit-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  resize: vertical;
  border: 1px solid #dce5f1;
  border-radius: 7px;
  background: #fff;
  color: var(--oa-ink);
  padding: 7px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.adcopy-edit-control:focus {
  outline: 2px solid rgb(215 17 30 / 16%);
  border-color: #f2a5aa;
  box-shadow: 0 0 0 3px rgb(215 17 30 / 8%);
}

.adcopy-row-check {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 6px;
  border: 1px solid #dfe7f1;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--oa-muted);
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.adcopy-row-check.is-pass {
  border-color: #bfe7d5;
  background: #effaf5;
  color: var(--oa-green);
}

.adcopy-row-check.is-warning {
  border-color: #f6d790;
  background: #fff8e7;
  color: var(--oa-gold);
}

.adcopy-row-check.is-error {
  border-color: #ffc9cc;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.adcopy-row-check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.adcopy-row-check-actions .adcopy-row-check {
  margin-top: 0;
}

.adcopy-regenerate-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  border: 1px solid #f0c665;
  border-radius: 6px;
  background: #fffdf7;
  color: #8a5a00;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

.adcopy-regenerate-button:hover {
  border-color: #d9a72f;
  background: #fff7e2;
}

.adcopy-regenerate-button.is-copy {
  border-color: #b9ccec;
  background: #f5f8ff;
  color: #28568f;
}

.adcopy-regenerate-button.is-undo {
  border-color: #d8e0ea;
  background: #fff;
  color: var(--oa-muted);
}

.adcopy-regenerate-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(15 23 42 / 62%);
  backdrop-filter: blur(5px);
}

.adcopy-regenerate-overlay[hidden] {
  display: none;
}

.adcopy-regenerate-dialog {
  width: min(820px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #d9e3ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 90px rgb(0 0 0 / 28%);
}

.adcopy-regenerate-dialog > header,
.adcopy-regenerate-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.adcopy-regenerate-dialog > header {
  border-bottom: 1px solid #e3eaf3;
}

.adcopy-regenerate-dialog > footer {
  border-top: 1px solid #e3eaf3;
  background: #f8fafc;
}

.adcopy-regenerate-dialog h4,
.adcopy-regenerate-dialog p {
  margin: 0;
}

.adcopy-regenerate-dialog h4 {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.35;
}

.adcopy-regenerate-dialog header p,
.adcopy-regenerate-dialog footer p {
  margin-top: 4px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
}

.adcopy-regenerate-dialog footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.adcopy-regenerate-body {
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.adcopy-regenerate-context,
.adcopy-regenerate-rationale {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #f2d99d;
  border-radius: 9px;
  background: #fffaf0;
  padding: 11px 12px;
}

.adcopy-regenerate-context .adcopy-row-check {
  flex: 0 0 auto;
  margin: 0;
}

.adcopy-regenerate-context p,
.adcopy-regenerate-rationale p {
  margin-top: 3px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
}

.adcopy-regenerate-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.adcopy-regenerate-compare > i {
  align-self: center;
  color: #94a3b8;
  font-size: 20px;
}

.adcopy-regenerate-compare article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
  background: #f8fafc;
  padding: 13px;
}

.adcopy-regenerate-compare article.is-proposal {
  border-color: #abdcc8;
  background: #f3fbf7;
}

.adcopy-regenerate-compare article > span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
}

.adcopy-regenerate-compare label {
  display: grid;
  gap: 4px;
}

.adcopy-regenerate-compare label b {
  font-size: 11px;
}

.adcopy-regenerate-compare label p {
  min-height: 42px;
  border: 1px solid #dfe7f1;
  border-radius: 7px;
  background: #fff;
  padding: 9px;
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.adcopy-regenerate-check {
  width: fit-content;
  border-radius: 999px;
  background: #edf7f2;
  color: var(--oa-green);
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 900;
}

.adcopy-regenerate-check.is-warning {
  background: #fff4d9;
  color: #8a5a00;
}

.adcopy-regenerate-check.is-error {
  background: #fff0f1;
  color: var(--oa-red-dark);
}

.adcopy-regenerate-rationale {
  display: block;
  border-color: #dfe7f1;
  background: #f8fafc;
}

.adcopy-regenerate-loading,
.adcopy-regenerate-error {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--oa-muted);
  text-align: center;
}

.adcopy-regenerate-loading i {
  color: var(--oa-red);
  font-size: 26px;
  animation: spin 1s linear infinite;
}

.adcopy-regenerate-loading strong,
.adcopy-regenerate-error strong {
  color: var(--oa-ink);
  font-size: 15px;
}

.adcopy-regenerate-error i {
  color: var(--oa-red-dark);
  font-size: 28px;
}

.adcopy-review-controls {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: #f8fafc;
  padding: 8px;
}

.adcopy-review-controls label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.adcopy-review-controls label > span {
  color: var(--oa-muted);
  font-size: 10px;
  font-weight: 950;
}

.adcopy-review-select,
.adcopy-review-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dce5f1;
  border-radius: 6px;
  background: #fff;
  color: var(--oa-ink);
  padding: 6px 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.adcopy-review-input {
  resize: vertical;
}

.adcopy-review-input:disabled {
  background: #eef2f7;
  color: #94a3b8;
  cursor: not-allowed;
}

.adcopy-review-controls.is-approved {
  border-color: #bfe7d5;
  background: #f5fcf8;
}

.adcopy-review-controls.is-revise {
  border-color: #f6d790;
  background: #fffaf0;
}

.adcopy-review-controls.is-excluded {
  border-color: #ffc9cc;
  background: #fff7f7;
}

.adcopy-review-controls.is-excluded .adcopy-exclusion-field span {
  color: var(--oa-red-dark);
}

.adcopy-mini-table em {
  display: block;
  margin-top: 5px;
  color: var(--oa-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

.adcopy-mini-table tr.is-focused td {
  background: #fff8e7;
  box-shadow: inset 3px 0 0 var(--oa-gold);
  transition: background .18s ease, box-shadow .18s ease;
}

.adcopy-validation-empty,
.adcopy-validation-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 10px;
}

.adcopy-validation-empty {
  align-items: center;
  color: var(--oa-green);
  font-size: 13px;
  font-weight: 900;
}

.adcopy-validation-details {
  gap: 0;
  border: 1px solid #dfe7f1;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  overflow: hidden;
}

.adcopy-validation-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.adcopy-validation-details summary::-webkit-details-marker {
  display: none;
}

.adcopy-validation-details summary strong {
  display: block;
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
}

.adcopy-validation-details summary small {
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.adcopy-validation-details summary::after {
  content: "\ea5f";
  font-family: "tabler-icons";
  color: var(--oa-muted);
  font-size: 16px;
  transition: transform .16s ease;
}

.adcopy-validation-details[open] summary {
  border-bottom: 1px solid var(--oa-line);
}

.adcopy-validation-details[open] summary::after {
  transform: rotate(180deg);
}

.adcopy-validation-details .adcopy-validation-list {
  padding: 10px;
}

.adcopy-validation-item > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.adcopy-validation-item.is-error > span {
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.adcopy-validation-item.is-warning > span {
  background: #fff8e7;
  color: var(--oa-gold);
}

.adcopy-validation-item strong {
  display: block;
  min-width: 0;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.adcopy-validation-item p {
  margin: 3px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.adcopy-focus-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 7px;
  border: 1px solid #dce5f1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.adcopy-focus-link:hover {
  border-color: #ffc4c8;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.adcopy-focus-link i {
  font-size: 13px;
}

.adcopy-export-details,
.adcopy-json-details {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
}

.adcopy-export-details summary,
.adcopy-json-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 10px 12px;
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 900;
}

.adcopy-export-details summary small,
.adcopy-json-details summary small {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.adcopy-json-details pre {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 360px;
  margin: 0;
  border-top: 1px solid var(--oa-line);
  background: #0f172a;
  color: #e5e7eb;
  overflow: auto;
  padding: 12px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
}

.adcopy-export-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid var(--oa-line);
  padding: 12px;
}

.performance-surface .surface-head {
  align-items: flex-start;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.performance-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 10px;
  align-items: stretch;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fffaf1;
  padding: 14px;
}

.performance-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) 150px 150px auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.performance-controls label {
  display: grid;
  gap: 5px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.performance-status-card {
  display: grid;
  align-content: center;
  min-height: 68px;
  border-left: 3px solid rgb(169 118 21 / 35%);
  background: rgb(255 255 255 / 68%);
  padding: 10px 12px;
}

.performance-status-card .status-line {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--oa-gold);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.performance-status-card .status-line span {
  display: block;
}

.performance-config-note {
  border-left: 4px solid var(--oa-red);
  background: #fff4f4;
  color: var(--oa-red-dark);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

.performance-config-note.is-soft {
  border-left-color: #6fa0d8;
  background: #f5f9ff;
  color: #2f5f99;
}

.performance-config-note.is-soft span {
  display: block;
}

.performance-brief-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#performance-advertiser-select option.is-live-advertiser {
  color: var(--oa-green);
  font-weight: 900;
}

.performance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.performance-chart-grid {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) minmax(320px, 1.2fr);
  gap: 12px;
}

.performance-chart-card {
  min-width: 0;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 12px;
}

.performance-chart-title {
  margin-bottom: 8px;
  color: var(--oa-ink);
  font-size: 13px;
  font-weight: 950;
}

.performance-trend-chart {
  height: 248px;
  min-height: 248px;
}

.performance-trend-chart.is-empty {
  display: grid;
  place-items: center;
}

.performance-dashboard-layout {
  display: grid;
  gap: 18px;
}

.performance-panel {
  min-width: 0;
  border-top: 1px solid var(--oa-line);
  padding-top: 16px;
}

.performance-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.performance-panel-head h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 950;
}

.performance-panel-head p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.panel-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.download-scope-control {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.download-scope-control label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.download-scope-control input {
  width: 13px;
  height: 13px;
  accent-color: var(--oa-red);
}

.segmented-control {
  display: inline-flex;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
}

.segmented-control button {
  border: 0;
  border-right: 1px solid var(--oa-line);
  background: transparent;
  color: var(--oa-muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.segmented-control button:last-child {
  border-right: 0;
}

.segmented-control button:hover,
.segmented-control button.is-active {
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.performance-table {
  min-width: 1280px;
}

.performance-campaign-table {
  min-width: 1600px;
  table-layout: fixed;
}

.performance-campaign-table:not(.show-conversions) .conversion-column {
  display: none;
}

.performance-campaign-table th:nth-child(1),
.performance-campaign-table td:nth-child(1) {
  width: 230px;
}

.performance-campaign-table th:nth-child(2),
.performance-campaign-table td:nth-child(2) {
  width: 250px;
}

.performance-campaign-table th:nth-child(3),
.performance-campaign-table td:nth-child(3) {
  width: 104px;
}

.performance-campaign-table th:nth-child(4),
.performance-campaign-table td:nth-child(4),
.performance-campaign-table th:nth-child(5),
.performance-campaign-table td:nth-child(5) {
  width: 78px;
}

.performance-campaign-table th:nth-child(n + 6),
.performance-campaign-table td:nth-child(n + 6) {
  width: 82px;
  white-space: nowrap;
}

.performance-campaign-table th:nth-child(8),
.performance-campaign-table td:nth-child(8) {
  width: 190px;
}

.budget-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--oa-ink);
}

.budget-progress-main,
.budget-progress-sub {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.budget-progress-main span,
.budget-progress-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-progress-main span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 800;
}

.budget-progress-main strong {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 950;
}

.budget-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eaf2;
}

.budget-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #14966b;
}

.budget-progress.is-high .budget-progress-track span {
  background: #d98200;
}

.budget-progress.is-over .budget-progress-main strong {
  color: var(--oa-red-dark);
}

.budget-progress.is-over .budget-progress-track span {
  background: var(--oa-red);
}

.budget-progress-sub,
.budget-progress-empty {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 800;
}

.performance-campaign-table th:nth-child(11),
.performance-campaign-table td:nth-child(11) {
  width: 98px;
}

.performance-campaign-table th:nth-child(15),
.performance-campaign-table td:nth-child(15),
.performance-campaign-table th:nth-child(16),
.performance-campaign-table td:nth-child(16),
.performance-campaign-table th:nth-child(17),
.performance-campaign-table td:nth-child(17) {
  width: 88px;
}

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.sort-header:hover,
.sort-header.is-active {
  color: var(--oa-red-dark);
}

.sort-indicator {
  color: var(--oa-subtle);
  font-size: 11px;
  line-height: 1;
}

.sort-header.is-active .sort-indicator {
  color: var(--oa-red-dark);
}

.objective-select {
  width: 82px;
  min-height: 34px;
  border: 1px solid var(--oa-border);
  border-radius: 8px;
  background: #fff;
  color: var(--oa-ink);
  font: inherit;
  font-weight: 850;
  padding: 6px 26px 6px 10px;
}

.objective-select:focus {
  border-color: var(--oa-red);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
  outline: none;
}

.objective-select:disabled {
  color: var(--oa-muted);
  background: #f8fafc;
}

.campaign-cell,
.advertiser-cell,
.industry-cell {
  min-width: 0;
}

.campaign-group-row td {
  background: #f8fafc;
  font-weight: 850;
}

.campaign-child-row td {
  background: #fff;
}

.ad-group-row td {
  background: #fcfdff;
}

.ad-row td {
  background: #fff;
  color: #263247;
}

.nested-row td {
  border-top-style: dashed;
}

.nested-row.is-deeper td:first-child {
  padding-left: 28px;
}

.group-toggle,
.row-expander {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--oa-ink);
  padding: 0;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.row-expander {
  width: 100%;
  font-weight: 850;
}

.campaign-cell-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.campaign-cell-line .row-expander {
  flex: 1 1 auto;
  min-width: 0;
}

.hourly-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 62px;
  height: 28px;
  gap: 4px;
  padding: 0 9px;
  border-color: #d7e1ee;
  border-radius: 999px;
  background: #fff;
  color: #59687d;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.hourly-toggle:hover {
  border-color: #c7d3e2;
  background: #f8fafc;
  color: #344256;
}

.hourly-toggle.is-active {
  border-color: #f0b86e;
  background: #fff8e7;
  color: #a15c00;
}

.hourly-toggle i {
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

.hourly-toggle span {
  display: inline;
  line-height: 1;
}

.row-expander:disabled {
  cursor: default;
  opacity: .72;
}

.group-toggle:hover,
.row-expander:hover {
  color: var(--oa-red-dark);
}

.group-toggle i,
.row-expander i {
  flex: 0 0 auto;
  color: var(--oa-muted);
  font-size: 16px;
}

.nested-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid #d7e1ee;
  border-radius: 999px;
  background: #f7faff;
  color: #4d5d73;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

#toggle-performance-conversions.is-active {
  border-color: #ffc4c8;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.campaign-name,
.text-ellipsis {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-name {
  margin-bottom: 0;
}

.hourly-report-row td {
  background: #f8fafc;
}

.hourly-report-shell {
  display: grid;
  gap: 12px;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.hourly-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hourly-report-head h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 950;
}

.hourly-report-head p,
.hourly-report-note {
  margin: 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
}

.hourly-report-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.hourly-report-actions .btn-secondary.is-active {
  border-color: #ffc4c8;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.hourly-date-control {
  width: 142px;
  min-height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.hourly-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.hourly-summary-grid .metric {
  padding: 11px 12px;
}

.hourly-summary-grid .metric strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.12;
}

.hourly-summary-grid .metric:first-child {
  grid-column: span 2;
}

.hourly-insight-strip {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr 1.4fr;
  gap: 8px;
}

.hourly-insight-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  background: #fbfcff;
  padding: 10px 12px;
}

.hourly-insight-card span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.hourly-insight-card strong {
  color: var(--oa-ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.hourly-insight-card em {
  color: var(--oa-subtle);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.hourly-insight-card.is-watch {
  border-color: #f4d28d;
  background: #fffbf0;
}

.hourly-insight-card.is-watch strong {
  color: var(--oa-gold);
}

.hourly-insight-card.is-alert {
  border-color: #ffc4c8;
  background: #fff5f5;
}

.hourly-insight-card.is-alert strong {
  color: var(--oa-red-dark);
}

.hourly-recommendation-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  border: 1px solid #ffc4c8;
  border-radius: 999px;
  background: #fff5f5;
  color: var(--oa-red-dark);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.hourly-report-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  background: #fbfcff;
  padding: 6px 10px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.hourly-report-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.hourly-report-legend em {
  margin-left: auto;
  color: var(--oa-subtle);
  font-style: normal;
  font-weight: 800;
}

.legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.legend-dot.is-spend {
  background: var(--oa-chart-spend);
}

.legend-dot.is-impressions {
  background: var(--oa-chart-impressions);
}

.legend-dot.is-clicks {
  background: var(--oa-chart-clicks);
}

.hourly-report-chart {
  height: 270px;
  min-height: 270px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
}

.hourly-report-chart.is-empty {
  display: grid;
  place-items: center;
}

.hourly-report-table-scroll {
  max-height: 292px;
  overflow: auto;
}

.hourly-report-table {
  min-width: 860px;
}

.benchmark-table {
  min-width: 1120px;
}

.performance-table .btn-secondary {
  min-height: 30px;
}

.performance-pagination {
  justify-content: flex-end;
  margin-top: 10px;
}

.performance-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ads-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--oa-line);
  border-radius: 999px;
  background: #fff;
  color: var(--oa-muted);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ads-status-pill.active,
.ads-status-pill.enabled,
.ads-status-pill.approved {
  border-color: #bfe7d5;
  background: #effaf5;
  color: var(--oa-green);
}

.ads-status-pill.paused,
.ads-status-pill.pending,
.ads-status-pill.partial-active {
  border-color: #f4d28d;
  background: #fff8e7;
  color: var(--oa-gold);
}

.ads-status-pill.rejected,
.ads-status-pill.archived,
.ads-status-pill.deleted {
  border-color: #ffc9cc;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.muted-text {
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1120px) {
  .adcopy-generator-layout {
    grid-template-columns: 1fr;
  }

  .adcopy-generator-layout.has-result.show-source-panel,
  .adcopy-generator-layout.has-result .adcopy-result-section-head,
  .adcopy-generator-layout.has-result .adcopy-review-workbench,
  .adcopy-generator-layout.has-result .adcopy-review-controls {
    grid-template-columns: 1fr;
  }

  .adcopy-preview {
    position: static;
  }

  .adcopy-generator-layout.has-result.show-source-panel .adcopy-preview {
    position: static;
  }

  .performance-controls {
    grid-template-columns: 1fr;
  }

  .performance-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-filter-grid .btn-command {
    grid-column: 1 / -1;
  }

  .performance-status-card {
    border-top: 3px solid rgb(169 118 21 / 35%);
    border-left: 0;
  }

  .performance-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hourly-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adcopy-upload-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adcopy-guide-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adcopy-purpose-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adcopy-draft-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hourly-insight-strip {
    grid-template-columns: 1fr;
  }

  .performance-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-chart-card:first-child {
    grid-column: 1 / -1;
  }

  .performance-brief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .doc-actions,
  .performance-panel-head {
    justify-content: flex-start;
  }

  .adcopy-generator-surface .doc-actions {
    justify-items: start;
  }

  .adcopy-action-group {
    justify-content: flex-start;
  }

  .adcopy-safe-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .adcopy-safe-note > div {
    display: grid;
  }

  .adcopy-import-panel summary {
    display: grid;
    align-items: start;
    min-height: 0;
    padding-block: 12px;
  }

  .adcopy-import-panel summary small {
    text-align: left;
    white-space: normal;
  }

  .adcopy-guide-panel summary {
    display: grid;
    align-items: start;
    min-height: 0;
    padding-block: 12px;
  }

  .adcopy-guide-panel summary small {
    text-align: left;
    white-space: normal;
  }

  .adcopy-summary-grid,
  .adcopy-purpose-steps,
  .adcopy-guide-steps,
  .adcopy-upload-checklist,
  .adcopy-snapshot-controls,
  .adcopy-draft-controls,
  .adcopy-draft-steps,
  .adcopy-form .grid-2,
  .adcopy-form .grid-3,
  .adcopy-policy-grid {
    grid-template-columns: 1fr;
  }

  .adcopy-panel-intro {
    grid-template-columns: 1fr;
  }

  .adcopy-source-toggle {
    justify-self: start;
  }

  .adcopy-panel-step {
    width: fit-content;
  }

  .performance-controls,
  .performance-filter-grid,
  .performance-chart-grid,
  .performance-brief-grid,
  .performance-detail-summary,
  .hourly-insight-strip,
  .hourly-summary-grid,
  .performance-kpi-grid {
    grid-template-columns: 1fr;
  }

  .hourly-report-head {
    display: grid;
  }

  .hourly-summary-grid .metric:first-child {
    grid-column: auto;
  }

  .hourly-report-legend em {
    flex-basis: 100%;
    margin-left: 0;
  }

  .hourly-report-actions {
    justify-content: flex-start;
  }

  .performance-chart-card:first-child {
    grid-column: auto;
  }

  .input-with-action {
    grid-template-columns: 1fr;
  }

  .adcopy-preset-panel {
    display: grid;
  }

  .adcopy-preset-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .adcopy-policy-grid .field:nth-child(3) {
    grid-column: auto;
  }

  .adcopy-result-section-head {
    display: grid;
    justify-items: start;
  }

  .adcopy-generator-layout.has-result .adcopy-review-workbench {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
  }

  .adcopy-mini-table {
    min-width: 0;
    border: 0;
    background: transparent;
  }

  .adcopy-mini-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .adcopy-mini-table tbody,
  .adcopy-mini-table tr,
  .adcopy-mini-table td {
    display: block;
    width: 100% !important;
  }

  .adcopy-mini-table tbody {
    display: grid;
    gap: 10px;
  }

  .adcopy-mini-table tr {
    overflow: hidden;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    background: #fff;
  }

  .adcopy-mini-table td {
    border: 0;
    border-bottom: 1px solid #edf1f5;
    padding: 10px;
  }

  .adcopy-mini-table td:last-child {
    border-bottom: 0;
  }

  .adcopy-mini-table td::before {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    content: attr(data-label);
    font-size: 11px;
    font-weight: 950;
  }

  .adcopy-validation-details summary {
    display: grid;
    align-items: start;
  }

  .adcopy-validation-details summary small {
    text-align: left;
  }

  .adcopy-preview-actions,
  .adcopy-bulk-actions {
    justify-content: flex-start;
  }

  .adcopy-review-lane-head,
  .adcopy-review-toolbar {
    display: grid;
    justify-items: start;
  }

  .adcopy-review-counts {
    justify-content: flex-start;
  }

  .adcopy-review-more-menu {
    right: auto;
    left: 0;
  }

  .adcopy-preview-filter,
  .adcopy-review-filter {
    justify-content: flex-start;
  }

  .adcopy-review-lane-head,
  .adcopy-review-toolbar,
  .adcopy-preview-filter,
  .adcopy-review-counts,
  .adcopy-bulk-actions {
    width: 100%;
  }

  .adcopy-regenerate-overlay {
    padding: 10px;
  }

  .adcopy-regenerate-dialog {
    max-height: calc(100dvh - 20px);
  }

  .adcopy-regenerate-dialog > header,
  .adcopy-regenerate-dialog > footer {
    align-items: flex-start;
    padding: 14px;
  }

  .adcopy-regenerate-dialog > footer {
    display: grid;
  }

  .adcopy-regenerate-body {
    padding: 14px;
  }

  .adcopy-regenerate-compare {
    grid-template-columns: 1fr;
  }

  .adcopy-regenerate-compare > i {
    justify-self: center;
    transform: rotate(90deg);
  }
}

.mail-review-table {
  min-width: 1180px;
}

.mail-review-table th:nth-child(1),
.mail-review-table td:nth-child(1) {
  width: 120px;
}

.mail-review-table th:nth-child(2),
.mail-review-table td:nth-child(2) {
  min-width: 220px;
}

.mail-review-table th:nth-child(3),
.mail-review-table td:nth-child(3),
.mail-review-table th:nth-child(4),
.mail-review-table td:nth-child(4) {
  min-width: 360px;
}

.mail-source-text,
.mail-rag-draft {
  min-height: 180px;
  max-height: 320px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.mail-source-text[readonly] {
  background: #f6f2ea;
  color: var(--oa-muted);
  cursor: default;
}

.mail-rag-hint {
  margin: 7px 0 0;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.45;
}

.manual-rag-submit {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(230, 0, 18, .06), rgba(255, 255, 255, .92));
}

.manual-rag-submit h3 {
  margin: 4px 0 8px;
  font-size: 22px;
  line-height: 1.2;
}

.manual-rag-submit p {
  margin: 0;
  color: var(--oa-muted);
  line-height: 1.55;
}

.manual-rag-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manual-rag-form textarea,
.manual-rag-form .btn-command,
.manual-rag-form .status-line {
  grid-column: 1 / -1;
}

.manual-rag-form textarea {
  min-height: 150px;
}

.manual-rag-list {
  display: grid;
  gap: 14px;
}

.manual-rag-item {
  padding: 16px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fffdf8;
}

.manual-rag-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.manual-rag-item-head h3 {
  margin: 6px 0 4px;
  font-size: 18px;
  line-height: 1.3;
}

.manual-rag-item-head p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.status-pill.is-live {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
}

.status-pill.is-muted {
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.manual-rag-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.manual-rag-edit-grid label,
.manual-rag-content-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}

.manual-rag-content-field {
  margin-top: 10px;
}

.manual-rag-content-field textarea {
  min-height: 220px;
}

.faq-admin-notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #ffd5d8;
  border-left: 4px solid var(--oa-red);
  border-radius: 8px;
  background: #fff7f7;
  color: var(--oa-ink);
}

.faq-admin-notice strong {
  font-size: 14px;
  font-weight: 950;
}

.faq-admin-notice span {
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.faq-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
  gap: 16px;
  align-items: start;
}

.faq-admin-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fffdf8;
}

.faq-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.faq-admin-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
}

.faq-admin-card-head p {
  margin: 5px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.faq-category-form,
.faq-item-form {
  display: grid;
  gap: 10px;
}

.faq-category-form {
  grid-template-columns: minmax(0, 1fr) 88px;
}

.faq-category-form .btn-command,
.faq-item-form .btn-command,
.faq-item-form textarea,
.faq-item-form #faq-item-source {
  grid-column: 1 / -1;
}

.faq-item-form textarea {
  min-height: 150px;
}

.faq-category-admin-list,
.faq-item-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.faq-admin-row,
.faq-admin-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--oa-line);
  border-radius: 8px;
  background: #fff;
}

.faq-admin-row strong,
.faq-admin-item h3 {
  display: block;
  margin: 0;
  color: var(--oa-ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.35;
}

.faq-admin-row span,
.faq-admin-item small {
  display: block;
  margin-top: 5px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.faq-admin-item-main {
  min-width: 0;
}

.faq-admin-item-main h3 {
  margin-top: 8px;
}

.faq-admin-item-main p {
  display: -webkit-box;
  max-height: 84px;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.faq-admin-row.is-deleted,
.faq-admin-item.is-deleted {
  background: #f8fafc;
  opacity: .66;
}

.campaign-intake-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px minmax(240px, auto);
  gap: 12px;
  align-items: end;
}

.campaign-intake-toolbar label,
.campaign-intake-ops label {
  display: grid;
  gap: 6px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 900;
}

.campaign-intake-toolbar .status-line {
  align-self: center;
  margin: 0;
}

.campaign-intake-list {
  overflow-x: auto;
  border-top: 1px solid var(--oa-line);
}

.campaign-intake-header,
.campaign-intake-summary {
  display: grid;
  grid-template-columns: 68px minmax(220px, 1.25fr) 106px minmax(100px, .7fr) minmax(90px, .65fr) minmax(120px, .85fr) minmax(120px, .8fr) 110px minmax(220px, 1.2fr);
  gap: 12px;
  align-items: center;
  min-width: 1180px;
}

.campaign-intake-header {
  min-height: 34px;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--oa-line);
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 950;
}

.campaign-intake-tree {
  display: grid;
  gap: 0;
}

.campaign-intake-record {
  min-width: 1180px;
  border-bottom: 1px solid var(--oa-line);
}

.campaign-intake-record summary::-webkit-details-marker,
.intake-section summary::-webkit-details-marker {
  display: none;
}

.campaign-intake-summary {
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--oa-muted);
  font-size: 13px;
  font-weight: 800;
}

.campaign-intake-record[open] > .campaign-intake-summary {
  border-bottom: 1px solid #efe4d8;
}

.campaign-intake-receipt {
  color: var(--oa-ink);
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}

.campaign-intake-status-pill {
  justify-self: start;
  border: 1px solid #d7cec0;
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 900;
  background: #fff;
}

.campaign-intake-detail {
  padding: 0 0 14px 26px;
  border-left: 3px solid var(--oa-red);
}

.campaign-intake-inline-control {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 850;
}

.intake-step-badge {
  color: var(--oa-red);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.intake-section {
  border-top: 1px solid var(--oa-line);
}

.intake-section summary {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  cursor: pointer;
  color: var(--oa-ink);
  font-weight: 900;
}

.intake-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  height: 22px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.campaign-intake-record[open] > .campaign-intake-summary .intake-toggle i,
.intake-section[open] > summary .intake-toggle i {
  transform: rotate(90deg);
}

.intake-toggle i {
  transition: transform .16s ease;
}

.intake-toggle-label::before {
  content: "펼치기";
}

.campaign-intake-record[open] > .campaign-intake-summary .intake-toggle-label::before,
.intake-section[open] > summary .intake-toggle-label::before {
  content: "접기";
}

.intake-section-body {
  padding: 0 0 10px 92px;
}

.intake-adgroup-section {
  margin-left: 14px;
}

.intake-ad-section {
  margin-left: 28px;
}

.intake-ads-list {
  display: grid;
  gap: 0;
}

.intake-kv-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.intake-kv-table th,
.intake-kv-table td {
  border-bottom: 1px solid #ebe3d8;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.intake-kv-table th {
  width: 180px;
  color: var(--oa-muted);
  font-weight: 900;
  white-space: nowrap;
}

.intake-kv-table td {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--oa-ink);
  font-weight: 800;
}

.intake-kv-table td span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.btn-icon.intake-copy-value {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--oa-muted);
  cursor: pointer;
}

.btn-icon.intake-copy-value:hover {
  border-color: #e7d7c7;
  color: var(--oa-red);
  background: #fff8f2;
}

.btn-icon.intake-copy-value:disabled {
  cursor: not-allowed;
  opacity: .35;
}

.empty-state.compact {
  padding: 12px;
  border: 1px dashed var(--oa-line);
  border-radius: 8px;
  color: var(--oa-muted);
  font-weight: 800;
}

@media (max-width: 980px) {
  .manual-rag-submit,
  .manual-rag-form,
  .manual-rag-edit-grid,
  .faq-admin-grid,
  .faq-category-form,
  .campaign-intake-toolbar {
    grid-template-columns: 1fr;
  }

  .manual-rag-item-head {
    flex-direction: column;
  }

  .campaign-intake-detail {
    padding-left: 18px;
  }

  .intake-section summary {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .intake-section-body {
    padding-left: 34px;
  }

  .intake-adgroup-section,
  .intake-ad-section {
    margin-left: 10px;
  }

  .intake-kv-table th {
    width: 128px;
  }
}

.btn-secondary:disabled,
.btn-plain:disabled,
.btn-icon:disabled,
.btn-danger:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}

.url-cell {
  overflow-wrap: anywhere;
}

.impact-cell {
  max-width: 260px;
  color: var(--oa-muted);
  font-size: 12px;
}

.landing-action-cell {
  display: grid;
  max-width: 560px;
  min-width: 280px;
  gap: 8px;
}

.landing-action-cell p {
  margin: 0;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.6;
}

.landing-action-cell .source-chip {
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
}

#landing-table,
#favicon-table {
  min-width: 900px;
}

.table-scroll {
  overflow-x: auto;
}

.official-log-grid th:nth-child(1),
.official-log-grid td:nth-child(1) {
  width: 170px;
}

.official-log-grid th:nth-child(4),
.official-log-grid td:nth-child(4) {
  min-width: 260px;
}

.official-log-grid th:nth-child(5),
.official-log-grid td:nth-child(5) {
  min-width: 420px;
  line-height: 1.55;
}

.guide-workspace {
  display: grid;
  gap: 14px;
}

.guide-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.guide-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
}

.guide-admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.guide-tab {
  --guide-color: var(--oa-red-dark);
  --guide-hover-bg: #fff5f5;
  --guide-hover-border: #ffb3b8;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: var(--oa-ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.guide-tab[data-guide-deck="advertiser"],
.guide-tab[data-admin-guide-deck="advertiser"] {
  --guide-color: #9b1c22;
  --guide-hover-bg: #fff5f5;
  --guide-hover-border: #f2a5aa;
}

.guide-tab[data-guide-deck="setup"],
.guide-tab[data-admin-guide-deck="setup"] {
  --guide-color: var(--oa-blue);
  --guide-hover-bg: #f1f7ff;
  --guide-hover-border: #9fc3eb;
}

.guide-tab[data-guide-deck="pixel"],
.guide-tab[data-admin-guide-deck="pixel"] {
  --guide-color: var(--oa-teal);
  --guide-hover-bg: #effcf9;
  --guide-hover-border: #8fd3c9;
}

.guide-tab span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--guide-color) 34%, #fff);
  border-radius: 5px;
  color: var(--guide-color);
  font-family: var(--oa-mono);
  font-size: 11px;
  font-weight: 950;
}

.guide-tab:hover {
  border-color: var(--guide-hover-border);
  background: var(--guide-hover-bg);
  color: var(--guide-color);
}

.guide-tab.is-active {
  border-color: var(--guide-color);
  background: var(--guide-color);
  color: #fff;
}

.guide-tab.is-admin-visible-disabled::after {
  content: "OFF";
  margin-left: auto;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 900;
  opacity: .72;
}

.guide-tab:hover span {
  border-color: color-mix(in srgb, var(--guide-color) 42%, #fff);
  background: #fff;
  color: var(--guide-color);
}

.guide-tab.is-active span {
  border-color: rgb(255 255 255 / 48%);
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

.guide-deck-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.guide-deck-head h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 20px;
  font-weight: 950;
}

.guide-admin-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px 16px;
}

.guide-admin-deck {
  display: grid;
  gap: 18px;
}

.dev-slide-deck {
  display: grid;
  gap: 18px;
}

.dev-slide-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 440px;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #cfd6df;
  border-radius: var(--oa-radius);
  background: #fff;
  padding: clamp(22px, 4vw, 42px);
  color: #111827;
}

.dev-slide-card.guide-public-slide {
  overflow: visible;
  height: auto;
  min-height: 440px;
  aspect-ratio: auto;
  justify-content: flex-start;
  gap: 16px;
}

.dev-slide-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--oa-red);
}

.dev-slide-update {
  position: absolute;
  top: 18px;
  right: 24px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.dev-slide-main {
  display: grid;
  min-height: 0;
  gap: 18px;
}

.dev-slide-main.has-media {
  grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
  align-items: center;
}

.dev-slide-kicker {
  margin: 0 0 10px;
  color: var(--oa-red);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .02em;
}

.dev-slide-card h4 {
  margin: 0;
  max-width: 920px;
  color: #111827;
  font-size: clamp(28px, 3.2vw, 50px);
  font-weight: 950;
  line-height: 1.08;
}

.dev-slide-subtitle {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--oa-muted);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 750;
  line-height: 1.45;
}

.dev-slide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.dev-slide-grid.three,
.dev-guide-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dev-slide-grid.material {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dev-slide-grid.material .dev-slide-item {
  grid-column: span 2;
}

.dev-slide-grid.material .dev-slide-item:nth-child(n + 7) {
  grid-column: span 3;
}

.dev-slide-grid .dev-slide-item.is-long,
.dev-slide-grid.material .dev-slide-item.is-long,
.dev-slide-grid.material .dev-slide-item:nth-child(n + 7).is-long {
  grid-column: 1 / -1;
  min-height: 0;
}

.dev-slide-grid.check .dev-slide-item {
  min-height: 68px;
  border-color: #e6ccd0;
  background: #fffafa;
}

.dev-slide-item {
  min-height: 82px;
  border: 1px solid #d9dde6;
  border-radius: var(--oa-radius-sm);
  background: #fbfaf7;
  padding: 12px;
}

.dev-slide-item strong {
  display: block;
  margin-bottom: 5px;
  color: #111827;
  font-size: 14px;
  font-weight: 950;
}

.dev-slide-item span {
  display: block;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.dev-slide-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.dev-slide-pills em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #d9dde6;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  padding: 3px 8px;
}

.dev-card-code {
  overflow: auto;
  margin: 12px 0 0;
  border: 1px solid #28323f;
  border-radius: 6px;
  background: #111827;
  color: #f8fafc;
  padding: 11px 12px;
  font-family: var(--oa-mono);
  font-size: 11px;
  line-height: 1.55;
}

.dev-slide-callout {
  margin: 16px 0 0;
  border-left: 4px solid var(--oa-red);
  background: #fff4f4;
  padding: 12px 14px;
  color: #5c1f24;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.dev-guide-channel-note,
.dev-guide-note,
.dev-guide-source-note {
  margin: 14px 0 0;
  border: 1px solid #d9dde6;
  border-radius: var(--oa-radius-sm);
  background: #f8fbf3;
  padding: 11px 13px;
  color: #46556a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.dev-guide-note {
  border-color: #ffd6d9;
  background: #fff4f4;
  color: #6f232a;
}

.dev-guide-source-note {
  background: #f7fafc;
}

.dev-guide-process-grid {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.dev-guide-step-card,
.dev-pixel-event-card {
  border: 1px solid #d9dde6;
  border-radius: var(--oa-radius-sm);
  background: #fbfaf7;
  padding: 12px;
}

.dev-guide-step-card strong,
.dev-pixel-event-card strong {
  display: block;
  margin-bottom: 5px;
  color: var(--oa-red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .01em;
}

.dev-guide-step-card span,
.dev-pixel-event-card span {
  display: block;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.dev-guide-overview {
  margin-top: 16px;
  border: 1px solid #d3e6c5;
  border-radius: var(--oa-radius-sm);
  background: #f7fff4;
  padding: 14px;
}

.dev-guide-overview > strong {
  display: block;
  margin-bottom: 8px;
  color: #273923;
  font-size: 13px;
  font-weight: 950;
}

.dev-guide-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dev-guide-overview-grid ul,
.dev-guide-list {
  margin: 0;
  padding-left: 18px;
  color: #46556a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.65;
}

.dev-guide-list {
  margin-top: 14px;
}

.dev-guide-field-table {
  display: grid;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #d9dde6;
  border-radius: var(--oa-radius-sm);
  background: #fff;
}

.dev-guide-field-row {
  display: grid;
  grid-template-columns: minmax(110px, .55fr) minmax(0, 1.45fr);
  min-height: 42px;
  border-bottom: 1px solid #e7ebf0;
}

.dev-guide-field-row:last-child {
  border-bottom: 0;
}

.dev-guide-field-row strong,
.dev-guide-field-row span {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
}

.dev-guide-field-row strong {
  display: flex;
  align-items: center;
  background: #f8fafc;
  color: #111827;
  font-weight: 950;
}

.dev-guide-field-row span {
  color: #46556a;
  font-weight: 750;
}

.dev-copy-guide {
  margin-top: 14px;
  border: 1px solid #ffd8dc;
  border-radius: var(--oa-radius-sm);
  background: #fffafa;
  padding: 12px;
}

.dev-copy-guide h5 {
  margin: 0 0 8px;
  color: #7d1d25;
  font-size: 13px;
  font-weight: 950;
}

.dev-copy-guide-table {
  display: grid;
  grid-template-columns: repeat(var(--guide-columns, 3), minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #ead7d9;
  border-radius: 7px;
  background: #fff;
}

.dev-copy-guide-table > div {
  min-height: 32px;
  border-right: 1px solid #ead7d9;
  border-bottom: 1px solid #ead7d9;
  padding: 8px 10px;
  color: #46556a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.dev-copy-guide-table > div:nth-child(3n) {
  border-right: 0;
}

.dev-copy-guide-table > div:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.dev-copy-guide-table .head {
  background: #f3eee7;
  color: #111827;
  font-weight: 950;
}

.dev-pixel-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.dev-guide-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dev-guide-caption {
  margin: 0 0 6px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 900;
}

.dev-slide-media {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.dev-guide-figure {
  margin: 0;
}

.dev-guide-image-frame {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 230px;
  place-items: center;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #f3efe7;
}

.dev-guide-image-frame img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.dev-slide-media .dev-guide-figure + .dev-guide-figure {
  margin-top: 2px;
}

.dev-guide-placeholder {
  display: none;
  padding: 20px;
  color: var(--oa-muted);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.dev-guide-image-frame.is-missing img {
  display: none;
}

.dev-guide-image-frame.is-missing .dev-guide-placeholder {
  display: block;
}

.dev-guide-figure figcaption {
  margin-top: 7px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 800;
}

.dev-slide-code {
  overflow: auto;
  margin: 0;
  border: 1px solid #28323f;
  border-radius: var(--oa-radius-sm);
  background: #111827;
  color: #f8fafc;
  padding: 14px;
  font-family: var(--oa-mono);
  font-size: 12px;
  line-height: 1.55;
}

.dev-slide-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.dev-slide-footer b {
  color: var(--oa-red);
  font-family: var(--oa-mono);
}

.dev-slide-deck {
  --brand: var(--oa-red);
  --brand-dark: #a51f25;
  --radius-lg: var(--oa-radius);
  --radius-md: var(--oa-radius-sm);
}

.dev-slide-deck .slide-card {
  position: relative;
  display: flex;
  overflow: visible;
  min-height: 640px;
  aspect-ratio: auto;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #cfd6df;
  border-radius: var(--oa-radius);
  background: #fff;
  padding: clamp(22px, 4vw, 46px);
  color: #161616;
}

.dev-slide-deck .slide-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--oa-red);
}

.dev-slide-deck .slide-card.dense {
  padding: clamp(18px, 3vw, 32px);
}

.dev-slide-deck .slide-card.dense .slide-section-title {
  margin-bottom: 12px;
}

.dev-slide-deck .slide-card.dense .slide-grid {
  gap: 8px;
}

.dev-slide-deck .slide-card.dense .slide-item {
  padding: 10px 12px;
}

.dev-slide-deck .slide-card.dense .slide-item strong {
  margin-bottom: 4px;
}

.dev-slide-deck .slide-card.ad-material-slide {
  gap: 14px;
  padding-bottom: clamp(22px, 3vw, 36px);
}

.dev-slide-deck .slide-card.ad-material-slide .slide-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-item {
  grid-column: span 2;
  padding: 9px 11px;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-item.split {
  grid-column: span 3;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-item.is-long {
  grid-column: span 3;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-item strong {
  font-size: 14px;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-item span,
.dev-slide-deck .slide-card.ad-material-slide .slide-item p {
  font-size: 13px;
  line-height: 1.42;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-mini-badges {
  margin-top: 6px;
}

.dev-slide-deck .slide-card.ad-material-slide .slide-pill {
  padding: 2px 7px;
  font-size: 10px;
}

.dev-slide-deck .slide-update {
  position: absolute;
  top: 18px;
  right: 24px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.dev-slide-deck .slide-kicker {
  margin: 0 0 12px;
  color: var(--oa-red);
  font-size: 13px;
  font-weight: 950;
}

.dev-slide-deck .slide-title {
  margin: 0;
  color: #111827;
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 950;
  line-height: 1.12;
}

.dev-slide-deck .slide-subtitle {
  max-width: 720px;
  margin: 14px 0 0;
  color: #4d5358;
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.45;
}

.dev-slide-deck .slide-section-title {
  margin: 0 0 18px;
  color: #111827;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 950;
  line-height: 1.18;
}

.dev-slide-deck .slide-grid,
.dev-slide-deck .crawler-steps,
.dev-slide-deck .guide-process-grid,
.dev-slide-deck .guide-overview-grid,
.dev-slide-deck .guide-two-column,
.dev-slide-deck .guide-preview-layout,
.dev-slide-deck .pixel-event-grid,
.dev-slide-deck .pixel-screen-grid,
.dev-slide-deck .gtm-code-grid {
  display: grid;
}

.dev-slide-deck .slide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dev-slide-deck .slide-grid.three,
.dev-slide-deck .crawler-steps,
.dev-slide-deck .guide-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dev-slide-deck .slide-item,
.dev-slide-deck .guide-step-card,
.dev-slide-deck .pixel-event-card {
  border: 1px solid #d9dde5;
  border-radius: var(--oa-radius-sm);
  background: #f8fafc;
  padding: 14px;
}

.dev-slide-deck .slide-item strong,
.dev-slide-deck .pixel-event-card strong {
  display: block;
  margin-bottom: 7px;
  color: #111827;
  font-size: 15px;
  font-weight: 950;
}

.dev-slide-deck .slide-item span,
.dev-slide-deck .slide-item p,
.dev-slide-deck .pixel-event-card span {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.dev-slide-deck .guide-text-preserve-lines {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.dev-slide-deck .slide-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dev-slide-deck .slide-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9dde5;
  border-radius: 999px;
  background: #fff;
  padding: 3px 8px;
  color: #4d5358;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.dev-slide-deck .slide-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dev-slide-deck .slide-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #d9dde5;
  border-radius: var(--oa-radius-sm);
  background: #f8fafc;
  padding: 14px;
  color: #374151;
  line-height: 1.5;
}

.dev-slide-deck .slide-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--oa-red);
}

.dev-slide-deck .slide-callout {
  margin: 12px 0 0;
  border-left: 4px solid var(--oa-red);
  background: #fff7f7;
  padding: 12px 14px;
  color: #4d5358;
  font-size: 14px;
  line-height: 1.55;
}

.dev-slide-deck .copy-guide {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #d9dde5;
  border-radius: var(--oa-radius-sm);
  background: #fff;
}

.dev-slide-deck .copy-guide h3 {
  margin: 0;
  border-bottom: 1px solid #d9dde5;
  background: #fff7f7;
  padding: 8px 11px;
  color: #111827;
  font-size: 14px;
  line-height: 1.3;
}

.dev-slide-deck .copy-guide-table {
  display: grid;
  grid-template-columns: .72fr 1fr 1fr;
}

.dev-slide-deck .copy-guide-table > div {
  border-right: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5;
  padding: 7px 9px;
  color: #374151;
  font-size: 11.5px;
  line-height: 1.32;
}

.dev-slide-deck .copy-guide-table > div:nth-child(3n) {
  border-right: 0;
}

.dev-slide-deck .copy-guide-table .head {
  background: #f8fafc;
  color: #111827;
  font-weight: 850;
}

.dev-slide-deck .copy-guide .slide-callout {
  margin: 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
}

.dev-slide-deck .crawler-code {
  max-height: none;
  margin: 10px 0 0;
  border-radius: var(--oa-radius-sm);
  background: #111827;
  color: #f9fafb;
  padding: 14px;
  font-family: var(--oa-mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.dev-slide-deck .guide-process-grid {
  margin-top: 24px;
}

.dev-slide-deck .guide-step-card {
  border-color: #d9dee7;
  background: #fbfcfe;
  padding: 15px;
}

.dev-slide-deck .guide-step-card strong {
  display: block;
  margin-bottom: 8px;
  color: #a51f25;
  font-size: 13px;
}

.dev-slide-deck .guide-step-card span {
  color: #344054;
  font-size: 14px;
  line-height: 1.45;
}

.dev-slide-deck .guide-overview-box {
  margin-top: 20px;
  border: 1px solid #d6e0c2;
  border-left: 4px solid #8ba368;
  border-radius: 8px;
  background: #f6faef;
  padding: 14px 16px;
}

.dev-slide-deck .guide-overview-box > strong {
  display: block;
  margin-bottom: 10px;
  color: #263f21;
  font-size: 14px;
  font-weight: 850;
}

.dev-slide-deck .guide-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dev-slide-deck .guide-overview-grid ul {
  margin: 0;
  padding-left: 18px;
  color: #2f3b2e;
  font-size: 13px;
  line-height: 1.5;
}

.dev-slide-deck .guide-two-column {
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 18px;
  align-items: start;
}

.dev-slide-deck .guide-two-column figure,
.dev-slide-deck .guide-preview-layout figure,
.dev-slide-deck .pixel-screen-stack figure,
.dev-slide-deck .pixel-screen-grid figure {
  margin: 0;
}

.dev-slide-deck .guide-field-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #fff;
}

.dev-slide-deck .guide-field-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  border-bottom: 1px solid #edf1f5;
}

.dev-slide-deck .guide-field-row:last-child {
  border-bottom: 0;
}

.dev-slide-deck .guide-field-row strong,
.dev-slide-deck .guide-field-row span {
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.42;
}

.dev-slide-deck .guide-field-row strong {
  background: #fbfcfe;
  color: #111827;
}

.dev-slide-deck .guide-field-row span {
  color: #344054;
}

.dev-slide-deck .guide-image-frame {
  position: relative;
  display: grid;
  min-height: 260px;
  aspect-ratio: var(--guide-image-ratio, 16 / 9);
  overflow: hidden;
  border: 1.5px dashed #b7c0cc;
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 10px, #f3f5f8 10px, #f3f5f8 20px);
}

.dev-slide-deck .guide-image-frame img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.dev-slide-deck .guide-image-frame.has-image {
  min-height: 0;
  border-style: solid;
  background: #fff;
}

.dev-slide-deck .guide-image-frame.has-image img {
  display: block;
}

.dev-slide-deck .guide-image-frame.has-image .guide-placeholder {
  display: none;
}

.dev-slide-deck .guide-placeholder {
  display: grid;
  place-items: center;
  padding: 22px;
  text-align: center;
}

.dev-slide-deck .guide-placeholder strong {
  display: block;
  margin-bottom: 7px;
  color: #1f2937;
  font-size: 15px;
}

.dev-slide-deck .guide-placeholder span {
  display: block;
  color: #697077;
  font-size: 12px;
  line-height: 1.45;
}

.dev-slide-deck .guide-caption {
  margin: 8px 0 0;
  color: #4d5358;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.dev-slide-deck .guide-note,
.dev-slide-deck .pixel-mini-note {
  margin: 10px 0 0;
  border-left: 4px solid var(--oa-red);
  background: #fff7f7;
  padding: 9px 11px;
  color: #4d5358;
  font-size: 12px;
  line-height: 1.5;
}

.dev-slide-deck .guide-preview-layout {
  grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
  gap: 18px;
  align-items: start;
}

.dev-slide-deck .guide-preview-card {
  border: 1px solid #d9dee7;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.dev-slide-deck .guide-preview-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.dev-slide-deck .guide-channel-note,
.dev-slide-deck .pixel-source-note {
  margin: 10px 0 0;
  color: #4d5358;
  font-size: 12px;
  line-height: 1.5;
}

.dev-slide-deck .pixel-code {
  max-height: none;
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.dev-slide-deck .pixel-code.compact {
  font-size: 11px;
  line-height: 1.38;
}

.dev-slide-deck .pixel-event-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dev-slide-deck .pixel-event-card {
  border-color: #d9dee7;
  background: #fbfcfe;
  padding: 13px;
}

.dev-slide-deck .pixel-event-card strong {
  font-size: 14px;
}

.dev-slide-deck .pixel-event-card span {
  color: #475467;
  font-size: 12.5px;
  line-height: 1.45;
}

.dev-slide-deck .pixel-screen-stack,
.dev-slide-deck .pixel-screen-grid {
  display: grid;
  gap: 10px;
}

.dev-slide-deck .pixel-screen-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dev-slide-deck .pixel-screen-frame {
  min-height: 0;
  border-style: solid;
  background: #fff;
}

.dev-slide-deck .pixel-screen-frame.wide {
  height: clamp(150px, 17vw, 210px);
  aspect-ratio: auto;
}

.dev-slide-deck .pixel-screen-frame.compact {
  height: clamp(190px, 22vw, 260px);
  aspect-ratio: auto;
}

.dev-slide-deck .pixel-screen-frame img {
  object-position: center top;
}

.dev-slide-deck .pixel-source-note a {
  color: #1849a9;
  font-weight: 800;
  text-decoration: none;
}

.dev-slide-deck .gtm-slide > div {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 10px;
}

.dev-slide-deck .gtm-slide .slide-section-title {
  margin-bottom: 10px;
}

.dev-slide-deck .gtm-slide .guide-two-column {
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
  gap: 16px;
}

.dev-slide-deck .gtm-slide .guide-field-row {
  grid-template-columns: 108px 1fr;
}

.dev-slide-deck .gtm-slide .pixel-screen-frame.wide {
  height: clamp(132px, 15vw, 180px);
}

.dev-slide-deck .gtm-code-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.dev-slide-deck .gtm-code-grid .guide-caption {
  margin: 0 0 4px;
}

.dev-slide-deck .gtm-code-grid .pixel-code.compact {
  margin-top: 0;
  font-size: 10.3px;
  line-height: 1.28;
}

.dev-slide-deck .slide-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  color: #697077;
  font-size: 13px;
  line-height: 1.45;
}

.dev-slide-deck .slide-page-number {
  color: var(--oa-red);
  font-family: var(--oa-mono);
  font-weight: 950;
}

.dev-slide-deck .slide-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.dev-slide-deck .slide-check::before {
  content: "";
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid var(--oa-red);
  border-radius: 4px;
}

.admin-guide-slide-card {
  border-color: #b8c0cc;
  overflow: visible;
  min-height: 520px;
  height: auto;
  aspect-ratio: auto;
  justify-content: flex-start;
  box-shadow: 0 18px 44px rgb(15 23 42 / 9%);
}

.admin-guide-slide-card .dev-slide-main {
  flex: 0 0 auto;
}

.guide-editable-text {
  position: relative;
  min-width: 3ch;
  border-radius: 6px;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: background .18s ease, outline-color .18s ease, box-shadow .18s ease;
  cursor: text;
  white-space: pre-wrap;
}

.guide-editable-text:hover {
  background: rgb(255 255 255 / 72%);
  outline-color: rgb(230 0 18 / 32%);
}

.guide-editable-text:focus {
  background: #fff;
  outline-color: var(--oa-red);
  box-shadow: 0 0 0 4px rgb(230 0 18 / 11%);
}

.dev-slide-code.guide-editable-text:hover,
.dev-slide-code.guide-editable-text:focus {
  background: #111827;
  color: #f8fafc;
}

.guide-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.guide-editor-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgb(37 99 235 / 18%);
  border-radius: var(--oa-radius-sm);
  background: #f7fbff;
  padding: 12px 14px;
  color: #334155;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.guide-editor-notice strong {
  flex: 0 0 auto;
  color: #1d4ed8;
  font-weight: 950;
}

.admin-guide-slide-card {
  padding-top: clamp(62px, 5vw, 76px);
}

.admin-guide-slide-tools {
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

.admin-guide-slide-card .dev-slide-update {
  top: 50px;
}

.admin-guide-editable-card {
  position: relative;
  padding-top: 30px;
  box-shadow: inset 0 0 0 1px transparent;
}

.admin-guide-editable-card:focus-within {
  border-color: rgb(230 0 18 / 45%);
  box-shadow: inset 0 0 0 1px rgb(230 0 18 / 20%);
}

.admin-guide-card-action {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 24px;
  border: 1px solid rgb(230 0 18 / 24%);
  border-radius: 6px;
  background: #fff5f5;
  color: var(--oa-red);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.admin-guide-card-action:hover {
  border-color: rgb(230 0 18 / 55%);
  background: #fff;
}

.admin-guide-image {
  display: grid;
  gap: 12px;
}

.admin-guide-image-tools {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(160px, .9fr) minmax(160px, .9fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  padding: 10px;
}

.admin-guide-image-tools label {
  display: grid;
  grid-template-rows: auto minmax(44px, auto) auto;
  align-content: start;
  gap: 7px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.admin-guide-image-tools .control {
  min-height: 42px;
  font-size: 12px;
}

.admin-guide-image-tools .admin-guide-image-file {
  height: auto;
  min-height: 44px;
  padding: 7px;
  line-height: 1.25;
}

.admin-guide-upload-status {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.split {
  display: grid;
  grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr);
  gap: 16px;
  align-items: start;
}

.context-panel {
  position: sticky;
  top: 20px;
}

.creative-intake-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px 16px;
  color: var(--oa-muted);
  box-shadow: 0 16px 34px rgb(15 23 42 / 6%);
}

.creative-intake-footer-brand {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: min(100%, 260px);
}

.creative-intake-footer strong {
  color: var(--oa-ink);
  font-size: 14px;
  font-weight: 950;
}

.creative-intake-footer span,
.creative-intake-footer a,
.creative-intake-footer small {
  font-size: 11px;
  line-height: 1.45;
}

.creative-intake-footer a {
  color: var(--oa-red-dark);
  font-weight: 850;
  text-decoration: none;
}

.creative-intake-footer a:hover {
  text-decoration: underline;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.timeline-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--oa-radius-sm);
  background: var(--oa-red);
  color: #fff;
  font-family: var(--oa-mono);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.timeline-item strong {
  display: block;
  font-size: 13px;
}

.timeline-item div > span {
  display: block;
  margin-top: 3px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.timeline-item .timeline-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}

.surface-dark .timeline-item div > span {
  color: #aab3c4;
}

.ads-reference {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.ads-ref-head {
  display: grid;
  gap: 4px;
}

.ads-ref-head .eyebrow {
  margin-bottom: 0;
}

.ads-ref-head strong {
  color: #fff;
  font-size: 14px;
}

.ads-ref-head span {
  color: #aab3c4;
  font-size: 12px;
  line-height: 1.45;
}

.ref-mode {
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--oa-radius-sm);
  background: rgb(255 255 255 / 6%);
  overflow: hidden;
}

.ref-mode summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 10px 11px;
}

.ref-mode summary::-webkit-details-marker {
  display: none;
}

.ref-mode summary span {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ref-mode summary em {
  color: #cfd7e6;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.ref-mode-muted summary em {
  color: #ffb9bd;
}

.ads-manager-detail {
  display: grid;
  gap: 10px;
  margin: 0 10px 10px;
}

.setting-shot {
  border: 1px solid #d7dbe2;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: #111827;
  overflow: hidden;
}

.setting-shot header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid #e6e8ee;
  font-size: 12px;
  font-weight: 900;
}

.setting-shot header .ti {
  color: #5c6678;
  font-size: 15px;
}

.setting-layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 210px;
}

.setting-rail {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  border-right: 1px solid #e7e9ef;
  background: #fafafa;
  padding: 12px 9px;
  list-style: none;
}

.setting-rail li {
  position: relative;
  color: #6b7280;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.35;
}

.setting-rail li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 999px;
  background: #d8dce5;
}

.setting-rail li.is-active {
  color: #111827;
  font-weight: 950;
}

.setting-rail li.is-active::before {
  background: #111827;
}

.setting-form {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
}

.setting-form label {
  display: grid;
  gap: 5px;
  color: #111827;
  font-size: 10px;
  font-weight: 900;
}

.setting-form label > span {
  display: block;
  min-height: 28px;
  border: 1px solid #d8dce5;
  border-radius: 6px;
  background: #fff;
  color: #4b5563;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.setting-action {
  justify-self: end;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
}

.ads-manager-mini {
  margin: 0 10px 10px;
  border: 1px solid #d7dbe2;
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: #111827;
  overflow: hidden;
}

.mini-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-bottom: 1px solid #e6e8ee;
  font-size: 12px;
  font-weight: 900;
}

.mini-title .ti {
  color: #5c6678;
  font-size: 15px;
}

.mini-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 9px 10px 0;
}

.mini-steps span {
  display: block;
  border-radius: 999px;
  background: #eef0f4;
  color: #687084;
  padding: 5px 6px;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.mini-steps .is-active {
  background: #111827;
  color: #fff;
}

.mini-stage {
  display: grid;
  gap: 7px;
  padding: 10px;
}

.mini-field {
  display: grid;
  gap: 4px;
  border: 1px solid #e1e4ea;
  border-radius: 6px;
  padding: 8px;
  background: #fafafa;
}

.mini-field span {
  color: #6b7280;
  font-size: 10px;
  font-weight: 950;
}

.mini-field strong {
  color: #111827;
  font-size: 11px;
  line-height: 1.45;
}

.feed-reference {
  margin: 0 10px 10px;
  border: 1px dashed rgb(255 255 255 / 18%);
  border-radius: var(--oa-radius-sm);
  padding: 10px;
  color: #aab3c4;
  font-size: 12px;
  line-height: 1.5;
}

.feed-reference p {
  margin: 0 0 8px;
}

.feed-reference ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 17px;
}

.repeat-list {
  display: grid;
  gap: 14px;
}

.repeat-block {
  --block-accent: var(--oa-red);
  --block-border: var(--oa-line);
  --block-tint: #fff4f4;
  border: 1px solid var(--block-border);
  border-left: 5px solid var(--block-accent);
  border-radius: var(--oa-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 24px rgb(20 28 43 / 5%);
}

.repeat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 68%), rgb(255 255 255 / 30%)),
    var(--block-tint);
  border-bottom: 1px solid var(--oa-line);
}

.repeat-head strong {
  font-size: 13px;
}

.block-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.block-sequence {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: var(--oa-radius-sm);
  background: var(--block-accent);
  color: #fff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: 0 8px 18px rgb(20 28 43 / 12%);
}

.block-subtitle {
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 850;
}

.repeat-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.repeat-block.is-collapsed > .repeat-body {
  display: none;
}

.collapse-toggle .ti {
  font-size: 16px;
}

.nested {
  border-left: 5px solid var(--block-accent);
  padding-left: 12px;
}

.nested-ad {
  border-left-color: var(--block-accent);
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.mapping-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  border: 1px solid #ded6c9;
  border-radius: var(--oa-radius-sm);
  background: #faf7ef;
  padding: 12px;
}

.input-summary {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 64%), transparent),
    #faf7ef;
}

.mapping-item {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mapping-item span {
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mapping-item strong {
  min-width: 0;
  color: var(--oa-ink);
  font-family: var(--oa-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.creative-intake-page .mapping-item strong {
  font-family: var(--oa-font);
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0;
  word-break: keep-all;
}

.mapping-wide {
  grid-column: 1 / -1;
}

.summary-title {
  margin: 0;
  color: var(--oa-red-dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mapping-help {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.workbook-notice {
  display: grid;
  gap: 4px;
  max-width: 900px;
  border-left: 4px solid var(--oa-red);
  background: #fff8f0;
  padding: 10px 12px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
}

.workbook-notice strong {
  color: var(--oa-ink);
  font-size: 13px;
}

.status-line {
  min-height: 22px;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.5;
}

.status-line.ok {
  color: var(--oa-green);
}

.status-line.error {
  color: var(--oa-red-dark);
}

.status-line.warning {
  color: var(--oa-gold);
}

.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(16 21 31 / 62%);
  backdrop-filter: blur(5px);
}

.review-overlay[hidden] {
  display: none;
}

.review-modal {
  width: min(1080px, 100%);
  max-height: min(860px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--oa-line);
  border-radius: 12px;
  background: var(--oa-surface-strong);
  box-shadow: 0 30px 90px rgb(0 0 0 / 30%);
}

.review-modal > header,
.review-modal > footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--oa-line);
}

.review-modal > footer {
  border-top: 1px solid var(--oa-line);
  border-bottom: 0;
  color: var(--oa-muted);
  font-size: 13px;
}

.review-modal h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.review-badge {
  flex: 0 0 auto;
  border: 1px solid #ffc9cc;
  border-radius: 999px;
  background: #fff4f4;
  color: var(--oa-red-dark);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.review-body {
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.review-stat {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #faf7ef;
  padding: 12px;
}

.review-stat b {
  display: block;
  color: var(--oa-ink);
  font-size: 20px;
  line-height: 1.1;
}

.review-stat span {
  display: block;
  margin-top: 5px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 800;
}

.review-section {
  display: grid;
  gap: 8px;
}

.review-section h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 15px;
}

.review-section p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.review-table th,
.review-table td {
  border: 1px solid var(--oa-line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.review-table th {
  background: #eee8de;
  color: var(--oa-ink);
  font-weight: 900;
}

.login-panel {
  width: min(520px, 100%);
  margin: 42px auto;
}

.ads-learning-export-surface {
  margin-bottom: 16px;
  border-color: rgb(242 27 63 / 22%);
  background:
    linear-gradient(135deg, rgb(242 27 63 / 5%), transparent 42%),
    var(--oa-surface);
}

.ads-learning-export-surface .eyebrow {
  margin: 0 0 6px;
  color: var(--oa-red);
}

.ads-learning-export-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, .65fr) minmax(150px, .65fr) auto minmax(270px, 1.1fr);
  gap: 12px;
  align-items: end;
}

.ads-learning-export-grid > label {
  display: grid;
  gap: 6px;
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 900;
}

.ads-learning-export-grid .btn-command {
  min-height: 42px;
  white-space: nowrap;
}

.ads-learning-export-note {
  display: grid;
  gap: 3px;
  min-height: 42px;
  align-content: center;
  border-left: 3px solid rgb(242 27 63 / 28%);
  background: rgb(255 255 255 / 72%);
  padding: 8px 12px;
  color: var(--oa-muted);
  font-size: 11px;
  line-height: 1.45;
}

.ads-learning-export-note strong {
  color: var(--oa-ink);
  font-size: 12px;
}

.ads-learning-export-surface .status-line {
  margin: 12px 0 0;
}

.admin-toast {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  max-width: min(440px, calc(100vw - 32px));
  border: 1px solid rgb(21 34 59 / 16%);
  border-radius: 10px;
  background: var(--oa-ink);
  box-shadow: 0 16px 36px rgb(21 34 59 / 24%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  padding: 13px 16px;
}

.admin-toast.warning {
  border-color: rgb(245 158 11 / 50%);
  background: #7a4308;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: start;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: rgba(255, 253, 248, .82);
}

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.field-inline select {
  min-width: 150px;
  border: 1px solid var(--oa-line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--oa-ink);
  font: inherit;
  font-weight: 800;
  padding: 10px 12px;
}

.menu-settings-note {
  display: grid;
  grid-template-columns: minmax(120px, .18fr) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid #fecdd3;
  border-radius: var(--oa-radius);
  background: #fff7f7;
  padding: 14px 16px;
  color: var(--oa-ink);
}

.menu-settings-note strong {
  color: var(--oa-red);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.menu-settings-note span {
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.6;
}

.menu-settings-section {
  display: grid;
  gap: 12px;
}

.menu-settings-section h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
}

.menu-settings-section p {
  margin: 4px 0 0;
  color: var(--oa-muted);
  font-size: 13px;
}

.menu-settings-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.menu-save-button {
  min-height: 44px;
  border-radius: 9px;
  padding: 0 18px;
  font-size: 14px;
  letter-spacing: .01em;
  box-shadow: 0 14px 28px rgb(230 0 18 / 20%);
}

.menu-save-button:hover {
  background: var(--oa-red-dark);
  border-color: var(--oa-red-dark);
  box-shadow: 0 16px 32px rgb(230 0 18 / 24%);
}

.menu-save-button:focus-visible {
  outline: 3px solid rgb(230 0 18 / 18%);
  outline-offset: 3px;
}

.menu-save-button:disabled {
  box-shadow: none;
}

.menu-save-button i {
  font-size: 17px;
}

.menu-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.menu-toggle-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  min-height: 76px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px;
  cursor: pointer;
}

.menu-toggle-card:hover {
  border-color: #f0a4aa;
  background: #fffafa;
}

.menu-toggle-card.is-disabled {
  border-color: #d9e2ef;
  background: #f8fafc;
}

.menu-toggle-card.is-disabled:hover {
  border-color: #cbd5e1;
  background: #f6f8fb;
}

.menu-toggle-card.is-disabled strong,
.menu-toggle-card.is-disabled small {
  color: #64748b;
}

.menu-toggle-card input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--oa-red);
}

.menu-toggle-card strong,
.menu-toggle-card small {
  display: block;
}

.menu-toggle-card strong {
  font-size: 14px;
  font-weight: 950;
}

.menu-toggle-card small {
  margin-top: 4px;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.toolbar-note {
  color: var(--oa-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.analytics-chart-grid,
.analytics-table-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.analytics-chart-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
  margin-top: 16px;
}

.analytics-table-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.chart-box {
  width: 100%;
  height: 320px;
}

.muted-code {
  color: var(--oa-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(215, 25, 32, .26);
  border-radius: 7px;
  background: rgba(215, 25, 32, .07);
  color: var(--oa-red);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
}

.question-analytics-surface {
  margin-top: 16px;
}

.question-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 900;
}

.mini-pagination button {
  min-height: 30px;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-sm);
  background: #fff;
  color: var(--oa-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
  cursor: pointer;
}

.mini-pagination button:hover:not(:disabled) {
  border-color: var(--oa-red);
  color: var(--oa-red);
}

.mini-pagination button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.question-category-list {
  min-width: 0;
}

.question-category-table-shell {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  overflow: hidden;
}

.question-category-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.question-category-table th,
.question-category-table td {
  border-bottom: 1px solid var(--oa-line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.question-category-table th {
  background: #efe8dd;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 950;
}

.question-category-table th:nth-child(1) {
  width: 26%;
}

.question-category-table th:nth-child(2) {
  width: 92px;
}

.question-category-table th:nth-child(4) {
  width: 80px;
}

.question-category-row.is-open td {
  background: #fff8f0;
}

.question-category-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--oa-ink);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
}

.question-category-toggle strong {
  display: block;
  font-weight: 950;
}

.question-category-toggle small {
  display: block;
  margin-top: 4px;
  color: var(--oa-muted);
  font-size: 12px;
  font-weight: 700;
}

.question-row-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  border: 1px solid #ffd0d3;
  border-radius: var(--oa-radius-sm);
  color: var(--oa-red);
  font-size: 12px;
  font-weight: 950;
}

.question-category-detail td {
  background: #fffdf8;
  padding: 0 14px 14px;
}

.question-examples {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.question-examples li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid #eee4d6;
  border-radius: 7px;
  background: #fff;
  padding: 10px;
}

.question-examples p,
.question-examples small {
  display: block;
  margin: 5px 0 0;
  color: var(--oa-muted);
  font-size: 12px;
  line-height: 1.5;
}

.question-examples span {
  color: var(--oa-red);
  font-weight: 950;
  white-space: nowrap;
}

.empty-state {
  border: 1px dashed var(--oa-line-strong);
  border-radius: var(--oa-radius);
  color: var(--oa-muted);
  font-weight: 800;
  padding: 18px;
  text-align: center;
}

.notice-compose-surface + .notice-preview-surface {
  margin-top: 16px;
}

.notice-editor-shell {
  border: 1px solid var(--oa-line-strong);
  border-radius: var(--oa-radius);
  background: #fff;
  overflow: hidden;
}

.notice-toolbar {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--oa-line);
  background: #f8f4ec;
  padding: 10px;
}

.notice-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notice-tool-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid #e2d8c9;
  border-radius: 7px;
  background: #fffdf8;
  padding: 7px;
}

.notice-tool-group::before {
  content: attr(data-label);
  color: var(--oa-muted);
  font-size: 11px;
  font-weight: 950;
  padding: 0 4px;
}

.notice-tool-group button,
.notice-tool-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 1px solid #ddd4c6;
  border-radius: 6px;
  background: #fff;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 8px;
}

.notice-tool-group button {
  cursor: pointer;
}

.notice-tool-group button:hover {
  border-color: #ffc9cc;
  background: #fff4f4;
  color: var(--oa-red-dark);
}

.notice-tool-control input[type="color"] {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
}

.notice-tool-control select {
  min-height: 26px;
  border: 0;
  background: transparent;
  color: var(--oa-ink);
  font-size: 12px;
  font-weight: 900;
}

.notice-editor {
  min-height: 280px;
  background: #fff;
  color: var(--oa-ink);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.75;
  overflow: auto;
}

.notice-editor:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px rgb(230 0 18 / 11%);
}

.notice-editor:empty::before {
  content: "공지 내용을 입력해 주세요. 상단 버튼으로 굵게, 목록, 링크, 색상, 빠른 문구를 넣을 수 있습니다.";
  color: var(--oa-muted);
}

.notice-editor h2,
.notice-preview-body h2 {
  margin: 8px 0 12px;
  color: var(--oa-ink);
  font-size: 22px;
  line-height: 1.35;
}

.notice-editor blockquote,
.notice-preview-body blockquote {
  margin: 12px 0;
  border-left: 4px solid var(--oa-red);
  background: #fff5f5;
  padding: 11px 13px;
  color: #344054;
  font-weight: 800;
}

.notice-editor ul,
.notice-editor ol,
.notice-preview-body ul,
.notice-preview-body ol {
  margin: 8px 0;
  padding-left: 24px;
}

.notice-editor p,
.notice-preview-body p {
  margin: 0 0 10px;
}

.notice-editor a,
.notice-preview-source {
  color: #155eef;
  font-weight: 900;
}

.notice-preview-card {
  border-left: 5px solid var(--oa-red);
  padding: 18px;
}

.preview-eyebrow {
  margin: 0 0 8px;
  color: var(--oa-red);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.notice-preview-body {
  margin-top: 12px;
  color: #344054;
  font-size: 15px;
  line-height: 1.65;
}

.notice-preview-source {
  display: inline-flex;
  margin-top: 12px;
  font-size: 13px;
  text-decoration: none;
}

.notice-preview-source[hidden] {
  display: none;
}

.editor-list {
  display: grid;
  gap: 10px;
}

.editor-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 10px;
}

.editor-row label {
  font-size: 12px;
  font-weight: 900;
}

.preview-card {
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius);
  background: #fff;
  padding: 14px;
}

.preview-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.preview-card p {
  margin: 0;
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.55;
}

.notice-preview-card h3 {
  margin: 0;
  color: var(--oa-ink);
  font-size: 22px;
  line-height: 1.25;
}

.notice-preview-card .preview-eyebrow {
  margin: 0 0 8px;
  color: var(--oa-red);
}

.notice-preview-card .notice-preview-body p {
  margin: 0 0 10px;
  color: #344054;
  font-size: 15px;
  line-height: 1.65;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  .app-frame,
  .workspace,
  .split,
  .admin-grid,
  .analytics-chart-grid,
  .analytics-table-grid {
    grid-template-columns: 1fr;
  }

  .ads-learning-export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ads-learning-export-note {
    grid-column: 1 / -1;
  }


  .rail {
    position: static;
  }

  .context-panel {
    position: static;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-note {
    text-align: left;
  }

  .workspace.is-wide-mode .inspector .surface-body,
  .workspace.is-qa-mode .inspector .surface-body,
  .workspace.is-wide-mode .inspector .timeline,
  .workspace.is-qa-mode .inspector .timeline {
    grid-template-columns: 1fr;
  }

  .qa-layout {
    grid-template-columns: 1fr;
  }

  .faq-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .dev-slide-main.has-media {
    grid-template-columns: 1fr;
  }

  .dev-slide-grid.three,
  .dev-slide-grid.material,
  .dev-guide-process-grid,
  .dev-guide-overview-grid,
  .dev-guide-code-grid {
    grid-template-columns: 1fr;
  }

  .dev-slide-grid.material .dev-slide-item,
  .dev-slide-grid.material .dev-slide-item:nth-child(n + 7) {
    grid-column: auto;
  }

  .dev-slide-card {
    aspect-ratio: auto;
  }
}

@media (max-width: 720px) {
  .ads-learning-export-grid {
    grid-template-columns: 1fr;
  }

  .ads-learning-export-note {
    grid-column: auto;
  }

  .entry-notice-overlay {
    align-items: start;
    padding: 14px;
  }

  .entry-notice-modal {
    grid-template-columns: 1fr;
    gap: 14px;
    max-height: calc(100dvh - 28px);
    padding: 20px;
  }

  .entry-notice-mark {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }

  .entry-notice-head {
    padding-right: 38px;
  }

  .entry-notice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-notice-actions .btn-command {
    width: 100%;
  }

  .shell {
    width: calc(100% - 16px);
    padding-top: 8px;
  }

  .app-frame {
    border-radius: 12px;
  }

  .stage-head,
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .stage-head {
    grid-template-columns: 1fr;
  }

  .head-actions {
    justify-content: flex-start;
  }

  .metric-strip,
  .grid-2,
  .grid-3,
  .review-grid,
  .guide-tabs,
  .guide-admin-tabs,
  .admin-guide-image-tools,
  .list-toolbar,
  .faq-categories,
  .editor-row,
  .mapping-panel {
    grid-template-columns: 1fr;
  }

  .stage-title,
  .page-title {
    font-size: 34px;
  }

  .list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.dev-console::before {
    display: none;
  }

  .dev-slide-grid {
    grid-template-columns: 1fr;
  }

  .dev-pixel-event-grid,
  .dev-guide-field-row {
    grid-template-columns: 1fr;
  }

  .file-upload-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .file-upload-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dev-slide-card {
    min-height: 0;
    padding: 22px 18px;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }

  .entry-notice-overlay {
    display: none !important;
  }

  body.dev-guide-print {
    background: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.dev-guide-print *,
  body.dev-guide-print *::before,
  body.dev-guide-print *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body.dev-guide-print .rail,
  body.dev-guide-print .stage-head,
  body.dev-guide-print .metric-strip,
  body.dev-guide-print .surface-head,
  body.dev-guide-print .guide-toolbar,
  body.dev-guide-print .guide-deck-head,
  body.dev-guide-print .inspector {
    display: none !important;
  }

  body.dev-guide-print .shell,
  body.dev-guide-print .app-frame,
  body.dev-guide-print .stage,
  body.dev-guide-print .content,
  body.dev-guide-print .workspace,
  body.dev-guide-print .workbench,
  body.dev-guide-print .surface-body,
  body.dev-guide-print #view-guides,
  body.dev-guide-print .guide-workspace,
  body.dev-guide-print .dev-slide-deck {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.dev-guide-print .view:not(#view-guides) {
    display: none !important;
  }

  body.dev-guide-print .dev-slide-card,
  body.dev-guide-print .slide-card {
    box-sizing: border-box;
    width: 297mm;
    height: 210mm;
    min-height: 0;
    margin: 0;
    page-break-after: always;
    break-after: page;
    break-inside: avoid;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    padding: 12mm 14mm 10mm 16mm;
  }

  body.dev-guide-print .dev-slide-card.guide-public-slide {
    height: auto;
    min-height: 210mm;
    overflow: visible;
    break-inside: auto;
    page-break-inside: auto;
    justify-content: flex-start;
  }

  body.dev-guide-print .dev-slide-card:last-child,
  body.dev-guide-print .slide-card:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  body.dev-guide-print .slide-card.dense,
  body.dev-guide-print .slide-card.ad-material-slide {
    padding: 10mm 12mm 8mm 14mm;
  }

  body.dev-guide-print .slide-title {
    font-size: 32pt;
  }

  body.dev-guide-print .slide-section-title {
    margin-bottom: 7mm;
    font-size: 26pt;
  }

  body.dev-guide-print .slide-kicker {
    margin-bottom: 4mm;
    font-size: 11pt;
  }

  body.dev-guide-print .slide-subtitle {
    font-size: 17pt;
  }

  body.dev-guide-print .slide-update {
    top: 9mm;
    right: 13mm;
    font-size: 9pt;
  }

  body.dev-guide-print .slide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3mm;
  }

  body.dev-guide-print .slide-grid.three,
  body.dev-guide-print .slide-card.ad-material-slide .slide-grid,
  body.dev-guide-print .crawler-steps,
  body.dev-guide-print .guide-process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3mm;
  }

  body.dev-guide-print .pixel-event-grid,
  body.dev-guide-print .guide-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3mm;
  }

  body.dev-guide-print .slide-item {
    padding: 3mm;
  }

  body.dev-guide-print .slide-item strong {
    margin-bottom: 1.5mm;
    font-size: 10.5pt;
  }

  body.dev-guide-print .slide-item span,
  body.dev-guide-print .slide-item p {
    font-size: 9.5pt;
    line-height: 1.35;
  }

  body.dev-guide-print .slide-card.ad-material-slide {
    gap: 3mm;
  }

  body.dev-guide-print .slide-card.ad-material-slide .slide-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 2.4mm;
  }

  body.dev-guide-print .slide-card.ad-material-slide .slide-item {
    padding: 2.4mm 2.8mm;
  }

  body.dev-guide-print .slide-card.ad-material-slide .slide-item strong {
    font-size: 10pt;
  }

  body.dev-guide-print .slide-card.ad-material-slide .slide-item span,
  body.dev-guide-print .slide-card.ad-material-slide .slide-item p {
    font-size: 8.8pt;
    line-height: 1.28;
  }

  body.dev-guide-print .slide-card.ad-material-slide .slide-pill {
    padding: 1mm 2mm;
    font-size: 7.8pt;
  }

  body.dev-guide-print .copy-guide {
    margin-top: 2.5mm;
  }

  body.dev-guide-print .copy-guide h3 {
    padding: 2mm 3mm;
    font-size: 9.8pt;
  }

  body.dev-guide-print .copy-guide-table > div {
    padding: 1.6mm 2.4mm;
    font-size: 8.2pt;
    line-height: 1.22;
  }

  body.dev-guide-print .copy-guide .slide-callout,
  body.dev-guide-print .slide-callout {
    margin-top: 3mm;
    padding: 2.5mm 3mm;
    font-size: 9pt;
    line-height: 1.35;
  }

  body.dev-guide-print .crawler-code {
    background: #111827 !important;
    color: #f9fafb !important;
    font-size: 8.4pt;
    line-height: 1.28;
  }

  body.dev-guide-print .pixel-code,
  body.dev-guide-print .dev-slide-code,
  body.dev-guide-print .dev-card-code {
    background: #111827 !important;
    color: #f9fafb !important;
  }

  body.dev-guide-print .guide-two-column {
    grid-template-columns: minmax(58mm, .72fr) minmax(0, 1.28fr) !important;
    gap: 6mm;
  }

  body.dev-guide-print .guide-preview-layout {
    grid-template-columns: minmax(62mm, .78fr) minmax(0, 1.22fr) !important;
    gap: 6mm;
  }

  body.dev-guide-print .guide-field-row {
    grid-template-columns: 31mm 1fr !important;
  }

  body.dev-guide-print .guide-field-row strong,
  body.dev-guide-print .guide-field-row span {
    padding: 2.2mm 2.6mm;
    font-size: 8.8pt;
    line-height: 1.28;
  }

  body.dev-guide-print .guide-image-frame {
    min-height: 0;
    height: 100mm;
    aspect-ratio: auto !important;
  }

  body.dev-guide-print .guide-preview-layout .guide-image-frame {
    height: 102mm;
  }

  body.dev-guide-print .guide-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
  }

  body.dev-guide-print .pixel-screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3mm;
  }

  body.dev-guide-print .gtm-slide > div {
    gap: 2.5mm;
  }

  body.dev-guide-print .gtm-slide .guide-two-column {
    grid-template-columns: minmax(68mm, .78fr) minmax(0, 1.22fr) !important;
    gap: 5mm;
  }

  body.dev-guide-print .gtm-slide .guide-field-row {
    grid-template-columns: 24mm 1fr !important;
  }

  body.dev-guide-print .gtm-slide .pixel-screen-frame.wide {
    height: 39mm;
  }

  body.dev-guide-print .gtm-code-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4mm;
  }

  body.dev-guide-print .gtm-code-grid .pixel-code.compact {
    font-size: 6.7pt;
    line-height: 1.18;
  }

  body.dev-guide-print .pixel-screen-stack {
    gap: 3mm;
  }

  body.dev-guide-print .pixel-screen-frame.wide {
    height: 42mm;
    aspect-ratio: auto !important;
  }

  body.dev-guide-print .pixel-screen-frame.compact {
    height: 58mm;
    aspect-ratio: auto !important;
  }

  body.dev-guide-print .pixel-mini-note {
    margin-top: 2mm;
    padding: 2mm 2.6mm;
    font-size: 8.2pt;
  }

  body.dev-guide-print .dev-slide-card h4 {
    font-size: 31pt;
  }

  body.dev-guide-print .dev-slide-subtitle {
    font-size: 15pt;
  }

  body.dev-guide-print .dev-slide-grid {
    gap: 5mm;
    margin-top: 8mm;
  }

  body.dev-guide-print .dev-slide-grid .dev-slide-item.is-long,
  body.dev-guide-print .dev-slide-grid.material .dev-slide-item.is-long,
  body.dev-guide-print .dev-slide-grid.material .dev-slide-item:nth-child(n + 7).is-long {
    grid-column: 1 / -1;
  }

  body.dev-guide-print .dev-slide-item {
    min-height: 21mm;
    padding: 4mm;
  }

  body.dev-guide-print .dev-slide-item strong {
    font-size: 11pt;
  }

  body.dev-guide-print .dev-slide-item span,
  body.dev-guide-print .dev-slide-callout,
  body.dev-guide-print .dev-slide-footer,
  body.dev-guide-print .dev-guide-figure figcaption {
    font-size: 9pt;
  }

  body.dev-guide-print .dev-guide-image-frame {
    min-height: 70mm;
  }

  body.dev-guide-print .dev-guide-image-frame img {
    max-height: 86mm;
  }

  body.dev-guide-print .dev-slide-code {
    max-height: 76mm;
    font-size: 8pt;
  }
}