:root {
  color-scheme: light;
  --navy-950: #111c36;
  --navy-900: #162340;
  --navy-800: #1d2d4d;
  --ink: #1f2b43;
  --muted: #72809a;
  --line: #e6eaf1;
  --soft: #f6f8fb;
  --white: #ffffff;
  --orange: #ef8c35;
  --orange-dark: #d96f19;
  --orange-soft: #fff2e5;
  --green: #1f9b67;
  --green-soft: #e6f7ee;
  --red: #c94b43;
  --red-soft: #fff0ee;
  --shadow: 0 16px 42px rgba(22, 35, 64, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--soft); }
body { margin: 0; color: var(--ink); background: var(--soft); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--navy-950); color: #fff; padding: 30px 18px 22px; display: flex; flex-direction: column; z-index: 4; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 11px 36px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 21px; font-weight: 800; box-shadow: 0 8px 16px rgba(239,140,53,.24); }
.brand strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.brand span { display: block; margin-top: 3px; color: #92a1c1; font-size: 10px; letter-spacing: .04em; }
.main-nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 11px; color: #aab6cf; text-decoration: none; font-size: 13px; font-weight: 600; transition: background .2s, color .2s; }
.nav-item:hover, .nav-item.active { color: #fff; background: var(--navy-800); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--orange); }
.nav-icon { width: 20px; text-align: center; color: #91a1c2; font-size: 17px; }
.nav-item.active .nav-icon { color: var(--orange); }
.sidebar-footer { margin-top: auto; padding: 15px 12px 0; border-top: 1px solid rgba(255,255,255,.08); color: #8291b1; }
.sidebar-footer small { display: block; margin-top: 9px; font-size: 10px; line-height: 1.45; }
.status-dot { display: flex; gap: 8px; align-items: center; color: #b9c4da; font-size: 11px; }
.status-dot span { width: 7px; height: 7px; border-radius: 999px; background: #5bd49b; box-shadow: 0 0 0 4px rgba(91,212,155,.12); }

.main-content { width: calc(100% - 248px); margin-left: 248px; padding: 28px 46px 64px; max-width: 1580px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.eyebrow, .section-kicker { margin: 0 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; letter-spacing: -.04em; }
h2 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.04em; }
h3 { margin-bottom: 5px; font-size: 16px; letter-spacing: -.025em; }
.muted { color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.icon-button { position: relative; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--navy-800); }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 999px; background: var(--orange); }
.operator-chip { display: flex; align-items: center; gap: 8px; color: var(--navy-800); font-size: 12px; font-weight: 700; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-dark); font-size: 10px; font-weight: 900; }
.chevron { color: var(--muted); font-size: 14px; }
.offers-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 32px 0 23px; }
.offline-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; white-space: nowrap; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 26px; }
.metric-card { min-height: 106px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 6px 20px rgba(22,35,64,.025); }
.metric-card.accent { border-color: #f4d1aa; background: linear-gradient(135deg, #fffaf5, #fff); }
.metric-label, .metric-note { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.metric-card strong { display: block; margin: 7px 0 4px; color: var(--navy-900); font-size: 24px; letter-spacing: -.04em; }
.metric-note { color: #a7b1c4; font-size: 10px; font-weight: 600; }
.review-panel { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.panel-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.panel-tools { display: flex; gap: 9px; align-items: center; }
.search-box { display: flex; align-items: center; gap: 8px; width: 250px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--muted); }
.search-box:focus-within { border-color: #efba82; box-shadow: 0 0 0 3px var(--orange-soft); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input::placeholder { color: #98a3b6; }
.filter-button { height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy-800); font-size: 12px; font-weight: 700; }
.tabs { display: flex; gap: 25px; margin-top: 23px; border-bottom: 1px solid var(--line); }
.tab { position: relative; padding: 0 0 13px; border: 0; background: transparent; color: #98a3b6; font-size: 12px; font-weight: 800; }
.tab.active { color: var(--orange-dark); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 4px; background: var(--orange); }
.bulk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 3px; padding: 11px 13px; border: 1px solid #f5d6b3; border-radius: 11px; background: #fff8f1; }
.selection-summary { display: flex; align-items: center; gap: 9px; color: var(--navy-800); font-size: 12px; }
.selection-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 900; }
.text-button { border: 0; background: transparent; color: var(--orange-dark); font-size: 11px; font-weight: 800; }
.bulk-actions { display: flex; gap: 8px; }
.button { height: 36px; padding: 0 15px; border: 1px solid transparent; border-radius: 9px; font-size: 11px; font-weight: 800; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { background: var(--orange); color: #fff; box-shadow: 0 7px 15px rgba(239,140,53,.2); }
.button.primary:hover:not(:disabled) { background: var(--orange-dark); }
.button.secondary { border-color: #f2c89d; background: #fff; color: var(--orange-dark); }
.button.ghost { border-color: var(--line); background: #fff; color: var(--muted); }
.button.reject { border-color: #f0c4c0; background: var(--red-soft); color: var(--red); }
.offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding-top: 20px; }
.offer-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.offer-card:hover { border-color: #d6ddea; box-shadow: 0 10px 27px rgba(22,35,64,.08); transform: translateY(-2px); }
.offer-card.selected { border-color: #f1ba79; box-shadow: 0 0 0 3px var(--orange-soft); }
.card-image { position: relative; height: 145px; overflow: hidden; background: #f0f3f8; }
.card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-checkbox { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.92); box-shadow: 0 4px 10px rgba(22,35,64,.12); }
.card-checkbox input { accent-color: var(--orange); width: 14px; height: 14px; margin: 0; }
.card-status { position: absolute; top: 12px; right: 12px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--orange-dark); font-size: 9px; font-weight: 900; }
.card-status.approved { color: var(--green); }
.card-status.rejected { color: var(--red); }
.card-body { padding: 14px; }
.card-marketplace { margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.card-title { min-height: 36px; margin-bottom: 11px; color: var(--navy-900); font-size: 13px; line-height: 1.35; }
.card-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.card-price { color: var(--navy-900); font-size: 17px; font-weight: 900; letter-spacing: -.04em; }
.card-old-price { color: #a2acbd; font-size: 10px; text-decoration: line-through; }
.discount-pill { display: inline-flex; padding: 4px 6px; border-radius: 5px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 900; }
.card-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #9aa5b8; font-size: 10px; }
.card-action { width: 100%; margin-top: 13px; border-top: 1px solid var(--line); padding-top: 12px; border-radius: 0; background: transparent; color: var(--orange-dark); text-align: left; font-size: 11px; font-weight: 800; }
.empty-state { padding: 66px 20px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 13px; border-radius: 16px; background: var(--orange-soft); color: var(--orange-dark); font-size: 22px; }
.empty-state h3 { margin-bottom: 5px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }
.modal { width: min(620px, calc(100vw - 30px)); border: 0; border-radius: 18px; padding: 0; color: var(--ink); box-shadow: 0 25px 90px rgba(12,25,50,.25); }
.modal::backdrop { background: rgba(17,28,54,.55); backdrop-filter: blur(3px); }
.modal-head { display: flex; justify-content: space-between; gap: 18px; padding: 23px 25px 16px; border-bottom: 1px solid var(--line); }
.modal-close { width: 30px; height: 30px; border: 0; border-radius: 9px; background: var(--soft); color: var(--muted); font-size: 21px; line-height: 1; }
.review-detail { display: grid; grid-template-columns: 190px 1fr; gap: 21px; padding: 22px 25px; }
.review-detail-image { min-height: 160px; overflow: hidden; border-radius: 12px; background: var(--soft); }
.review-detail-image img { display: block; width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.detail-status { display: inline-flex; margin-bottom: 8px; padding: 5px 8px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-dark); font-size: 10px; font-weight: 900; }
.detail-marketplace { margin-bottom: 17px; color: var(--muted); font-size: 12px; font-weight: 700; }
.detail-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.detail-price-row strong { color: var(--navy-900); font-size: 25px; letter-spacing: -.04em; }
.detail-price-row > span:not(.discount-pill) { color: #a2acbd; font-size: 11px; text-decoration: line-through; }
.detail-list { display: grid; gap: 9px; margin: 22px 0 15px; }
.detail-list div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.detail-list dt { color: var(--muted); font-size: 11px; }
.detail-list dd { margin: 0; color: var(--navy-800); font-size: 11px; font-weight: 800; text-align: right; }
.text-link { color: var(--orange-dark); font-size: 11px; font-weight: 800; text-decoration: none; }
.modal-actions { display: flex; justify-content: space-between; gap: 12px; padding: 16px 25px 22px; border-top: 1px solid var(--line); }
.modal-actions-right { display: flex; gap: 8px; }
.confirmation-modal { max-width: 430px; padding: 28px; text-align: center; }
.confirmation-modal .modal-actions { padding: 20px 0 0; border-top: 0; }
.confirm-icon { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 17px; background: var(--orange-soft); color: var(--orange-dark); font-size: 22px; font-weight: 900; }
.confirm-copy h2 { margin-bottom: 9px; font-size: 21px; }
.confirm-copy p:last-child { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.toast { position: fixed; right: 28px; bottom: 25px; z-index: 10; max-width: 350px; padding: 12px 15px; border-radius: 11px; background: var(--navy-900); color: #fff; box-shadow: var(--shadow); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .22s, transform .22s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .main-content { padding-inline: 28px; }
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .sidebar { position: static; width: 100%; min-height: auto; padding: 18px; }
  .app-shell { display: block; }
  .brand { padding-bottom: 18px; }
  .main-nav { display: flex; overflow-x: auto; gap: 4px; padding-bottom: 5px; }
  .nav-item { min-width: max-content; padding: 9px 11px; }
  .sidebar-footer { display: none; }
  .main-content { width: 100%; margin-left: 0; padding: 20px 16px 45px; }
  .topbar { padding-bottom: 17px; }
  .offers-header { align-items: start; flex-direction: column; padding-top: 24px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .panel-topline { align-items: stretch; flex-direction: column; }
  .panel-tools { flex-direction: column; align-items: stretch; }
  .search-box { width: 100%; }
  .filter-button { width: 100%; }
  .tabs { justify-content: space-between; gap: 7px; overflow-x: auto; }
  .tab { white-space: nowrap; }
  .bulk-toolbar { align-items: stretch; flex-direction: column; }
  .bulk-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .bulk-actions .button { padding-inline: 8px; }
  .offers-grid { grid-template-columns: 1fr; }
  .review-detail { grid-template-columns: 1fr; }
  .review-detail-image { min-height: 190px; }
  .review-detail-image img { min-height: 190px; }
}
@media (max-width: 420px) {
  .topbar-actions .operator-chip > span:not(.avatar):not(.chevron) { display: none; }
  .metrics { gap: 8px; }
  .metric-card { padding: 13px; }
  .bulk-actions { grid-template-columns: 1fr; }
  .modal-actions { align-items: stretch; flex-direction: column; }
  .modal-actions-right { display: grid; grid-template-columns: 1fr 1fr; }
}


/* Mock auth gate, reimplemented directly in the canonical C1 workspace. */
.app-shell[hidden], .auth-screen[hidden] { display: none !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: linear-gradient(135deg, #f7f8fb 0%, #eef2f8 100%); }
.auth-card { width: min(100%, 430px); padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.auth-brand { margin-bottom: 34px; padding: 0; }
.auth-card h1 { margin: 9px 0 12px; color: var(--navy-900); font-size: clamp(28px, 5vw, 38px); line-height: 1.05; }
.auth-copy, .auth-note { color: var(--muted); font-size: 13px; line-height: 1.55; }
.field-label { display: block; margin: 24px 0 7px; color: var(--navy-900); font-size: 12px; font-weight: 800; }
.auth-input { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy-900); outline: none; }
.auth-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.auth-error { margin: 9px 0 0; color: #a73b3b; font-size: 12px; line-height: 1.45; }
.auth-submit { width: 100%; margin-top: 14px; }
.auth-note { margin: 18px 0 0; text-align: center; }
.logout-button { margin-left: 5px; }

/* V17H4-A parity modules */
.page-description { margin: 0.35rem 0 0; color: #728094; font-size: 0.92rem; }
.workspace-view { width: 100%; }
.overview-panel, .explore-panel, .integrations-panel, .unavailable-panel { background: #fff; border: 1px solid #e5e9ef; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(23, 38, 58, 0.04); }
.overview-panel h2, .explore-panel h2, .integrations-panel h2, .unavailable-panel h2 { margin: 0.25rem 0 0.5rem; color: #162235; }
.overview-metrics, .integration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.overview-meta { display: flex; gap: 14px; flex-wrap: wrap; color: #586779; font-size: 0.9rem; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; padding: 13px 0; }
.overview-list { margin-top: 24px; }
.overview-list h3 { margin-bottom: 12px; }
.overview-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf0f4; color: #526174; }
.overview-row strong { color: #1b2b40; }
.explore-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 22px 0 16px; }
.explore-filters label { display: grid; gap: 7px; color: #5b6878; font-size: 0.82rem; font-weight: 700; }
.explore-filters input, .explore-filters select { width: 100%; min-height: 42px; border: 1px solid #dbe2ea; border-radius: 10px; padding: 0 11px; background: #fbfcfe; color: #1d2a3a; }
.explore-summary { margin: 12px 0 16px; color: #667588; font-size: 0.9rem; }
.explore-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; color: #647286; }
.integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.integration-card { border: 1px solid #e5e9ef; border-radius: 14px; padding: 20px; background: #fbfcfe; }
.integration-card h3 { margin: 0 0 10px; color: #1a2b40; }
.integration-card strong { color: #156b57; }
.integration-card ul { padding-left: 18px; color: #536276; }
.loading-state, .error-state, .empty-inline { padding: 30px 10px; color: #697789; }
.error-state { color: #ad4b4b; }
.unavailable-panel { max-width: 760px; margin: 8px 0; }
.unavailable-badge { display: inline-block; border-radius: 999px; padding: 6px 10px; background: #fff4db; color: #986313; font-size: 0.78rem; font-weight: 800; }
@media (max-width: 900px) { .overview-metrics, .explore-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .overview-row { grid-template-columns: 1fr; gap: 5px; } }
@media (max-width: 640px) { .overview-metrics, .explore-filters, .integration-grid { grid-template-columns: 1fr; } .overview-panel, .explore-panel, .integrations-panel, .unavailable-panel { padding: 20px; } }

/* H5-C1B read-only Groups surface */
.groups-panel { background: #fff; border: 1px solid #e5e9ef; border-radius: 20px; padding: 28px; box-shadow: 0 8px 24px rgba(23, 38, 58, 0.04); }
.groups-panel h2 { margin: 0.25rem 0 0.5rem; color: #162235; }
.groups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.group-card { position: relative; min-height: 170px; padding: 20px; border: 1px solid #e5e9ef; border-radius: 16px; background: #fbfcfe; color: #1a2b40; text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.group-card:hover, .group-card:focus-visible { border-color: #c7d5e6; box-shadow: 0 10px 24px rgba(23, 38, 58, 0.08); transform: translateY(-2px); outline: none; }
.group-card h3 { margin: 22px 0 8px; font-size: 1.08rem; }
.group-card p { margin: 0; color: #697789; line-height: 1.5; }
.group-code { color: #708096; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; }
.group-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: #eef2f7; color: #526174; font-size: 0.75rem; font-weight: 800; }
.group-card > .group-status { position: absolute; top: 18px; right: 18px; }
.group-status.active { background: #e4f5ec; color: #23734e; }
.group-status.waitlist { background: #fff4db; color: #986313; }
.group-status.inactive { background: #f1f2f4; color: #6b7280; }
.group-status.unknown { background: #eef2f7; color: #526174; }
.group-create-card { display: grid; align-content: center; justify-items: start; border-style: dashed; background: #fffaf0; }
.group-create-card h3 { margin-top: 12px; }
.group-create-mark { color: #bd7b18; font-size: 1.8rem; line-height: 1; }
.group-detail-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.group-detail-back { border: 0; padding: 0; background: transparent; color: #d56b24; font: inherit; font-weight: 800; }
.group-detail-back:hover { color: #a84d15; }
.group-offers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.group-offer-card { min-width: 0; padding: 18px; border: 1px solid #e5e9ef; border-radius: 14px; background: #fbfcfe; }
.group-offer-topline, .group-offer-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-offer-topline { justify-content: space-between; color: #697789; font-size: 0.78rem; }
.group-offer-status { color: #526174; }
.group-offer-card h3 { margin: 18px 0 14px; overflow-wrap: anywhere; color: #1a2b40; font-size: 1rem; }
.group-offer-price strong { color: #156b57; }
.group-offer-original { color: #8490a0; text-decoration: line-through; font-size: 0.86rem; }
.group-offer-discount { color: #a45321; font-size: 0.82rem; font-weight: 800; }
.group-offer-meta { margin: 14px 0; color: #697789; font-size: 0.82rem; }
.group-offer-link { color: #d56b24; font-size: 0.86rem; font-weight: 800; text-decoration: none; }
.group-offer-link:hover { text-decoration: underline; }
@media (max-width: 900px) { .groups-grid, .group-offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .groups-panel { padding: 20px; } .groups-grid, .group-offers-grid { grid-template-columns: 1fr; } }

/* Safe group-association removal */
.group-offer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  flex-wrap: wrap;
}

.group-offer-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 8px 0;
}

.group-offer-remove:hover {
  color: #912018;
  text-decoration: underline;
}

.group-offer-remove:focus-visible {
  outline: 3px solid rgba(180, 35, 24, 0.25);
  outline-offset: 3px;
  border-radius: 4px;
}

.confirm-icon.danger {
  background: #fff1f0;
  color: #b42318;
}

.removal-preservation-note {
  background: #fff8ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  color: #7c2d12;
  font-weight: 600;
  line-height: 1.5;
  margin: 14px 0 0;
  padding: 12px 14px;
}

#group-remove-confirm:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* Safe group creation */
.group-create-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.group-create-modal form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.group-create-modal .modal-head {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: #fff;
  padding: 22px 25px 18px;
}

.group-create-modal .modal-head .muted {
  margin-bottom: 0;
  line-height: 1.45;
}

.group-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 20px 25px;
}

.group-create-modal .modal-actions {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  background: #fff;
  padding: 16px 25px 20px;
}

.group-create-wide {
  grid-column: 1 / -1;
}

.group-create-field {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 0.9rem;
  font-weight: 700;
}

.group-create-field input,
.group-create-field select,
.group-create-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #101828;
  font: inherit;
  font-weight: 500;
  padding: 11px 12px;
}

.group-create-field textarea {
  resize: vertical;
}

.group-create-field input:focus,
.group-create-field select:focus,
.group-create-field textarea:focus {
  border-color: #f79009;
  box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.14);
  outline: 0;
}

.group-create-field small {
  color: #667085;
  font-weight: 500;
}

.group-create-safety {
  margin: 0;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff8ed;
  color: #7c2d12;
  font-weight: 600;
  line-height: 1.5;
  padding: 12px 14px;
}

@media (max-width: 640px) {
  .group-create-modal {
    width: min(100% - 20px, 640px);
    max-height: calc(100dvh - 20px);
  }

  .group-create-modal form {
    max-height: calc(100dvh - 20px);
  }

  .group-create-modal .modal-head {
    padding: 18px 18px 15px;
  }

  .group-create-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .group-create-wide {
    grid-column: auto;
  }

  .group-create-modal .modal-actions {
    flex-direction: row;
    padding: 14px 18px 17px;
  }

  .group-create-modal .modal-actions .button {
    flex: 1;
  }
}

/* Safe group destination configuration */
.group-destination-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid #f1d4ae;
  border-radius: 14px;
  background: #fffaf2;
}

.group-destination-toolbar > div {
  display: grid;
  gap: 4px;
}

.group-destination-toolbar strong {
  color: #1a2b40;
  font-size: 0.95rem;
}

.group-destination-toolbar span {
  color: #697789;
  font-size: 0.82rem;
  line-height: 1.5;
}

.group-destination-toolbar .button {
  flex: 0 0 auto;
}

.group-destination-modal {
  width: min(600px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.group-destination-modal form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: calc(100dvh - 32px);
}

.group-destination-modal .modal-head {
  margin: 0;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e7ebf0;
}

.group-destination-modal .modal-head h2 {
  margin: 5px 0 6px;
}

.group-destination-content {
  min-height: 0;
  padding: 22px 26px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.group-destination-list {
  display: grid;
  gap: 10px;
}

.group-destination-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  padding: 14px 16px;
  border: 1px solid #dfe5ec;
  border-radius: 13px;
  background: #fbfcfe;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.group-destination-option:hover {
  border-color: #efad6c;
  background: #fffaf5;
}

.group-destination-option:has(input:checked) {
  border-color: #ef8a2f;
  background: #fff7ed;
  box-shadow: 0 0 0 2px rgba(239, 138, 47, 0.1);
}

.group-destination-option input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: #ef7f24;
}

.group-destination-option-copy {
  display: grid;
  gap: 4px;
}

.group-destination-option-copy strong {
  color: #18273b;
  font-size: 0.94rem;
}

.group-destination-option-copy small {
  color: #718096;
  font-size: 0.78rem;
}

.group-destination-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #d7dee8;
  border-radius: 13px;
  color: #697789;
  background: #fafbfd;
  line-height: 1.5;
}

.group-destination-safety {
  margin: 18px 0 0;
  padding: 15px 16px;
  border: 1px solid #f2c98f;
  border-radius: 13px;
  color: #8e3c19;
  background: #fff8ed;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.55;
}

.group-destination-content .error-state {
  margin: 16px 0 0;
}

.group-destination-modal .modal-actions {
  margin: 0;
  padding: 16px 26px;
  border-top: 1px solid #e7ebf0;
  background: #fff;
}

@media (max-width: 640px) {
  .group-destination-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .group-destination-toolbar .button {
    width: 100%;
  }

  .group-destination-modal {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .group-destination-modal form {
    max-height: calc(100dvh - 20px);
  }

  .group-destination-modal .modal-head,
  .group-destination-content,
  .group-destination-modal .modal-actions {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* Read-only publication engine surface */
.engine-panel {
  background: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(23, 38, 58, 0.04);
}

.engine-heading,
.engine-title-row,
.engine-queue-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.engine-heading {
  align-items: flex-start;
}

.engine-title-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.engine-title-row h2 {
  margin: 0.25rem 0 0.5rem;
  color: #162235;
}

.engine-state,
.engine-queue-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eef2f7;
  color: #526174;
  font-size: 0.75rem;
  font-weight: 800;
}

.engine-state span {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
}

.engine-state.running {
  background: #e4f5ec;
  color: #23734e;
}

.engine-state.paused {
  background: #fff4db;
  color: #986313;
}

.engine-state.stopped,
.engine-state.unknown {
  background: #f1f2f4;
  color: #6b7280;
}

.engine-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.engine-metric {
  min-width: 0;
}

.engine-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e5e9ef;
  border-radius: 14px;
  background: #e5e9ef;
}

.engine-details article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 104px;
  padding: 18px;
  background: #fbfcfe;
}

.engine-details span,
.engine-details small {
  color: #728094;
  font-size: 0.78rem;
}

.engine-details strong {
  overflow-wrap: anywhere;
  color: #1a2b40;
  font-size: 0.94rem;
}

.engine-queue-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #edf0f4;
}

.engine-queue-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.engine-queue-heading h3 {
  margin-bottom: 5px;
}

.engine-queue-heading > span {
  flex: 0 0 auto;
  color: #667588;
  font-size: 0.82rem;
  font-weight: 800;
}

.engine-table-scroll {
  overflow-x: auto;
  border: 1px solid #e5e9ef;
  border-radius: 14px;
}

.engine-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  text-align: left;
}

.engine-table th,
.engine-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #edf0f4;
  vertical-align: middle;
}

.engine-table th {
  background: #f7f9fc;
  color: #6a788b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.engine-table td {
  color: #526174;
  font-size: 0.82rem;
}

.engine-table tbody tr:last-child td {
  border-bottom: 0;
}

.engine-table td:first-child strong,
.engine-offer-id {
  display: block;
}

.engine-table td:first-child strong {
  max-width: 360px;
  margin-bottom: 4px;
  color: #1a2b40;
}

.engine-offer-id {
  color: #8b97a7;
  font-size: 0.72rem;
}

.engine-queue-status.queued {
  background: #eaf2ff;
  color: #315f9b;
}

.engine-queue-status.publishing {
  background: #e4f5ec;
  color: #23734e;
}

.engine-queue-status.failed {
  background: #fdebea;
  color: #a23f3a;
}

.engine-queue-status.waiting_for_affiliate_link {
  background: #fff4db;
  color: #986313;
}

.engine-empty {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px;
  border: 1px solid #dcece4;
  border-radius: 14px;
  background: #f5fbf7;
}

.engine-empty > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dff3e8;
  color: #23734e;
  font-weight: 900;
}

.engine-empty strong {
  color: #1a2b40;
}

.engine-empty p {
  margin: 4px 0 0;
  color: #697789;
  font-size: 0.82rem;
}

.engine-read-note {
  margin: 18px 0 0;
  color: #8a96a6;
  font-size: 0.75rem;
}

@media (max-width: 900px) {
  .engine-metrics,
  .engine-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .engine-panel {
    padding: 20px;
  }

  .engine-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .engine-heading .button {
    width: 100%;
  }

  .engine-metrics,
  .engine-details {
    grid-template-columns: 1fr;
  }

  .engine-queue-heading {
    flex-direction: column;
  }
}


/* Read-only publication history */
.engine-history-section {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #edf0f4;
}

.engine-history-table {
  min-width: 920px;
}

.engine-history-status,
.engine-confirmation {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 0.75rem;
  font-weight: 800;
}

.engine-history-status {
  background: #eaf2ff;
  color: #315f9b;
}

.engine-confirmation.confirmed {
  background: #e4f5ec;
  color: #23734e;
}

.engine-confirmation.unconfirmed {
  background: #fff4db;
  color: #986313;
}

@media (max-width: 640px) {
  .engine-history-section {
    margin-top: 22px;
    padding-top: 20px;
  }
}


/* Saved products */
.saved-product-action {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #dce3ed;
  border-radius: 9px;
  background: #f8fafc;
  color: #34435a;
  font-size: 11px;
  font-weight: 800;
}

.saved-product-action:hover:not(:disabled) {
  border-color: #efb36e;
  background: #fff7ed;
  color: var(--orange-dark);
}

.saved-product-action.saved {
  border-color: #bfe5d2;
  background: #eefaf4;
  color: #147a50;
}

.saved-products-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.saved-products-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.saved-products-heading h2 {
  margin: 4px 0 6px;
  color: var(--navy-900);
}

.saved-products-count {
  min-width: 130px;
  padding: 14px 16px;
  border: 1px solid #f1d6b8;
  border-radius: 12px;
  background: #fff8f0;
  text-align: center;
}

.saved-products-count strong,
.saved-products-count span {
  display: block;
}

.saved-products-count strong {
  color: var(--orange-dark);
  font-size: 24px;
}

.saved-products-count span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.saved-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 22px;
}

.saved-product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.saved-product-card:hover {
  border-color: #d6ddea;
  box-shadow: 0 10px 27px rgba(22,35,64,.08);
  transform: translateY(-2px);
}

.saved-product-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #f0f3f8;
}

.saved-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-product-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #b5bfcd;
  font-size: 38px;
}

.saved-product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e4f6ed;
  color: #147a50;
  font-size: 9px;
  font-weight: 900;
}

.saved-product-body {
  padding: 15px;
}

.saved-product-marketplace {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.saved-product-body h3 {
  min-height: 38px;
  margin: 0 0 12px;
  color: var(--navy-900);
  font-size: 13px;
  line-height: 1.4;
}

.saved-product-price {
  color: var(--navy-900);
  font-size: 17px;
}

.saved-product-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  color: #8d99aa;
  font-size: 9px;
}

.saved-product-controls {
  display: flex;
  gap: 9px;
  margin-top: 15px;
}

.saved-product-controls .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none;
}

.saved-product-remove {
  height: 36px;
  padding: 0 13px;
  border: 1px solid #efc7c3;
  border-radius: 9px;
  background: #fff7f6;
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.saved-products-empty {
  padding: 64px 20px 50px;
  text-align: center;
}

.saved-products-empty > span {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  place-items: center;
  border-radius: 18px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  font-size: 28px;
}

.saved-products-empty h3 {
  margin: 0 0 7px;
  color: var(--navy-900);
}

.saved-products-empty p {
  max-width: 430px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.saved-products-error {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 20px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 1000px) {
  .saved-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .saved-products-panel {
    padding: 20px;
  }

  .saved-products-heading {
    flex-direction: column;
  }

  .saved-products-count {
    width: 100%;
  }

  .saved-products-grid {
    grid-template-columns: 1fr;
  }

  .saved-product-controls {
    flex-direction: column;
  }
}


/* Offers additional filters */
.filter-button.active {
  border-color: #ef9a43;
  background: var(--orange-soft);
  color: #bd5c00;
}
.offers-filter-panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #f1d4b5;
  border-radius: 13px;
  background: #fffaf5;
}
.offers-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.offers-filter-grid label {
  display: grid;
  gap: 7px;
  color: #5b6878;
  font-size: .78rem;
  font-weight: 800;
}
.offers-filter-grid input,
.offers-filter-grid select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: var(--navy-900);
}
.offers-filter-grid input:focus,
.offers-filter-grid select:focus {
  border-color: #ef9a43;
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.offers-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 13px;
  color: var(--muted);
  font-size: .78rem;
}
.offers-filter-footer .text-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
@media (max-width: 1000px) {
  .offers-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .offers-filter-grid {
    grid-template-columns: 1fr;
  }
  .offers-filter-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* Integrations health panel */
.integrations-health-panel {
  display: grid;
  gap: 24px;
}

.integrations-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.integration-health-grid {
  align-items: stretch;
}

.integration-health-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 100%;
}

.integration-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.integration-card-heading h3 {
  margin: 4px 0 0;
}

.integration-provider {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.integration-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.integration-health-badge.is-success {
  color: #087443;
  background: #e9f8f0;
  border-color: #c8eed9;
}

.integration-health-badge.is-warning {
  color: #9a5900;
  background: #fff6e7;
  border-color: #f5d9a9;
}

.integration-health-badge.is-danger {
  color: #b42318;
  background: #fff0ee;
  border-color: #f4c7c2;
}

.integration-health-badge.is-neutral {
  color: var(--muted);
  background: #f3f5f8;
  border-color: var(--border);
}

.integration-health-description {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
}

.integration-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.integration-detail span {
  color: var(--muted);
  font-size: 0.82rem;
}

.integration-detail strong {
  text-align: right;
  font-size: 0.85rem;
}

.integration-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.integration-alert.is-danger {
  color: #922018;
  background: #fff4f2;
  border: 1px solid #f2cbc6;
}

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

.integration-health-metrics div {
  display: grid;
  gap: 3px;
  padding: 12px;
  text-align: center;
  background: #f8f9fb;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.integration-health-metrics strong {
  color: var(--text);
  font-size: 1.1rem;
}

.integration-health-metrics span {
  color: var(--muted);
  font-size: 0.74rem;
}

.integration-destination-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.integration-destination-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.integration-destination-list span {
  color: var(--text);
  font-weight: 700;
}

.integration-destination-list small,
.integration-privacy-note {
  color: var(--muted);
}

.integration-privacy-note {
  margin: 0;
  font-size: 0.76rem;
}

@media (max-width: 760px) {
  .integrations-heading,
  .integration-card-heading,
  .integration-detail,
  .integration-destination-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .integrations-heading .button {
    width: 100%;
  }

  .integration-health-badge {
    align-self: flex-start;
  }

  .integration-detail strong {
    text-align: left;
  }
}