/* ==========================================================================
   Admin pages ("ad2")
   --------------------------------------------------------------------------
   The admin pages wear the owner app's look: body.lp2-app and the .lp2 kit in
   pages-m2.css (headline card, list card, day headings, pill tabs, notes).
   This file adds only the admin pieces, every rule scoped to .ad2 (the page
   wrapper each admin render adds): the attention tiles, month charts, cards,
   the tools index, report cards, and the Billing pages.

   Primary text is true black; secondary no lighter than #475569. No coloured
   card top-borders.
   ========================================================================== */

.ad2 { --ad2-line: #e7ebf1; --ad2-soft: #f6f8fb; }

.ad2 .ad2-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ad2 .ad2-muted { padding: 12px 2px; color: #475569; font-size: .8rem; font-weight: 600; }
.ad2 .ad2-time { font-size: .74rem; font-weight: 700; color: #475569; white-space: nowrap; }
.ad2 .ad2-per { font-size: .7rem; font-weight: 700; color: #475569; margin-left: 1px; }
.ad2 .ad2-note { margin: 0 0 16px; }

/* A change against last month: arrow + words, never colour alone. */
.ad2 .ad2-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 750; white-space: nowrap; }
.ad2 .ad2-delta.up { color: #047857; }
.ad2 .ad2-delta.down { color: #b91c1c; }
.ad2 .sx-hero .ad2-delta { color: #fff; }
.ad2 .lp2-hero-note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }

/* Text links beside a section title. */
.ad2 .ad2-link {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px;
    font: inherit; font-size: .76rem; font-weight: 800; color: var(--lp2-deep, #065f46);
    background: none; border: 0; cursor: pointer;
}
.ad2 .ad2-link:hover { text-decoration: underline; }

/* ---- Needs attention ------------------------------------------------------ */

.ad2 .ad2-attn {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px; margin: 0 0 18px;
}
.ad2 .ad2-attn-tile {
    position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center;
    text-align: left; font: inherit; cursor: pointer;
    padding: 13px 34px 13px 13px; border-radius: 16px;
    background: #fff; border: 1px solid var(--ad2-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.ad2 .ad2-attn-tile:hover { border-color: color-mix(in srgb, var(--ad2-t) 45%, #fff); box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--ad2-t) 70%, transparent); }
.ad2 .ad2-attn-tile:active { transform: scale(.99); }
.ad2 .ad2-attn-ic {
    grid-row: span 3; width: 42px; height: 42px; border-radius: 13px;
    display: grid; place-items: center; font-size: 1.1rem;
    color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 12%, #fff);
}
.ad2 .ad2-attn-n { font-size: 1.35rem; font-weight: 800; color: #000; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ad2 .ad2-attn-lbl { font-size: .8rem; font-weight: 800; color: #000; }
.ad2 .ad2-attn-sub { font-size: .7rem; font-weight: 650; color: #475569; }
.ad2 .ad2-attn-go { position: absolute; top: 12px; right: 12px; font-size: .85rem; color: #94a3b8; }
.ad2 .ad2-attn-tile:hover .ad2-attn-go { color: var(--ad2-t); }

.ad2 .ad2-clear {
    display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
    padding: 14px 16px; border-radius: 16px; background: #ecfdf5; border: 1px solid #bbf7d0;
}
.ad2 .ad2-clear > i { font-size: 1.4rem; color: #047857; }
.ad2 .ad2-clear b { display: block; color: #000; font-weight: 800; }
.ad2 .ad2-clear span { font-size: .78rem; font-weight: 600; color: #334155; }

/* ---- Cards and two-up rows --------------------------------------------------- */

.ad2 .ad2-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 18px; }
@media (min-width: 1100px) { .ad2 .ad2-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.ad2 .ad2-duo > div > .sx-sec:first-child { margin-top: 0; }

.ad2 .ad2-card {
    background: #fff; border: 1px solid var(--ad2-line); border-radius: 18px;
    padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
.ad2 .ad2-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ad2 .ad2-card-head h3 { margin: 0; font-size: .98rem; font-weight: 800; color: #000; }
.ad2 .ad2-card-head p { margin: 3px 0 0; font-size: .74rem; font-weight: 600; color: #475569; }

.ad2 .ad2-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ad2 .ad2-kv > div { padding: 12px; border-radius: 14px; background: var(--ad2-soft); border: 1px solid #eef1f5; min-width: 0; }
.ad2 .ad2-kv span { display: block; font-size: .7rem; font-weight: 750; color: #334155; }
.ad2 .ad2-kv b { display: block; margin-top: 4px; font-size: 1.12rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ad2 .ad2-kv small { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 3px; font-size: .68rem; font-weight: 650; color: #475569; }
@media (max-width: 420px) { .ad2 .ad2-kv { grid-template-columns: minmax(0, 1fr); } }

/* ---- Month columns ---------------------------------------------------------------
   One series per chart. Bars <= 24px with 4px rounded tops, square at the
   baseline; hairline grid; the latest and the highest month carry their value,
   every bar has its own hover/focus tooltip, and "Show as table" lists all. */

.ad2 .ad2-chart { --ad2-c: #2a78d6; }
.ad2 .ad2-plot { position: relative; height: 176px; padding-left: 40px; }
.ad2 .ad2-grid { position: absolute; inset: 18px 0 22px 40px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.ad2 .ad2-grid span { position: relative; border-top: 1px solid #eef1f5; height: 0; }
.ad2 .ad2-grid span:last-child { border-top-color: #cbd5e1; }
.ad2 .ad2-grid i {
    position: absolute; right: calc(100% + 6px); top: -7px; font-style: normal;
    font-size: .62rem; font-weight: 700; color: #475569; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ad2 .ad2-cols { position: absolute; inset: 0 0 0 40px; display: flex; align-items: stretch; gap: 2px; }
.ad2 .ad2-col {
    position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    padding: 0; margin: 0; border: 0; background: none; font: inherit; cursor: default; border-radius: 6px;
}
.ad2 .ad2-col:focus-visible { outline: 2px solid var(--ad2-c); outline-offset: 1px; }
.ad2 .ad2-bar-slot { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 18px 0 0; }
.ad2 .ad2-bar { display: block; width: min(24px, 70%); background: var(--ad2-c); border-radius: 4px 4px 0 0; opacity: .55; transition: opacity .12s ease; }
.ad2 .ad2-col.is-now .ad2-bar,
.ad2 .ad2-col:hover .ad2-bar,
.ad2 .ad2-col:focus-visible .ad2-bar { opacity: 1; }
.ad2 .ad2-bar-slot em {
    font-style: normal; font-size: .6rem; font-weight: 800; color: #0f172a; margin-bottom: 3px;
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ad2 .ad2-col-lbl { height: 22px; line-height: 22px; text-align: center; font-size: .6rem; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; }
.ad2 .ad2-tip {
    display: none; position: absolute; z-index: 5; left: 50%; bottom: calc(100% - 10px); transform: translateX(-50%);
    padding: 7px 10px; border-radius: 10px; background: #0f172a; color: #fff; white-space: nowrap;
    box-shadow: 0 10px 22px -12px rgba(15, 23, 42, .6); pointer-events: none;
}
.ad2 .ad2-tip b { display: block; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad2 .ad2-tip span { font-size: .66rem; font-weight: 650; color: #cbd5e1; }
.ad2 .ad2-col:hover .ad2-tip,
.ad2 .ad2-col:focus-visible .ad2-tip { display: block; }
.ad2 .ad2-col:first-child .ad2-tip { left: 0; transform: none; }
.ad2 .ad2-col:last-child .ad2-tip { left: auto; right: 0; transform: none; }

.ad2 .ad2-table { margin-top: 10px; }
.ad2 .ad2-table summary { cursor: pointer; font-size: .74rem; font-weight: 800; color: var(--lp2-deep, #065f46); }
.ad2 .ad2-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .78rem; }
.ad2 .ad2-table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #334155; padding: 6px 4px; border-bottom: 1px solid var(--ad2-line); }
.ad2 .ad2-table td { padding: 6px 4px; border-bottom: 1px solid #f1f4f8; color: #000; font-variant-numeric: tabular-nums; }
.ad2 .ad2-table td:last-child, .ad2 .ad2-table th:last-child { text-align: right; }

/* ---- All admin tools ----------------------------------------------------------- */

.ad2 .ad2-tools { margin: 4px 0 8px; padding: 4px 16px 12px; background: #fff; border: 1px solid var(--ad2-line); border-radius: 18px; }
.ad2 .ad2-tools > summary {
    display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; list-style: none;
    font-size: .98rem; font-weight: 800; color: #000;
}
.ad2 .ad2-tools > summary::-webkit-details-marker { display: none; }
.ad2 .ad2-tools > summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: .85rem; color: #475569; transition: transform .15s ease; }
.ad2 .ad2-tools[open] > summary::after { transform: rotate(180deg); }
.ad2 .ad2-tools-group { padding: 8px 0; border-top: 1px solid #f1f4f8; }
.ad2 .ad2-tools-group > span { display: block; margin-bottom: 7px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #334155; }
.ad2 .ad2-tools-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ad2 .ad2-tools-group button {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px;
    font: inherit; font-size: .76rem; font-weight: 750; color: #0f172a; cursor: pointer;
    background: var(--ad2-soft); border: 1px solid #e5e9f0;
}
.ad2 .ad2-tools-group button i { color: var(--lp2-deep, #065f46); }
.ad2 .ad2-tools-group button:hover { background: #fff; border-color: #94a3b8; }

/* ---- Platform reports ---------------------------------------------------------- */

.ad2 .ad2-scope { margin-bottom: 18px; }
.ad2 .ad2-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #f1f4f8; margin-bottom: 10px; }
.ad2 .ad2-seg label { cursor: pointer; }
.ad2 .ad2-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ad2 .ad2-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; font-size: .78rem; font-weight: 750; color: #334155; }
.ad2 .ad2-seg input:checked + span { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.ad2 .ad2-seg input:focus-visible + span { outline: 2px solid var(--lp2-h3); outline-offset: 1px; }
.ad2 .ad2-checklist { max-height: 300px; overflow: auto; border: 1px solid var(--ad2-line); border-radius: 14px; padding: 2px 12px; }
.ad2 .ad2-checklist label {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid #f1f4f8; cursor: pointer; font-size: .84rem;
}
.ad2 .ad2-checklist label:last-child { border-bottom: 0; }
.ad2 .ad2-checklist b { font-weight: 750; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad2 .ad2-checklist span { font-size: .72rem; font-weight: 600; color: #475569; }
.ad2 #plat-report-selcount:empty { display: none; }

.ad2 .ad2-reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ad2 .ad2-report {
    display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px;
    background: #fff; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ad2 .ad2-report-ic {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem;
    color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 12%, #fff); margin-bottom: 4px;
}
.ad2 .ad2-report h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #000; }
.ad2 .ad2-report p { margin: 0; font-size: .78rem; font-weight: 600; color: #334155; line-height: 1.45; }
.ad2 .ad2-report-parts { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.ad2 .ad2-report-parts span { padding: 3px 8px; border-radius: 999px; font-size: .66rem; font-weight: 750; color: #1e293b; background: #f1f4f8; }
.ad2 .ad2-report .btn { margin-top: auto; align-self: flex-start; border-radius: 12px; }

/* ---- Billing: list rows ------------------------------------------------------------ */

.ad2 .ad2-plan { font-weight: 800; color: #000; }
.ad2 .ad2-warn { color: #b45309; font-weight: 750; }
.ad2 .ad2-free { font-size: .86rem; font-weight: 800; color: #334155; }
.ad2 .ad2-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ad2 .ad2-fee { display: block; margin-top: 1px; font-size: .68rem; font-weight: 650; color: #475569; text-align: right; }
.ad2 .ad2-note-inline { font-style: italic; }
.ad2 .sx-amt { text-align: right; }

/* The pager under each list, in the list's style. */
.ad2 .admin-finance-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 10px 2px 4px; font-size: .74rem; font-weight: 700; color: #475569;
}
.ad2 .admin-finance-page-controls { display: flex; align-items: center; gap: 4px; }
.ad2 .admin-finance-page-controls button {
    min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 800; color: #0f172a; background: #fff; border: 1px solid var(--ad2-line);
}
.ad2 .admin-finance-page-controls button:hover:not(:disabled) { border-color: #94a3b8; }
.ad2 .admin-finance-page-controls button.active { color: #fff; background: var(--lp2-deep, #065f46); border-color: var(--lp2-deep, #065f46); }
.ad2 .admin-finance-page-controls button:disabled { opacity: .4; cursor: default; }
.ad2 .admin-finance-page-gap { padding: 0 2px; color: #475569; }

/* ---- Packages ---------------------------------------------------------------------- */

.ad2-packages .admin-package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ad2-packages .admin-package-empty { grid-column: 1 / -1; }
.ad2-packages .admin-package-card {
    display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px;
    background: #fff; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ad2-packages .admin-package-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ad2-packages .admin-package-cycle { display: flex; align-items: center; gap: 6px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0f766e; }
.ad2-packages .admin-package-name-wrap h3 { margin: 4px 0 0; font-size: 1.05rem; font-weight: 800; color: #000; }
.ad2-packages .admin-package-name-wrap p { margin: 2px 0 0; font-size: .76rem; font-weight: 600; color: #475569; }
.ad2-packages .admin-package-price { text-align: right; flex-shrink: 0; }
.ad2-packages .admin-package-price b { display: block; font-size: 1.15rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.ad2-packages .admin-package-price span { font-size: .7rem; font-weight: 650; color: #475569; }
.ad2-packages .admin-package-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ad2-packages .admin-package-limits > div {
    display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center;
    padding: 9px 10px; border-radius: 12px; background: var(--ad2-soft); border: 1px solid #eef1f5; min-width: 0;
}
.ad2-packages .admin-package-limits i { grid-row: span 2; color: #0f766e; font-size: .95rem; }
.ad2-packages .admin-package-limits b { font-size: .88rem; font-weight: 800; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad2-packages .admin-package-limits span { font-size: .64rem; font-weight: 700; color: #475569; }
.ad2-packages .admin-package-feature-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ad2-packages .admin-package-chip { padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 750; color: #115e59; background: #e6f4f1; }
.ad2-packages .admin-package-chip.is-muted { color: #475569; background: #f1f4f8; }
.ad2-packages .admin-package-card-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.ad2-packages .admin-package-footnote { flex: 1; min-width: 0; font-size: .7rem; font-weight: 700; color: #475569; }
.ad2-packages .admin-package-card-actions .btn { border-radius: 11px; white-space: nowrap; }

/* ---- Hubtel balances ------------------------------------------------------------------ */

.ad2-hubtel .hb-list {
    gap: 0; overflow: hidden; border-radius: 18px;
    background: #fff; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ad2-hubtel .hb-list .hb-row { margin: 0; border: 0; border-top: 1px solid #eef1f5; border-radius: 0; box-shadow: none; background: #fff; }
.ad2-hubtel .hb-list .hb-row:first-child { border-top: 0; }
.ad2-hubtel .hb-list .hb-row:hover { background: #fafbfd; }
.ad2-hubtel .hb-row-sub { color: #475569; }
.ad2-hubtel .hb-card { border-radius: 18px; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ad2-hubtel .hb-checked { color: #475569; }

/* Phones: long references would push rows off the screen; the search still finds them. */
@media (max-width: 560px) {
    .ad2-subs .sx-meta .lp2-ref { display: none; }
    .ad2 .ad2-ref { font-size: .76rem; }
}

/* app.css stacks these on phones for the old layout; the cards keep their rows. */
@media (max-width: 760px) {
    .ad2-packages .admin-package-card-head { flex-direction: row; align-items: flex-start; }
    .ad2-packages .admin-package-price { text-align: right; }
    .ad2-packages .admin-package-card-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .ad2-packages .admin-package-footnote { flex-basis: 100%; }
    .ad2-packages .admin-package-card-actions .btn { flex: 1 1 0; justify-content: center; }
    .ad2 .admin-finance-pagination { flex-direction: row; align-items: center; }
}

/* Phones: two attention tiles a row, so the queue stays short. */
@media (max-width: 560px) {
    .ad2 .ad2-attn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ad2 .ad2-attn-tile { grid-template-columns: minmax(0, 1fr); padding: 12px 28px 12px 12px; row-gap: 2px; }
    .ad2 .ad2-attn-ic { grid-row: auto; width: 34px; height: 34px; border-radius: 11px; font-size: .95rem; margin-bottom: 6px; }
    .ad2 .ad2-attn-n { font-size: 1.2rem; }
    .ad2 .ad2-attn-go { top: 10px; right: 10px; }
}

/* ---- Management pages ------------------------------------------------------------- */

.ad2 .ad2-back {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; padding: 4px 0;
    font: inherit; font-size: .78rem; font-weight: 800; color: var(--lp2-deep, #065f46);
    background: none; border: 0; cursor: pointer;
}
.ad2 .ad2-back:hover { text-decoration: underline; }
.ad2 .ad2-of { font-size: .5em; font-weight: 700; opacity: .8; letter-spacing: 0; }
.ad2 .ad2-ok { color: #047857; font-weight: 750; }
.ad2 .ad2-verified { color: #059669; font-size: .85em; margin-left: 2px; }
.ad2 .ad2-sub-title { font-size: .74rem; font-weight: 700; color: #475569; }
.ad2 .sx-act.ad2-danger { color: #b91c1c; border-color: #fecaca; }
.ad2 .sx-act.ad2-danger:hover { background: #fef2f2; }
.ad2 .ad2-note-warn { background: #fef2f2; border-color: #fecaca; }
.ad2 .ad2-note-warn > i { color: #b91c1c; }

/* A picture or initials in the row's icon spot. */
.ad2 .sx-ico.ad2-av { font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.ad2 .sx-ico.ad2-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Users: pick people to message. */
.ad2 .ad2-selbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px;
    border-radius: 14px; background: #fff; border: 1px solid var(--ad2-line);
    font-size: .78rem; font-weight: 750; color: #334155;
}
.ad2 .ad2-selbar label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #000; }
.ad2 .ad2-selbar #admin-users-selection-summary { flex: 1; color: #475569; }
.ad2 .ad2-check { display: grid; place-items: center; width: 22px; flex-shrink: 0; margin-right: 2px; cursor: pointer; }
.ad2 .ad2-check input, .ad2 .ad2-selbar input { width: 17px; height: 17px; accent-color: var(--lp2-deep, #065f46); cursor: pointer; }

/* The older pagers, in the list's style. */
.ad2 .admin-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin: 10px 2px 4px; padding: 0; background: none; border: 0; box-shadow: none;
    font-size: .74rem; font-weight: 700; color: #475569;
}
.ad2 .admin-pagination-label { color: #475569; }
.ad2 .admin-pagination-actions { display: flex; align-items: center; gap: 6px; }
.ad2 .admin-pagination-actions .btn { height: 34px; min-height: 34px; border-radius: 10px; font-size: .76rem; }
.ad2 .admin-biz-count { margin: 10px 2px 0; font-size: .74rem; font-weight: 700; color: #475569; }
.ad2 .admin-biz-pager { margin-top: 10px; }
.ad2 .admin-biz-pager .btn { min-width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }

/* Online users: the live table in a list card. */
.ad2-online .aou-panel { padding: 0; overflow: hidden; border-radius: 18px; }
.ad2-online .aou-table-wrap { overflow-x: auto; }
.ad2-online .aou-footer { padding: 10px 14px; border-top: 1px solid #eef1f5; font-size: .72rem; font-weight: 700; color: #475569; }
.ad2-online .aou-table th { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.ad2-online .aou-name { color: #000; font-weight: 800; }

/* Staff: a business's page keeps its counters, restyled as tiles. */
.ad2-staff .team-stats-grid { gap: 10px; margin-bottom: 14px; }
.ad2-staff .team-stat { border-radius: 16px; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Phones: rows with a checkbox and an avatar keep their text. */
@media (max-width: 560px) {
    .ad2 .ad2-urow .sx-ico { width: 36px; height: 36px; }
    .ad2 .ad2-selbar { gap: 8px; }
    .ad2-online .aou-table { font-size: .76rem; }
}

/* Phones: admin row details (payout account, reasons, risk) wrap to two lines
   instead of being cut off after one. */
@media (max-width: 560px) {
    .ad2 .sx-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ==========================================================================
   Platform settings (/admin-settings) — .ad2-settings, tone cyan
   --------------------------------------------------------------------------
   Pill tabs that swipe sideways on phones and wrap on wide screens; every tab
   is a stack of section cards (.ad2-set) holding list rows: switch rows
   (label + help left, switch right, 44px tall), fields that pair up two-up on
   wide screens, masked secrets with show/hide, copy boxes. The switch, small
   buttons, chips and the pop-up pieces are shared with the pop-ups these tabs
   open, so they are scoped to body.lp2-app rather than .ad2.
   ========================================================================== */

.ad2-settings { --ad2-st: var(--lp2-h3, #0891b2); }

/* ---- Header: the broadcast action ------------------------------------------ */
.ad2-settings .ad2-hbtn {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--lp2-line, #e2e8f0); background: #fff; color: #0f172a;
    font: inherit; font-size: .8rem; font-weight: 750; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.ad2-settings .ad2-hbtn:hover { border-color: #94a3b8; }
.ad2-settings .ad2-hbtn i { color: var(--lp2-deep, #155e75); font-size: .95rem; }
@media (max-width: 520px) {
    .ad2-settings .ad2-hbtn { width: 38px; padding: 0; justify-content: center; }
    .ad2-settings .ad2-hbtn span { display: none; }
}

/* ---- Tabs ------------------------------------------------------------------ */
.ad2-settings .ad2-ps-tabs { flex-wrap: nowrap; margin: 0 0 16px; padding: 2px 0 4px; }
.ad2-settings .ad2-ps-tabs .pill-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px;
    white-space: nowrap; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 750;
}
.ad2-settings .ad2-ps-tabs .pill-tab i { font-size: .86rem; color: var(--lp2-deep, #155e75); }
.ad2-settings .ad2-ps-tabs .pill-tab.active i { color: #fff; }
.ad2-settings .ad2-ps-tabs .pill-tab:focus-visible { outline: 2px solid var(--lp2-h3); outline-offset: 2px; }
@media (min-width: 900px) { .ad2-settings .ad2-ps-tabs { flex-wrap: wrap; overflow: visible; } }

/* ---- Section cards ------------------------------------------------------------ */
:is(.ad2-settings, .ad2-ct) .ad2-set {
    background: #fff; border: 1px solid var(--ad2-line); border-radius: 20px; margin: 0 0 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
/* each section's icon gets its own colour, so a long tab reads as distinct blocks */
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+1) { --ad2-st: #0891b2; }
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+2) { --ad2-st: #7c3aed; }
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+3) { --ad2-st: #059669; }
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+4) { --ad2-st: #d97706; }
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+5) { --ad2-st: #2563eb; }
.ad2-settings .settings-tab > .ad2-set:nth-of-type(6n+6) { --ad2-st: #db2777; }
:is(.ad2-settings, .ad2-ct) .ad2-set.ad2-set-wa { --ad2-st: #16a34a; }
:is(.ad2-settings, .ad2-ct) .ad2-set-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; padding: 14px 16px 0; }
:is(.ad2-settings, .ad2-ct) .ad2-set-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.02rem;
    color: color-mix(in srgb, var(--ad2-st) 84%, #000);
    background: color-mix(in srgb, var(--ad2-st) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--ad2-st) 22%, #fff);
}
:is(.ad2-settings, .ad2-ct) .ad2-set-t { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
:is(.ad2-settings, .ad2-ct) .ad2-set-t > b { font-size: .96rem; font-weight: 800; color: #000; letter-spacing: -.01em; line-height: 1.25; }
:is(.ad2-settings, .ad2-ct) .ad2-set-t > span { font-size: .74rem; font-weight: 600; color: #475569; margin-top: 2px; line-height: 1.4; }
:is(.ad2-settings, .ad2-ct) .ad2-set-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-left: auto; }
:is(.ad2-settings, .ad2-ct) .ad2-set-acts .btn-primary { height: 38px; border-radius: 12px; padding: 0 14px; }
:is(.ad2-settings, .ad2-ct) .ad2-set-body { padding: 14px 16px 16px; min-width: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-set-body > .lp2-note { margin: 0 0 12px; }
:is(.ad2-settings, .ad2-ct) .ad2-set-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 11px 12px 11px 16px; border-top: 1px solid #eef1f5; background: #fafbfd; border-radius: 0 0 19px 19px;
    font-size: .74rem; font-weight: 650; color: #475569;
}
:is(.ad2-settings, .ad2-ct) .ad2-set-foot .btn-primary { height: 38px; border-radius: 12px; padding: 0 14px; }

/* ---- Rows: fields and switches, split by hairlines ------------------------------ */
:is(.ad2-settings, .ad2-ct) .ad2-set-list { display: flex; flex-direction: column; min-width: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-set-list > * { padding: 12px 0; margin: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-set-list > * + * { border-top: 1px solid #eef1f5; }
:is(.ad2-settings, .ad2-ct) .ad2-set-list > :first-child { padding-top: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-set-list > :last-child { padding-bottom: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-f-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; }
:is(.ad2-settings, .ad2-ct) .ad2-f-pair > .ad2-f { padding: 0; }
/* side by side, the boxes line up even when one help line is longer */
:is(.ad2-settings, .ad2-ct) .ad2-f-pair > .ad2-f > :last-child { margin-top: auto; }
:is(.ad2-settings, .ad2-ct) .ad2-span { grid-column: 1 / -1; }
@media (min-width: 900px) { :is(.ad2-settings, .ad2-ct) .ad2-f-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

:is(.ad2-settings, .ad2-ct) .ad2-f { min-width: 0; gap: 6px; transition: opacity .15s ease; }
:is(.ad2-settings, .ad2-ct) .ad2-f > label, :is(.ad2-settings, .ad2-ct) .ad2-f-lbl { font-size: .82rem; font-weight: 750; color: #000; line-height: 1.3; }
:is(.ad2-settings, .ad2-ct) .ad2-f-desc { margin-top: -3px; font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.45; }
:is(.ad2-settings, .ad2-ct) .ad2-f-hint { margin-top: 8px; font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.5; }
:is(.ad2-settings, .ad2-ct) .ad2-f-hint i { margin-right: 4px; }
:is(.ad2-settings, .ad2-ct) .ad2-f-hint b { color: #000; }
:is(.ad2-settings, .ad2-ct) .ad2-f-pair > .ad2-f-hint { margin-top: -6px; }
:is(.ad2-settings, .ad2-ct) .ad2-mt0 { margin-top: 0; margin-bottom: 10px; }
:is(.ad2-settings, .ad2-ct) .ad2-f input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
:is(.ad2-settings, .ad2-ct) .ad2-f select,
:is(.ad2-settings, .ad2-ct) .ad2-f textarea,
:is(.ad2-settings, .ad2-ct) .ad2-svc select,
:is(.ad2-settings, .ad2-ct) .ad2-svc input[type="number"] {
    width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid #dbe2ea;
    background-color: #fff; color: #000; font: inherit; font-size: .88rem; font-weight: 600;
    transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.ad2-settings, .ad2-ct) .ad2-f select, :is(.ad2-settings, .ad2-ct) .ad2-svc select { padding-right: 34px; }
:is(.ad2-settings, .ad2-ct) .ad2-f textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
:is(.ad2-settings, .ad2-ct) .ad2-f input:focus, :is(.ad2-settings, .ad2-ct) .ad2-f select:focus, :is(.ad2-settings, .ad2-ct) .ad2-f textarea:focus,
:is(.ad2-settings, .ad2-ct) .ad2-svc select:focus, :is(.ad2-settings, .ad2-ct) .ad2-svc input:focus {
    outline: none; border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 18%, transparent);
}
:is(.ad2-settings, .ad2-ct) .ad2-f input::placeholder, :is(.ad2-settings, .ad2-ct) .ad2-f textarea::placeholder { color: #64748b; font-weight: 500; }
:is(.ad2-settings, .ad2-ct) textarea.ad2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.6; }

/* masked secret + show/hide */
:is(.ad2-settings, .ad2-ct) .ad2-secret { display: flex; align-items: stretch; gap: 6px; }
:is(.ad2-settings, .ad2-ct) .ad2-secret input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: .82rem !important; letter-spacing: .03em; }
:is(.ad2-settings, .ad2-ct) .ad2-eye {
    flex: 0 0 44px; width: 44px; min-height: 44px; display: grid; place-items: center; cursor: pointer;
    border-radius: 12px; border: 1px solid #dbe2ea; background: #f8fafc; color: #334155; font-size: 1rem;
}
:is(.ad2-settings, .ad2-ct) .ad2-eye:hover { border-color: #94a3b8; color: #000; }
:is(.ad2-settings, .ad2-ct) .ad2-eye[aria-pressed="true"] { background: color-mix(in srgb, var(--lp2-h3) 10%, #fff); color: var(--lp2-deep); border-color: color-mix(in srgb, var(--lp2-h3) 35%, #fff); }

/* colour: swatch + hex */
:is(.ad2-settings, .ad2-ct) .ad2-color { display: flex; align-items: center; gap: 8px; }
:is(.ad2-settings, .ad2-ct) .ad2-color input[type="color"] {
    flex: 0 0 44px; width: 44px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; cursor: pointer;
}
:is(.ad2-settings, .ad2-ct) .ad2-color input[type="text"] { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }

/* read-only value + copy */
:is(.ad2-settings, .ad2-ct) .ad2-copy { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-copy input {
    flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid #dbe2ea;
    background: #f8fafc; color: #000; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem;
}
:is(.ad2-settings, .ad2-ct) .ad2-copy-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; cursor: pointer;
    border-radius: 12px; border: 1px solid color-mix(in srgb, var(--lp2-h3) 35%, #fff);
    background: color-mix(in srgb, var(--lp2-h3) 9%, #fff); color: var(--lp2-deep); font: inherit; font-size: .8rem; font-weight: 800;
}
:is(.ad2-settings, .ad2-ct) .ad2-copy-btn:hover { background: color-mix(in srgb, var(--lp2-h3) 15%, #fff); }
:is(.ad2-settings, .ad2-ct) .ad2-copy-btn.is-done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
@media (max-width: 420px) { :is(.ad2-settings, .ad2-ct) .ad2-copy-btn span { display: none; } :is(.ad2-settings, .ad2-ct) .ad2-copy-btn { width: 44px; padding: 0; justify-content: center; } }

/* ---- Shared with the pop-ups: switch rows, the switch, small buttons, chips ----- */
body.lp2-app .ad2-sw-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; cursor: pointer;
}
body.lp2-app .ad2-sw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.lp2-app .ad2-sw-t b { font-size: .86rem; font-weight: 750; color: #000; line-height: 1.3; }
body.lp2-app .ad2-sw-t > span { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.45; }
body.lp2-app input.ad2-switch {
    -webkit-appearance: none; appearance: none; flex: 0 0 44px; width: 44px; min-width: 44px; height: 26px; margin: 0; padding: 0;
    border-radius: 999px; border: 0; background: #cbd5e1; position: relative; cursor: pointer; transition: background .18s ease;
}
body.lp2-app input.ad2-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .18s ease;
}
body.lp2-app input.ad2-switch:checked { background: var(--lp2-h3, #059669); }
body.lp2-app .modal input.ad2-switch:checked { background: #059669; }
body.lp2-app input.ad2-switch:checked::after { transform: translateX(18px); }
body.lp2-app input.ad2-switch:focus-visible { outline: 2px solid var(--lp2-h3, #059669); outline-offset: 2px; }

body.lp2-app .ad2-ibtn, body.lp2-app .ad2-ibtn.btn {
    flex: 0 0 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
    border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; color: #1e293b; font-size: .95rem; box-shadow: none;
}
body.lp2-app .ad2-ibtn:hover { border-color: #94a3b8; color: #000; background: #f8fafc; }
body.lp2-app .ad2-ibtn.is-danger { color: #b91c1c; border-color: #fecaca; }
body.lp2-app .ad2-ibtn.is-danger:hover { background: #fef2f2; border-color: #fca5a5; }
:is(.ad2-settings, .ad2-ct) .ad2-btn, :is(.ad2-settings, .ad2-ct) .ad2-btn.btn {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; min-height: 38px; padding: 0 12px; cursor: pointer;
    border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; color: #0f172a; box-shadow: none;
    font: inherit; font-size: .8rem; font-weight: 750; white-space: nowrap;
}
:is(.ad2-settings, .ad2-ct) .ad2-btn:hover { border-color: #94a3b8; background: #f8fafc; }
:is(.ad2-settings, .ad2-ct) .ad2-btn i { color: var(--lp2-deep, #155e75); }
:is(.ad2-settings, .ad2-ct) .ad2-btn .btn-text { display: inline-flex; align-items: center; gap: 6px; }

body.lp2-app .ad2-chip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap;
    padding: 2px 8px; border-radius: 999px; font-size: .65rem; font-weight: 800; line-height: 1.5; letter-spacing: .01em;
    border: 1px solid transparent;
}
body.lp2-app .ad2-chip.is-ok   { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
body.lp2-app .ad2-chip.is-warn { color: #92400e; background: #fef3c7; border-color: #fde68a; }
body.lp2-app .ad2-chip.is-bad  { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
body.lp2-app .ad2-chip.is-info { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
body.lp2-app .ad2-chip.is-off  { color: #334155; background: #f1f5f9; border-color: #e2e8f0; }
body.lp2-app .ad2-opt { margin-left: 4px; font-size: .7rem; font-weight: 600; color: #475569; }
body.lp2-app .ad2-inline-link {
    display: inline; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 800; color: var(--lp2-deep, #065f46); text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Notes and callouts --------------------------------------------------------- */
:is(.ad2-settings, .ad2-ct) .lp2-note a { color: var(--lp2-deep); font-weight: 750; }
:is(.ad2-settings, .ad2-ct) .lp2-note.ad2-note-amber { background: #fffbeb; border-color: #fde68a; color: #78350f; }
:is(.ad2-settings, .ad2-ct) .lp2-note.ad2-note-amber > i { color: #b45309; }
:is(.ad2-settings, .ad2-ct) .lp2-note.ad2-wa-note { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
:is(.ad2-settings, .ad2-ct) .lp2-note.ad2-wa-note > i { color: #16a34a; }
.ad2-settings .ad2-ps-callout {
    display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 11px 13px; border-radius: 14px;
    font-size: .78rem; font-weight: 550; line-height: 1.5; color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0;
}
.ad2-settings .ad2-set-body > .ad2-ps-callout:first-child { margin-top: 0; margin-bottom: 12px; }
.ad2-settings .ad2-ps-callout > i { font-size: 1rem; line-height: 1.35; color: #475569; }
.ad2-settings .ad2-ps-callout b { color: #000; }
.ad2-settings .ad2-ps-callout-sub { display: block; margin-top: 6px; color: #334155; }
.ad2-settings .ad2-ps-callout.is-ok { background: #f0fdf4; border-color: #bbf7d0; }
.ad2-settings .ad2-ps-callout.is-ok > i { color: #16a34a; }
.ad2-settings .ad2-ps-callout.is-info { background: #eff6ff; border-color: #bfdbfe; }
.ad2-settings .ad2-ps-callout.is-info > i { color: #2563eb; }
.ad2-settings .ad2-ps-callout.is-warn { background: #fffbeb; border-color: #fde68a; color: #422006; }
.ad2-settings .ad2-ps-callout.is-warn > i { color: #b45309; }
.ad2-settings .ad2-ps-callout.is-bad { background: #fef2f2; border-color: #fecaca; color: #450a0a; }
.ad2-settings .ad2-ps-callout.is-bad > i { color: #b91c1c; }
.ad2-settings .ad2-ps-diag { margin: 0 0 14px; }
.ad2-settings details.ad2-ps-details { margin: 12px 0 0; }
.ad2-settings details.ad2-ps-details > summary { font-weight: 750; color: #000; }
.ad2-settings .ad2-ip {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; margin: 0 2px; cursor: pointer;
    border-radius: 8px; border: 1px solid #bfdbfe; background: #fff; color: #000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; font-weight: 800;
}
.ad2-settings .ad2-ip i { font-size: .72rem; color: #2563eb; }

/* Partner programme intro */
.ad2-settings .ad2-ps-intro {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 14px 16px;
    border-radius: 20px; background: #ecfdf5; border: 1px solid #a7f3d0;
}
.ad2-settings .ad2-ps-intro-ic {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; display: grid; place-items: center;
    background: #059669; color: #fff; font-size: 1.1rem;
}
.ad2-settings .ad2-ps-intro-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ad2-settings .ad2-ps-intro-t > b { font-size: .96rem; font-weight: 800; color: #000; }
.ad2-settings .ad2-ps-intro-t > span { font-size: .78rem; font-weight: 600; color: #134e4a; line-height: 1.55; max-width: 70ch; }
.ad2-settings .ad2-ps-intro-t > span b { color: #000; }
.ad2-settings .ad2-ps-intro .btn-primary { height: 38px; border-radius: 12px; padding: 0 14px; align-self: center; }
@media (max-width: 560px) { .ad2-settings .ad2-ps-intro .btn-primary { flex: 1 1 100%; justify-content: center; } }

/* Paystack webhook box */
.ad2-settings .ad2-ps-hook { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f0f9ff; border: 1px solid #bae6fd; }
.ad2-settings .ad2-ps-hook-t { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 800; color: #000; }
.ad2-settings .ad2-ps-hook-t i { color: #0284c7; font-size: 1.05rem; }
.ad2-settings .ad2-ps-hook p { margin: 4px 0 10px; font-size: .76rem; font-weight: 600; color: #1e293b; line-height: 1.5; }
.ad2-settings .ad2-ps-hook p.ad2-ps-hook-sub { margin: 10px 0 0; color: #334155; }

/* ---- Lists of things: templates, taxes, coupons ---------------------------------- */
:is(.ad2-settings, .ad2-ct) .ad2-items { display: flex; flex-direction: column; border: 1px solid var(--ad2-line); border-radius: 16px; overflow: hidden; background: #fff; }
:is(.ad2-settings, .ad2-ct) .ad2-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-top: 1px solid #eef1f5; min-width: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-item:first-child { border-top: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-item.is-dim .ad2-item-ic, :is(.ad2-settings, .ad2-ct) .ad2-item.is-dim .ad2-item-title > span:first-child { opacity: .6; }
:is(.ad2-settings, .ad2-ct) .ad2-item-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem;
    color: color-mix(in srgb, var(--ad2-st) 84%, #000); background: color-mix(in srgb, var(--ad2-st) 11%, #fff);
}
:is(.ad2-settings, .ad2-ct) .ad2-item-ic.is-wa { color: #15803d; background: #dcfce7; }
:is(.ad2-settings, .ad2-ct) .ad2-item-ic.is-tax { color: #6d28d9; background: #ede9fe; }
:is(.ad2-settings, .ad2-ct) .ad2-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
:is(.ad2-settings, .ad2-ct) .ad2-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; font-size: .88rem; font-weight: 800; color: #000; line-height: 1.3; }
:is(.ad2-settings, .ad2-ct) .ad2-item-title > span:first-child { min-width: 0; overflow-wrap: anywhere; }
:is(.ad2-settings, .ad2-ct) .ad2-item-sub { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.45; overflow-wrap: anywhere; }
:is(.ad2-settings, .ad2-ct) .ad2-item-sub b { color: #000; font-weight: 750; }
:is(.ad2-settings, .ad2-ct) .ad2-item-note {
    margin-top: 3px; font-size: .76rem; font-weight: 550; color: #334155; line-height: 1.45; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:is(.ad2-settings, .ad2-ct) .ad2-item-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
:is(.ad2-settings, .ad2-ct) .ad2-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
:is(.ad2-settings, .ad2-ct) .ad2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; color: #000; }
:is(.ad2-settings, .ad2-ct) .ad2-bad { color: #b91c1c; font-weight: 750; }
:is(.ad2-settings, .ad2-ct) .ad2-empty {
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 14px; border-radius: 14px;
    border: 1.5px dashed #d5dde8; background: #fafbfd; font-size: .8rem; font-weight: 650; color: #475569; text-align: center;
}
:is(.ad2-settings, .ad2-ct) .ad2-empty.is-bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
:is(.ad2-settings, .ad2-ct) .ad2-group-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
:is(.ad2-settings, .ad2-ct) .ad2-group-cap span { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #334155; }
:is(.ad2-settings, .ad2-ct) .ad2-group-cap em { font-style: normal; font-size: .72rem; font-weight: 700; color: #475569; }
:is(.ad2-settings, .ad2-ct) .ad2-tax-group + .ad2-tax-group { margin-top: 16px; }
@media (max-width: 560px) {
    :is(.ad2-settings, .ad2-ct) .ad2-item { flex-wrap: wrap; }
    :is(.ad2-settings, .ad2-ct) .ad2-item-body { flex: 1 1 calc(100% - 50px); }
    :is(.ad2-settings, .ad2-ct) .ad2-item-acts { width: 100%; padding-left: 50px; }
}

/* ---- Branding ---------------------------------------------------------------------- */
.ad2-settings .ad2-assets { display: flex; flex-direction: column; }
.ad2-settings .ad2-asset { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1f5; min-width: 0; }
.ad2-settings .ad2-asset:first-child { border-top: 0; padding-top: 0; }
.ad2-settings .ad2-asset:last-child { padding-bottom: 0; }
.ad2-settings .ad2-asset-pv {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; font-size: 1.3rem;
}
.ad2-settings .ad2-asset-pv img { width: 100%; height: 100%; object-fit: contain; }
.ad2-settings .ad2-asset-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ad2-settings .ad2-asset-t b { font-size: .86rem; font-weight: 750; color: #000; }
.ad2-settings .ad2-asset-t span { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.45; }
.ad2-settings .ad2-asset-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) {
    .ad2-settings .ad2-asset { flex-wrap: wrap; }
    .ad2-settings .ad2-asset-t { flex: 1 1 calc(100% - 68px); }
    .ad2-settings .ad2-asset-acts { width: 100%; padding-left: 68px; }
}
.ad2-settings .start-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ad2-settings .start-img-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9; }
.ad2-settings .start-img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad2-settings .start-img-acts { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.ad2-settings .start-img-acts button {
    width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
    background: rgba(15, 23, 42, .74); color: #fff; font-size: .8rem;
}
.ad2-settings .start-img-acts button:hover { background: #b91c1c; }
.ad2-settings .start-img-add {
    aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
    border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--ad2-st) 40%, #cbd5e1);
    background: color-mix(in srgb, var(--ad2-st) 5%, #fff); color: color-mix(in srgb, var(--ad2-st) 80%, #000);
    font: inherit; font-size: .82rem; font-weight: 750;
}
.ad2-settings .start-img-add i { font-size: 1.2rem; }
.ad2-settings .start-img-add small { font-size: .7rem; font-weight: 600; color: #475569; }
.ad2-settings .start-img-add:hover { background: color-mix(in srgb, var(--ad2-st) 10%, #fff); }
.ad2-settings .start-img-add.is-first { width: 100%; aspect-ratio: auto; min-height: 140px; }

/* ---- Navigation: the menu manager -------------------------------------------------- */
.ad2-settings .ad2-f-menu { display: flex; flex-direction: column; gap: 6px; }
.ad2-settings .ad2-f-menu .menu-manager-grid { margin-top: 8px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ad2-settings .menu-manager-card { border: 1px solid var(--ad2-line); border-radius: 16px; background: #fff; box-shadow: none; }
.ad2-settings .menu-manager-head { min-height: 54px; padding: 10px 14px; background: #f6f8fb; border-bottom: 1px solid #eef1f5; cursor: pointer; }
.ad2-settings .menu-manager-title { font-size: .88rem; font-weight: 800; color: #000; }
.ad2-settings .menu-manager-title i {
    width: 32px; height: 32px; border-radius: 10px; font-size: .9rem;
    color: var(--lp2-deep); background: color-mix(in srgb, var(--lp2-h3) 12%, #fff);
}
.ad2-settings .menu-manager-item { min-height: 50px; padding: 8px 14px; border-top: 1px solid #f1f4f8; cursor: pointer; }
.ad2-settings .menu-manager-item:hover { background: #fafbfd; }
.ad2-settings .menu-manager-item-main { display: flex; flex-direction: column; }
.ad2-settings .menu-manager-item-title { font-size: .84rem; font-weight: 700; color: #000; }
.ad2-settings .menu-manager-item-page { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .68rem; font-weight: 600; color: #475569; }

/* ---- Bills & Airtime --------------------------------------------------------------- */
.ad2-settings .ad2-bals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .ad2-settings .ad2-bals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad2-settings .ad2-bal { padding: 12px 14px; border-radius: 14px; background: #f6f8fb; border: 1px solid #eef1f5; min-width: 0; }
.ad2-settings .ad2-bal-h { display: flex; align-items: center; gap: 7px; }
.ad2-settings .ad2-bal-h i {
    width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .82rem;
    color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 13%, #fff);
}
.ad2-settings .ad2-bal-h span { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.ad2-settings .ad2-bal > b { display: block; margin-top: 7px; font-size: 1.22rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
.ad2-settings .ad2-bal > b.is-unknown { color: #b45309; }
.ad2-settings .ad2-bal > small { display: block; margin-top: 2px; font-size: .7rem; font-weight: 650; color: #475569; }
.ad2-settings .ad2-checks { display: flex; flex-direction: column; margin: 0 0 14px; padding: 2px 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef1f5; }
.ad2-settings .ad2-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
.ad2-settings .ad2-check-row + .ad2-check-row { border-top: 1px solid #eef1f5; }
.ad2-settings .ad2-check-row > i { font-size: 1rem; line-height: 1.3; color: #d97706; }
.ad2-settings .ad2-check-row.is-ok > i { color: #059669; }
.ad2-settings .ad2-check-row b { font-size: .84rem; font-weight: 750; color: #000; }
.ad2-settings .ad2-check-row div > span:not(.ad2-chip) { display: block; font-size: .72rem; font-weight: 600; color: #475569; }

.ad2-settings .ad2-svc-wrap { min-width: 0; }
.ad2-settings .ad2-svc { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ad2-settings .ad2-svc th {
    text-align: left; padding: 6px 8px 8px; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: #334155; border-bottom: 1px solid var(--ad2-line); background: transparent;
}
.ad2-settings .ad2-svc td { padding: 8px; border-bottom: 1px solid #f1f4f8; vertical-align: middle; }
.ad2-settings .ad2-svc tr:last-child td { border-bottom: 0; }
.ad2-settings .ad2-svc td:not(.ad2-svc-name) { width: 15%; min-width: 96px; }
.ad2-settings .ad2-svc-on { display: flex; align-items: center; gap: 11px; cursor: pointer; min-height: 44px; }
.ad2-settings .ad2-svc-on > span { display: flex; flex-direction: column; min-width: 0; }
.ad2-settings .ad2-svc-on b { font-size: .86rem; font-weight: 750; color: #000; }
.ad2-settings .ad2-svc-on small { font-size: .7rem; font-weight: 600; color: #475569; }
@media (max-width: 760px) {
    .ad2-settings .ad2-svc, .ad2-settings .ad2-svc tbody { display: block; }
    .ad2-settings .ad2-svc thead { display: none; }
    .ad2-settings .ad2-svc tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 12px;
        margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--ad2-line); background: #fff;
    }
    .ad2-settings .ad2-svc td { display: block; padding: 0; border: 0; width: auto !important; min-width: 0 !important; }
    .ad2-settings .ad2-svc td.ad2-svc-name { grid-column: 1 / -1; padding-bottom: 4px; border-bottom: 1px solid #f1f4f8; }
    .ad2-settings .ad2-svc td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 4px; font-size: .68rem; font-weight: 750; color: #334155;
    }
}

/* ---- The unsaved-changes bar ----------------------------------------------------------- */
.ad2-settings .ad2-ps-save {
    position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 6px 0 0; padding: 9px 10px 9px 16px; border-radius: 16px; background: #fffbeb; border: 1px solid #fcd34d;
    box-shadow: 0 16px 34px -14px rgba(146, 64, 14, .45);
}
.ad2-settings .ad2-ps-save[hidden] { display: none; }
.ad2-settings .ad2-ps-save-t { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 800; color: #78350f; }
.ad2-settings .ad2-ps-save-t i { font-size: .45rem; color: #d97706; }
.ad2-settings .ad2-ps-save .btn-primary { height: 38px; border-radius: 12px; padding: 0 16px; }
.ad2-settings .ad2-muted .spin { margin-right: 4px; }

/* ---- Pop-ups these tabs open (coupon, tax, WhatsApp template) ------------------------- */
body.lp2-app .modal .ad2-m .ad2-sw-row { padding: 4px 0; }
/* Paired fields line up: text boxes and dropdowns share one 44px height. */
body.lp2-app .modal .ad2-m input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
body.lp2-app .modal .ad2-m select { box-sizing: border-box; height: 44px; min-height: 44px; }
body.lp2-app .modal .ad2-m-sec {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid #eef1f5;
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #334155;
}
body.lp2-app .modal .ad2-m-sec-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
body.lp2-app .modal .ad2-m-adds { display: flex; flex-wrap: wrap; gap: 6px; text-transform: none; letter-spacing: 0; }
body.lp2-app .modal .ad2-m-adds .btn { height: 34px; min-height: 34px; padding: 0 11px; font-size: .76rem; }
body.lp2-app .modal .ad2-m-btn { display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 0 0 8px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
body.lp2-app .modal .ad2-m-btn-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.lp2-app .modal .ad2-m-btn-head b { font-size: .8rem; font-weight: 800; color: #000; }
body.lp2-app .modal .ad2-m-empty { padding: 14px; border-radius: 14px; border: 1.5px dashed #d5dde8; background: #fafbfd; font-size: .78rem; font-weight: 600; color: #475569; text-align: center; }
body.lp2-app .modal .ad2-m-box { border: 1px solid #dbe2ea; border-radius: 12px; padding: 6px 12px; background: #fff; }
body.lp2-app .modal .ad2-m-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 8px; border-bottom: 1px solid #eef1f5; font-size: .76rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .ad2-m-box-list { max-height: 200px; overflow-y: auto; }
body.lp2-app .modal .ad2-m-check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: .84rem; font-weight: 600; color: #000; }
body.lp2-app .modal .ad2-m-check + .ad2-m-check { border-top: 1px solid #f1f4f8; }
body.lp2-app .modal .ad2-m-check input { width: 18px; height: 18px; flex: none; accent-color: #059669; }
body.lp2-app .modal input.ad2-m-code { text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }

/* ==========================================================================
   Content pages — .ad2-ct
   --------------------------------------------------------------------------
   Announcements (amber), Push notifications (violet), Notification register
   (indigo), Email (teal), Categories (pink), Opportunities (blue) and
   Marketplace home (emerald). Lists are the .lp2 list card with an extra
   message line per row; settings-like pages reuse the Platform settings
   section cards (.ad2-set …, shared above via :is(.ad2-settings, .ad2-ct)).
   ========================================================================== */

.ad2-ct { --ad2-st: var(--lp2-h3, #059669); }
.ad2-ct .pill-tabs { margin-bottom: 14px; }

/* ---- Rows ------------------------------------------------------------------ */
.ad2-ct .ad2-ct-row:focus-visible { outline: 2px solid var(--lp2-h3); outline-offset: -2px; }
.ad2-ct .ad2-ct-snip {
    margin-top: 2px; font-size: .78rem; font-weight: 550; color: #334155; line-height: 1.45;
    overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
@media (max-width: 560px) { .ad2-ct .ad2-ct-snip { -webkit-line-clamp: 2; } }
.ad2-ct .ad2-ct-none { color: #475569; font-weight: 650; font-style: italic; }
.ad2-ct .sx-ref .lp2-tag { margin-left: 4px; }
.ad2-ct .sx-ico.ad2-ct-thumb { position: relative; overflow: hidden; background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.ad2-ct .sx-ico.ad2-ct-thumb > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ad2-ct .sx-empty .ad2-ct-empty-act { margin-top: 14px; }
/* the empty-state button's icon: app.css sizes every .sx-empty i as the big illustration */
.ad2-ct .sx-empty .ad2-ct-empty-act i { display: inline-block; font-size: 1em; margin: 0; opacity: 1; color: inherit; }
.ad2-ct .sx-empty .btn-primary { border-radius: 12px; }
.ad2-ct .lp2-badges .ad2-chip { text-transform: none; }
/* Opportunities: long titles get two lines on phones, and the Featured chip
   shrinks to its star so the title keeps the width. */
@media (max-width: 560px) {
    .ad2-opps .sx-ref { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
    .ad2-opps .ad2-opp-feat > span { display: none; }
    body.lp2-app .ad2-opps .ad2-opp-feat { padding-left: 7px; padding-right: 7px; }
}

/* ---- Pop-ups ------------------------------------------------------------------- */
body.lp2-app .modal .ad2-promo-m .promo-upload-zone { border-radius: 16px; border: 1.5px dashed #cbd5e1; background: #f8fafc; min-height: 120px; }
body.lp2-app .modal .ad2-promo-m .promo-upload-zone:hover,
body.lp2-app .modal .ad2-promo-m .promo-upload-zone.dragover { border-color: #059669; background: #f0fdf4; }
body.lp2-app .modal .ad2-promo-m .promo-upload-placeholder { color: #334155; font-size: .82rem; font-weight: 700; }
body.lp2-app .modal .ad2-promo-m .promo-upload-placeholder i { font-size: 1.5rem; color: #059669; }
body.lp2-app .modal .ad2-promo-m .promo-upload-placeholder small { font-size: .72rem; font-weight: 600; color: #475569; }
body.lp2-app .modal .ad2-promo-url { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
body.lp2-app .modal .ad2-promo-url span { flex: none; font-size: .76rem; font-weight: 700; color: #334155; }
body.lp2-app .modal .ad2-promo-url input { flex: 1; min-width: 0; }
body.lp2-app .modal .ad2-promo-m .promo-tgt-chip span {
    min-height: 44px; padding: 0 12px; border: 1px solid #dbe2ea; border-radius: 12px; background: #fff;
    font-size: .84rem; font-weight: 700; color: #1e293b;
}
body.lp2-app .modal .ad2-promo-m .promo-tgt-chip span i { color: #475569; }
body.lp2-app .modal .ad2-promo-m .promo-tgt-chip input:checked + span { border-color: #059669; background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #059669; }
body.lp2-app .modal .ad2-promo-m .promo-tgt-chip input:checked + span i { color: #059669; }
body.lp2-app .modal .ad2-promo-m .promo-tgt-chip input:focus-visible + span { outline: 2px solid #059669; outline-offset: 2px; }

/* ---- Small tiles (who has push on) ------------------------------------------ */
.ad2-ct .ad2-ct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
@media (min-width: 720px) { .ad2-ct .ad2-ct-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ad2-ct .ad2-ct-tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
    padding: 12px 13px; border-radius: 16px; background: #fff; border: 1px solid var(--ad2-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
.ad2-ct .ad2-ct-tile-ic {
    grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem;
    color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 12%, #fff);
}
.ad2-ct .ad2-ct-tile b { font-size: 1.2rem; font-weight: 800; color: #000; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ad2-ct .ad2-ct-tile > span:last-child { font-size: .74rem; font-weight: 700; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad2-ct .ad2-ct-static { cursor: default; }
.ad2-ct .sx-amt .ad2-per { font-weight: 700; }

/* ---- Categories: the Types button on each product category ------------------ */
.ad2-ct .ad2-ct-pill {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; cursor: pointer;
    border-radius: 10px; border: 1px solid #dbe2ea; background: #fff; color: #0f172a;
    font: inherit; font-size: .74rem; font-weight: 750; white-space: nowrap;
}
.ad2-ct .ad2-ct-pill i { color: var(--lp2-deep, #9d174d); }
.ad2-ct .ad2-ct-pill b { min-width: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--lp2-h3) 12%, #fff); color: var(--lp2-deep); font-size: .68rem; text-align: center; }
.ad2-ct .ad2-ct-pill:hover { border-color: #94a3b8; background: #f8fafc; }
.ad2-ct details.lp2-note { margin: 0 0 14px; }
.ad2-ct details.lp2-note > summary { cursor: pointer; font-weight: 750; color: #000; }

/* ---- Pop-ups: pieces the content pages share --------------------------------- */
body.lp2-app .modal .ad2-m .st-m-hint { display: block; }
body.lp2-app .modal .ad2-m-loading { padding: 28px 12px; text-align: center; font-size: .84rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .ad2-m-icon { display: flex; align-items: center; gap: 8px; }
body.lp2-app .modal .ad2-m-icon > span {
    --c: #475569; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c) 25%, #fff);
}
body.lp2-app .modal .ad2-m-icon.is-solid > span { color: #fff; border: 0; }
body.lp2-app .modal .ad2-m-icon input { flex: 1; min-width: 0; }
body.lp2-app .modal .ad2-m input[type="color"] { width: 100%; height: 44px; min-height: 44px; padding: 4px; border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; cursor: pointer; }
body.lp2-app .modal .ad2-m-sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 11px 13px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0;
    font-size: .82rem; font-weight: 600; color: #334155; line-height: 1.45;
}
body.lp2-app .modal .ad2-m-sum b { color: #000; }
body.lp2-app .modal .ad2-m-sum .btn { height: 36px; min-height: 36px; border-radius: 11px; }
body.lp2-app .modal .ad2-m-list { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff; }
body.lp2-app .modal .ad2-m-li {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; margin: 0; text-align: left; cursor: pointer;
    background: #fff; border: 0; border-top: 1px solid #f1f4f8; font: inherit;
}
body.lp2-app .modal .ad2-m-li:first-child { border-top: 0; }
body.lp2-app .modal .ad2-m-li:hover { background: #f8fafc; }
body.lp2-app .modal .ad2-m-li.is-dim .ad2-m-li-ic, body.lp2-app .modal .ad2-m-li.is-dim .ad2-m-li-t b { opacity: .6; }
body.lp2-app .modal .ad2-m-li-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .92rem; }
body.lp2-app .modal .ad2-m-li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.lp2-app .modal .ad2-m-li-t b { font-size: .86rem; font-weight: 750; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.lp2-app .modal .ad2-m-li-t span { font-size: .72rem; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.lp2-app .modal .ad2-m-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.lp2-app .modal .ad2-m-swatches .sc-swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; }
body.lp2-app .modal .ad2-m-swatches .sc-swatch:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }
body.lp2-app .modal .ad2-m-other { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #334155; cursor: pointer; }
body.lp2-app .modal .ad2-m-other input[type="color"] { width: 34px; height: 30px; min-height: 30px; padding: 2px; border-radius: 8px; }
/* small switch + label pairs, side by side */
body.lp2-app .modal .ad2-m-ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; grid-column: 1 / -1; }
body.lp2-app .modal .ad2-m-tick { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: .84rem; font-weight: 700; color: #000; }
body.lp2-app .modal .ad2-m-tick-cell { justify-content: flex-end; }
@media (min-width: 560px) { body.lp2-app .modal .ad2-m-tick-cell { padding-top: 22px; } }
/* check rows (Firebase check) */
body.lp2-app .modal .ad2-checks { display: flex; flex-direction: column; padding: 2px 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef1f5; grid-column: 1 / -1; }
body.lp2-app .modal .ad2-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
body.lp2-app .modal .ad2-check-row + .ad2-check-row { border-top: 1px solid #eef1f5; }
body.lp2-app .modal .ad2-check-row > i { font-size: 1rem; line-height: 1.3; color: #d97706; }
body.lp2-app .modal .ad2-check-row.is-ok > i { color: #059669; }
body.lp2-app .modal .ad2-check-row.is-bad > i { color: #dc2626; }
body.lp2-app .modal .ad2-check-row b { display: block; font-size: .84rem; font-weight: 750; color: #000; }
body.lp2-app .modal .ad2-check-row div > span { display: block; font-size: .74rem; font-weight: 600; color: #475569; overflow-wrap: anywhere; }
body.lp2-app .modal .ad2-fcm-devs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; grid-column: 1 / -1; }
body.lp2-app .modal .ad2-fcm-devs > div { padding: 9px 6px; border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; text-align: center; min-width: 0; }
body.lp2-app .modal .ad2-fcm-devs b { display: block; font-size: 1.05rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
body.lp2-app .modal .ad2-fcm-devs span { font-size: .66rem; font-weight: 700; color: #475569; }
@media (max-width: 420px) { body.lp2-app .modal .ad2-fcm-devs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Marketplace home --------------------------------------------------------- */
.ad2-homepage .hd-color { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad2-homepage .hd-color input[type="color"] {
    flex: 0 0 44px; width: 44px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; cursor: pointer;
}
.ad2-homepage .hd-color .hd-input {
    flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; color: #000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; font-weight: 600; text-transform: uppercase;
}
.ad2-homepage .hd-color .hd-input::placeholder { text-transform: none; font-family: var(--font-body); color: #64748b; font-weight: 500; }
.ad2-homepage .hd-color .hd-input:focus { outline: none; border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 18%, transparent); }
.ad2-homepage .hd-default {
    flex: none; height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    border: 1px solid #dbe2ea; background: #f8fafc; color: #334155; font: inherit; font-size: .76rem; font-weight: 750;
}
.ad2-homepage .hd-default:hover { border-color: #94a3b8; color: #000; }
.ad2-homepage .hd-btn-preview {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 12px 14px;
    border-radius: 14px; background: #f8fafc; border: 1px solid #eef1f5;
}
.ad2-homepage .hd-btn-preview span { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #334155; margin-right: 4px; }
.ad2-homepage .hd-btn-preview button { border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 800; font-size: .84rem; cursor: default; }
.ad2-homepage .hd-rows { display: flex; flex-direction: column; }
.ad2-homepage .hd-row {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 10px 0; border-top: 1px solid #eef1f5;
}
.ad2-homepage .hd-row:first-child { border-top: 0; padding-top: 0; }
.ad2-homepage .hd-row:last-child { padding-bottom: 0; }
@media (min-width: 900px) { .ad2-homepage .hd-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 18px; } }
.ad2-homepage .hd-row-name { display: flex; align-items: center; gap: 11px; min-height: 44px; min-width: 0; }
.ad2-homepage .hd-row-flag { flex: none; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: flex-end; cursor: pointer; }
.ad2-homepage .hd-row-name b { flex: 1; min-width: 0; font-size: .86rem; font-weight: 750; color: #000; }
.ad2-homepage .hd-swatch {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: .95rem;
    border: 1px solid #e2e8f0; background: #fff; color: #334155; transition: background .15s ease;
}
.ad2-homepage .hd-screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ad2-homepage .hd-screen { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: #fafbfd; border: 1px solid #eef1f5; min-width: 0; }
.ad2-homepage .hd-screen-h { display: flex; align-items: center; gap: 8px; }
.ad2-homepage .hd-screen-h i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--lp2-deep); background: color-mix(in srgb, var(--lp2-h3) 12%, #fff); }
.ad2-homepage .hd-screen-h b { font-size: .88rem; font-weight: 800; color: #000; }
.ad2-homepage .hd-screen-h small { margin-left: auto; font-size: .7rem; font-weight: 700; color: #475569; }
.ad2-homepage .hd-preview { position: relative; border-radius: 12px; overflow: hidden; background-color: #1f2b24; background-repeat: no-repeat; }
.ad2-homepage .hd-preview span { position: absolute; left: 10px; bottom: 8px; color: #fff; font-weight: 800; font-size: .72rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ad2-homepage .hd-screen .ad2-f { display: flex; flex-direction: column; gap: 5px; }
.ad2-homepage .hd-save {
    position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 18px; padding: 9px 10px 9px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ad2-line);
    box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45);
}
.ad2-homepage .hd-save-note { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: .78rem; font-weight: 700; color: #334155; }
.ad2-homepage .hd-save-note i { color: var(--lp2-deep); }
.ad2-homepage .hd-save .btn-primary { flex: none; height: 40px; border-radius: 12px; padding: 0 16px; }
@media (max-width: 640px) { .ad2-homepage .hd-save-note { font-size: .72rem; } .ad2-homepage .hd-save-note i { display: none; } }
/* slides and category sections */
.ad2-homepage .ad2-hs { cursor: pointer; align-items: center; }
.ad2-homepage .ad2-hs:hover { background: #fafbfd; }
.ad2-homepage .ad2-hs-pv {
    position: relative; flex: 0 0 76px; width: 76px; height: 44px; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center; background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b; font-size: 1.05rem;
}
.ad2-homepage .ad2-hs-pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad2-homepage .ad2-item.is-dim .ad2-hs-pv { opacity: .6; }
.ad2-homepage .ad2-hpcat { align-items: center; }
.ad2-homepage .ad2-hpcat-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; }
.ad2-homepage .ad2-hpcat-show { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; cursor: pointer; font-size: .78rem; font-weight: 700; color: #1e293b; }
.ad2-homepage .ad2-hpcat-order { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: #334155; }
.ad2-homepage .ad2-hpcat-order input {
    width: 70px; height: 36px; min-height: 36px; padding: 4px 10px; border-radius: 10px; border: 1px solid #dbe2ea; background: #fff;
    color: #000; font: inherit; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ad2-homepage .ad2-hpcat-banner { height: 32px; max-width: 90px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }
.ad2-homepage .ad2-hpcat .ad2-item-acts .btn-primary { height: 40px; min-height: 40px; border-radius: 12px; padding: 0 14px; }
.ad2-homepage .ad2-hpcat .ad2-item-acts label.ad2-ibtn { margin: 0; }
@media (max-width: 560px) {
    .ad2-homepage .ad2-hs { flex-wrap: nowrap; }
    .ad2-homepage .ad2-hs .ad2-item-body { flex: 1 1 auto; }
    .ad2-homepage .ad2-hs .ad2-item-acts { width: auto; padding-left: 0; flex-direction: column; }
    .ad2-homepage .ad2-hs-pv { flex-basis: 60px; width: 60px; height: 38px; }
}
.ad2-homepage .ad2-hpcat .ad2-item-acts .btn-primary { order: 3; }
@media (max-width: 560px) { .ad2-homepage .ad2-hpcat { align-items: flex-start; } }

/* ---- Notification register and Email: switches, keys, group captions -------- */
.ad2-ct .ad2-ct-sw { display: inline-flex; align-items: center; padding: 6px 0 6px 6px; cursor: pointer; }
.ad2-ct .ad2-ct-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .7rem; font-weight: 600; color: #334155; letter-spacing: -.01em; }
.ad2-ct .ad2-ct-group { margin-top: 18px; }
.ad2-ct .ad2-ct-group > span { display: inline-flex; align-items: center; gap: 7px; }
.ad2-ct .ad2-ct-group > span i { font-size: .85rem; color: var(--sx-c); }
.ad2-ct .ad2-ct-group em { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; color: #334155; text-align: center; }
.ad2-ct .ad2-ct-gl + .lp2-cap { margin-top: 18px; }
.ad2-ct .ad2-ct-snip b { color: #000; font-weight: 750; }
.ad2-ct .ad2-ct-err { color: #b91c1c; font-weight: 650; }
.ad2-ct .ad2-ct-pad { padding: 18px 16px; }
.ad2-ct .sx-list > .ad2-muted { padding: 18px 16px; }
.ad2-ct .ad2-ct-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
    font-size: .78rem; font-weight: 600; color: #334155;
}
.ad2-ct .ad2-ct-bar .btn-primary { height: 38px; border-radius: 12px; padding: 0 14px; }
.ad2-ct .ad2-ct-tabs .pill-tab { display: inline-flex; align-items: center; gap: 7px; }
.ad2-ct .ad2-ct-tabs .pill-tab i { font-size: .86rem; color: var(--lp2-deep); }
.ad2-ct .ad2-ct-tabs .pill-tab.active i { color: #fff; }
.ad2-ct [data-email-panel][hidden] { display: none !important; }
.ad2-ct .lp2-note.ad2-note-warn { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.ad2-ct .lp2-note code, .ad2-ct details.lp2-note code { padding: 0 4px; border-radius: 5px; background: #fff; border: 1px solid #e2e8f0; font-size: .92em; color: #000; }
@media (max-width: 560px) {
    .ad2-ct .ad2-ct-sw { padding-left: 2px; }
    .ad2-ct .ad2-ct-bar .btn-primary { flex: 1 1 100%; justify-content: center; }
}

/* ---- Pop-ups: wording, recipients, sent email, editor --------------------------- */
body.lp2-app .modal .ad2-m code { padding: 0 4px; border-radius: 5px; background: #fff; border: 1px solid #e2e8f0; font-size: .92em; color: #000; }
body.lp2-app .modal .ad2-m-sec .ad2-opt { text-transform: none; letter-spacing: 0; }
body.lp2-app .modal .ad2-m-sample { grid-column: 1 / -1; padding: 11px 13px; border-radius: 14px; background: #eef2ff; border: 1px solid #c7d2fe; }
body.lp2-app .modal .ad2-m-sample > span { display: block; margin-bottom: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3730a3; }
body.lp2-app .modal .ad2-m-sample b { display: block; font-size: .86rem; font-weight: 800; color: #000; }
body.lp2-app .modal .ad2-m-sample p { margin: 3px 0 0; font-size: .8rem; font-weight: 550; color: #1e293b; line-height: 1.45; }
body.lp2-app .modal .ad2-m-people { grid-column: 1 / -1; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0 12px; background: #fff; }
body.lp2-app .modal .ad2-m-person { gap: 11px; padding: 8px 0; }
body.lp2-app .modal .ad2-m-person + .ad2-m-person { border-top: 1px solid #f1f4f8; }
body.lp2-app .modal .ad2-m-person .ad2-sw-t b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
body.lp2-app .modal .ad2-m-av {
    --c: #059669; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
    background: var(--c); color: #fff; font-size: .74rem; font-weight: 800;
}
body.lp2-app .modal .ad2-m-mailhead {
    grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0;
}
body.lp2-app .modal .ad2-m-mailhead-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.lp2-app .modal .ad2-m-mailhead-t > span { font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #334155; }
body.lp2-app .modal .ad2-m-mailhead-t b { font-size: .98rem; font-weight: 800; color: #000; overflow-wrap: anywhere; }
body.lp2-app .modal .ad2-m-mailhead-t small { font-size: .74rem; font-weight: 600; color: #475569; overflow-wrap: anywhere; }
body.lp2-app .modal .ad2-m-frame { grid-column: 1 / -1; overflow: hidden; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; }
body.lp2-app .modal .ad2-m-frame iframe { display: block; width: 100%; height: 62vh; border: 0; background: #fff; }
body.lp2-app .modal .ad2-m-details { grid-column: 1 / -1; padding: 10px 14px; border-radius: 14px; border: 1px solid #e2e8f0; background: #fff; }
body.lp2-app .modal .ad2-m-details summary { cursor: pointer; font-size: .82rem; font-weight: 750; color: #000; }
body.lp2-app .modal .ad2-m-details pre {
    margin: 10px 0 2px; max-height: 260px; overflow: auto; white-space: pre-wrap; padding: 12px; border-radius: 10px;
    background: #0f172a; color: #e2e8f0; font-size: .74rem; line-height: 1.6;
}
body.lp2-app .modal .ad2-m .ad2-m-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
body.lp2-app .modal .ad2-ed { border: 1px solid #dbe2ea; border-radius: 12px; overflow: hidden; background: #fff; }
body.lp2-app .modal .ad2-ed:focus-within { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .15); }
body.lp2-app .modal .ad2-ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px; background: #f8fafc; border-bottom: 1px solid #eef1f5; }
body.lp2-app .modal .ad2-ed-btn {
    min-width: 34px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    border-radius: 9px; border: 1px solid transparent; background: transparent; color: #1e293b; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700;
}
body.lp2-app .modal .ad2-ed-btn:hover { background: #fff; border-color: #dbe2ea; color: #000; }
body.lp2-app .modal .ad2-ed-btn small { font-size: .62rem; }
body.lp2-app .modal .ad2-ed-sep { width: 1px; height: 20px; margin: 0 3px; background: #dbe2ea; }
body.lp2-app .modal .ad2-ed-area { min-height: 180px; padding: 12px 14px; outline: none; font-size: .9rem; line-height: 1.6; color: #000; }
body.lp2-app .modal .ad2-ed-area:empty::before { content: attr(data-placeholder); color: #64748b; }
body.lp2-app .modal .ad2-opp-cover { margin-bottom: 8px; }
body.lp2-app .modal .ad2-opp-cover img { display: block; width: 100%; max-height: 140px; object-fit: cover; border-radius: 12px; border: 1px solid #e2e8f0; }
body.lp2-app .modal .ad2-m > .ad2-m-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* rows with a switch at the end: the hover actions sit left of it, never over it */
@media (min-width: 720px) and (hover: hover) { .ad2-ct .ad2-ct-hasctl .sx-item-actions { right: 84px; } }

/* ==========================================================================
   Delivery hub (/admin-delivery) — .ad2-dlv (with .ad2-ct), tone teal
   --------------------------------------------------------------------------
   Pill tabs over four panels: service areas and riders as list cards, the
   delivery rules as Platform-settings section cards with a sticky save bar,
   and the activity log. The wrapper keeps .admin-delivery-shell (the rider
   pop-up looks for it); app.css makes that a grid, so it is reset here.
   ========================================================================== */
.ad2-dlv.admin-delivery-shell { display: block; gap: 0; }
.ad2-dlv [data-dlv-panel][hidden] { display: none !important; }

/* tabs: a sideways strip on phones, one row on wide screens */
.ad2-dlv .ad2-dlv-tabs { flex-wrap: nowrap; margin: 0 0 16px; padding: 2px 0 4px; }
.ad2-dlv .ad2-dlv-tabs .pill-tab {
    flex: 0 0 auto; min-height: 38px; padding: 0 14px; white-space: nowrap; cursor: pointer;
    font: inherit; font-size: .8rem; font-weight: 750;
}
.ad2-dlv .ad2-dlv-tabs .pill-tab:focus-visible { outline: 2px solid var(--lp2-h3); outline-offset: 2px; }
@media (min-width: 900px) { .ad2-dlv .ad2-dlv-tabs { flex-wrap: wrap; overflow: visible; } }

/* rows */
.ad2-dlv .ad2-dlv-pin { display: inline-flex; align-items: center; gap: 4px; color: #0f766e; font-weight: 700; }
.ad2-dlv .ad2-ct-snip > i.bi-geo-alt { margin-right: 2px; color: #0f766e; }
.ad2-dlv .sx-amt { font-variant-numeric: tabular-nums; }
.ad2-dlv .lp2-badges .ad2-chip i { font-size: .7rem; }
.ad2-dlv .lp2-badges .ad2-dlv-live i { font-size: .42rem; }
.ad2-dlv .ad2-dlv-foot { margin: 14px 0 0; }
.ad2-dlv .ad2-ct-bar > span { flex: 1 1 260px; min-width: 0; }

/* delivery rules: each section icon its own colour */
.ad2-dlv [data-dlv-panel="rules"] > .lp2-note { margin: 0 0 14px; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+1) { --ad2-st: #0d9488; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+2) { --ad2-st: #2563eb; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+3) { --ad2-st: #7c3aed; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+4) { --ad2-st: #059669; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+5) { --ad2-st: #d97706; }
.ad2-dlv [data-dlv-panel="rules"] > .ad2-set:nth-of-type(6n+6) { --ad2-st: #475569; }
.ad2-dlv .ad2-set-list > .ad2-dlv-hint { border-top: 0; padding-top: 0; margin-top: -2px; }
.ad2-dlv .ad2-set-list > .lp2-note { padding: 10px 12px; margin: 0; }
.ad2-dlv .ad2-set-list > .lp2-note + * { border-top: 0; }
.ad2-dlv .ad2-dlv-save {
    position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 4px 0 8px; padding: 9px 10px 9px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ad2-line);
    box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45);
}
.ad2-dlv .ad2-dlv-save-t { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: .78rem; font-weight: 700; color: #334155; }
.ad2-dlv .ad2-dlv-save-t i { color: var(--lp2-deep, #115e59); }
.ad2-dlv .ad2-dlv-save .btn-primary { flex: none; height: 40px; border-radius: 12px; padding: 0 16px; }
@media (max-width: 640px) { .ad2-dlv .ad2-dlv-save-t { font-size: .72rem; } .ad2-dlv .ad2-dlv-save-t i { display: none; } }
@media (max-width: 380px) { .ad2-dlv .ad2-dlv-save-t { display: none; } .ad2-dlv .ad2-dlv-save .btn-primary { flex: 1; justify-content: center; } }

/* pop-ups: service area, assign to stores */
body.lp2-app .modal .ad2-dlv-m .st-m-note + .ad2-m-list,
body.lp2-app .modal .ad2-dlv-m .st-m-note + .ad2-m-empty { margin-top: 12px; }
body.lp2-app .modal .ad2-dlv-biz .ad2-m-li { cursor: default; }
body.lp2-app .modal .ad2-dlv-biz .ad2-m-li:hover { background: #fff; }
body.lp2-app .modal .ad2-dlv-biz .ad2-m-li-ic { font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
body.lp2-app .modal .ad2-dlv-biz-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
body.lp2-app .modal .ad2-dlv-biz-acts .btn { height: 34px; min-height: 34px; min-width: 80px; padding: 0 12px; font-size: .76rem; justify-content: center; box-shadow: none; }
/* one list of many stores: Assign is a tinted button, not a wall of solid green */
body.lp2-app .modal .ad2-dlv-biz-acts .btn-primary { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
body.lp2-app .modal .ad2-dlv-biz-acts .btn-primary:hover:not(:disabled) { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
body.lp2-app .modal .ad2-dlv-biz-acts .btn-outline { color: #334155; }
@media (max-width: 460px) {
    body.lp2-app .modal .ad2-dlv-biz .ad2-m-li { flex-wrap: wrap; row-gap: 8px; }
    body.lp2-app .modal .ad2-dlv-biz .ad2-m-li-t { flex: 1 1 calc(100% - 46px); }
    body.lp2-app .modal .ad2-dlv-biz-acts { width: 100%; padding-left: 45px; }
}
body.lp2-app .modal .ad2-dlv-m .ad2-dlv-del { color: #b91c1c; border-color: #fecaca; }
body.lp2-app .modal .ad2-dlv-m .ad2-dlv-del:hover:not(:disabled) { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
/* ==== end Delivery hub ==== */

/* ==========================================================================
   Platform & Billing extras — SMS logs (.ad2-sms, indigo), Help desk
   (.ad2-tickets, violet), Sender IDs (.ad2-sid, blue), Features guide
   (.ad2-features, teal), Payment methods (.ad2-pm, blue). All on the
   Content kit (.ad2-ct): list cards, section cards, chips, pop-ups.
   ========================================================================== */

/* ---- SMS logs: the Resend button stays in view on every row ---------------- */
.ad2-sms .ad2-sms-phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ad2-sms .sx-amt { display: flex; justify-content: flex-end; }
.ad2-sms .ad2-sms-resend {
    display: inline-flex; align-items: center; gap: 5px; height: 32px; min-height: 32px; padding: 0 11px;
    border-radius: 10px; border: 1px solid #dbe2ea; background: #fff; color: #0f172a; box-shadow: none;
    font-size: .74rem; font-weight: 750; white-space: nowrap;
}
.ad2-sms .ad2-sms-resend .btn-text { display: inline-flex; align-items: center; gap: 5px; }
.ad2-sms .ad2-sms-resend i { color: var(--lp2-deep, #3730a3); }
.ad2-sms .ad2-sms-resend:hover:not(:disabled) { border-color: #94a3b8; background: #f8fafc; }
.ad2-sms .lp2-badges .ad2-chip i { font-size: .62rem; }

/* ---- Sender IDs: the actions are always in view, on a line of their own ---- */
.ad2-sid .ad2-sid-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .05em; color: #000;
}
.ad2-sid .sx-list .sx-item { flex-wrap: wrap; row-gap: 0; }
.ad2-sid .sx-list .sx-item-actions {
    display: flex !important; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 10;
    position: static !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important;
    margin: 10px 0 0 52px; padding: 10px 0 0; border-top: 1px dashed #e2e8f0; background: none !important;
}
.ad2-sid .sx-act { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-weight: 750; }
.ad2-sid .sx-act.ad2-sid-ok { color: #fff; background: #047857; border-color: transparent; }
.ad2-sid .sx-act.ad2-sid-ok:hover { background: #065f46; }
.ad2-sid .lp2-badges .ad2-chip { text-transform: none; }
@media (max-width: 560px) {
    .ad2-sid .sx-list .sx-item-actions { margin-left: 0; }
    .ad2-sid .sx-act { flex: 1 1 auto; justify-content: center; }
}

/* ---- Features guide: one card per group, features two to a row on wide screens */
.ad2-features .ad2-fg-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
.ad2-features .ad2-fg-feat { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1f5; min-width: 0; }
.ad2-features .ad2-fg-feat:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
    .ad2-features .ad2-fg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ad2-features .ad2-fg-feat:nth-child(2) { border-top: 0; padding-top: 0; }
}
.ad2-features .ad2-fg-ic {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: .98rem;
    color: color-mix(in srgb, var(--ad2-st) 82%, #000); background: color-mix(in srgb, var(--ad2-st) 10%, #fff);
}
.ad2-features .ad2-fg-body { flex: 1; min-width: 0; }
.ad2-features .ad2-fg-t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.ad2-features .ad2-fg-t > b { font-size: .9rem; font-weight: 800; color: #000; letter-spacing: -.005em; }
.ad2-features .ad2-fg-lim {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    font-size: .66rem; font-weight: 750; line-height: 1.6;
    color: color-mix(in srgb, var(--ad2-st) 62%, #000);
    background: color-mix(in srgb, var(--ad2-st) 9%, #fff); border: 1px solid color-mix(in srgb, var(--ad2-st) 24%, #fff);
}
.ad2-features .ad2-fg-body > p { margin: 4px 0 0; font-size: .8rem; font-weight: 550; color: #334155; line-height: 1.55; }
.ad2-features .ad2-fg-foot { display: flex; justify-content: center; padding: 6px 0 8px; }
.ad2-features .ad2-fg-foot .btn-primary { height: 44px; border-radius: 14px; padding: 0 20px; }
@media (max-width: 420px) { .ad2-features .ad2-fg-lim { white-space: normal; } }

/* ---- Payment methods: section cards with the switch in the head ------------- */
.ad2-pm .ad2-pm-on { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: .8rem; font-weight: 750; color: #000; }
.ad2-pm .ad2-set-head { flex-wrap: nowrap; }
.ad2-pm .ad2-set-t { flex: 1 1 auto; }
@media (max-width: 420px) {
    .ad2-pm .ad2-pm-on > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ad2-pm .ad2-pm-img { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ad2-pm .ad2-pm-thumb {
    position: relative; height: 72px; min-width: 96px; max-width: 220px; padding: 5px; border-radius: 12px;
    border: 1px solid #e2e8f0; background: #f8fafc; display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in;
}
.ad2-pm .ad2-pm-thumb img { display: block; height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px; }
.ad2-pm .ad2-pm-thumb:hover { border-color: #93c5fd; }
.ad2-pm .ad2-pm-thumb .ad2-pm-broken { display: none; font-size: .72rem; font-weight: 700; color: #b45309; gap: 5px; align-items: center; }
.ad2-pm .ad2-pm-thumb.is-broken img { display: none; }
.ad2-pm .ad2-pm-thumb.is-broken .ad2-pm-broken { display: inline-flex; }
.ad2-pm .ad2-pm-thumb.is-uploading { cursor: default; }
.ad2-pm .ad2-pm-thumb.is-uploading img { opacity: .45; }
.ad2-pm .ad2-pm-up { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #1d4ed8; }
.ad2-pm .ad2-pm-img-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ad2-pm label.ad2-btn.is-busy { opacity: .6; pointer-events: none; }
.ad2-pm .ad2-btn-danger { color: #b91c1c; border-color: #fecaca; }
.ad2-pm .ad2-btn-danger:hover { background: #fef2f2; border-color: #f87171; }
.ad2-pm .ad2-pm-noimg {
    height: 72px; width: 96px; border-radius: 12px; border: 1.5px dashed #cbd5e1; background: #f8fafc;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    font-size: .68rem; font-weight: 700; color: #475569;
}
.ad2-pm .ad2-pm-noimg i { font-size: 1rem; color: #64748b; }
.ad2-pm label.ad2-btn { margin: 0; }
.ad2-pm .ad2-pm-save {
    position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 4px 0 8px; padding: 9px 10px 9px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ad2-line);
    box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .45);
}
.ad2-pm .ad2-pm-save-t { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: .78rem; font-weight: 700; color: #334155; }
.ad2-pm .ad2-pm-save-t i { color: var(--lp2-deep, #1e40af); }
.ad2-pm .ad2-pm-save .btn-primary { flex: none; height: 40px; border-radius: 12px; padding: 0 16px; }
@media (max-width: 420px) { .ad2-pm .ad2-pm-save-t { display: none; } .ad2-pm .ad2-pm-save .btn-primary { flex: 1; justify-content: center; } }

/* ---- Help desk: tabs, rows, and the ticket pop-up ---------------------------- */
.ad2-tickets .ad2-tkt-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.ad2-tickets .ad2-tkt-tabs::-webkit-scrollbar { display: none; }
.ad2-tickets .ad2-tkt-tabs .pill-tab { flex: 0 0 auto; white-space: nowrap; }
.ad2-tickets .ad2-tkt-n { display: inline-flex; align-items: center; gap: 3px; }
.ad2-tickets .ad2-tkt-n i { font-size: .68rem; }

body.lp2-app .modal.ad2-tkt-m .modal-header { margin-bottom: 0; }
body.lp2-app .modal.ad2-tkt-m .modal-title { min-width: 0; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-title {
    min-width: 0; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; font-weight: 800; color: #475569; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-body { padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex-shrink: 0;
    padding: 10px 16px; border-bottom: 1px solid #eef1f5; background: #fff;
}
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: .8rem; font-weight: 700; color: #1e293b; overflow-wrap: anywhere; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-who i { color: #6d28d9; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-st { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: .74rem; font-weight: 750; color: #475569; }
body.lp2-app .modal.ad2-tkt-m #admin-tkt-status {
    height: 38px; min-height: 38px; padding: 0 32px 0 11px; border-radius: 11px; border: 1px solid #dbe2ea;
    background-color: #fff; color: #000; font: inherit; font-size: .82rem; font-weight: 700;
}
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-thread { flex: 1; min-height: 140px; overflow-y: auto; padding: 16px; background: #f8fafc; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-msg { display: flex; align-items: flex-start; gap: 10px; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-msg + .ad2-tkt-msg { margin-top: 14px; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-msg.is-admin { flex-direction: row-reverse; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-av {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: .88rem; background: #e2e8f0; color: #334155;
}
body.lp2-app .modal.ad2-tkt-m .is-admin .ad2-tkt-av { background: #6d28d9; color: #fff; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-msg-w { max-width: 82%; min-width: 0; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-meta { margin-bottom: 4px; font-size: .68rem; font-weight: 700; color: #475569; }
body.lp2-app .modal.ad2-tkt-m .is-admin .ad2-tkt-meta { text-align: right; color: #5b21b6; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-bubble {
    padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid #e2e8f0; color: #000;
    font-size: .86rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
body.lp2-app .modal.ad2-tkt-m .is-admin .ad2-tkt-bubble { border-radius: 14px 4px 14px 14px; background: #6d28d9; border-color: #6d28d9; color: #fff; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-none { margin: 0; padding: 22px 0; text-align: center; font-size: .84rem; font-weight: 650; color: #475569; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-reply { flex-shrink: 0; padding: 12px 16px 14px; border-top: 1px solid #eef1f5; background: #fff; }
body.lp2-app .modal.ad2-tkt-m #admin-tkt-reply {
    display: block; width: 100%; min-height: 80px; margin: 0 0 10px; padding: 10px 12px; resize: vertical;
    border-radius: 12px; border: 1px solid #dbe2ea; background: #fff; color: #000; font: inherit; font-size: .88rem; line-height: 1.5;
}
body.lp2-app .modal.ad2-tkt-m #admin-tkt-reply::placeholder { color: #64748b; }
body.lp2-app .modal.ad2-tkt-m #admin-tkt-reply:focus,
body.lp2-app .modal.ad2-tkt-m #admin-tkt-status:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .16); }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-reply .btn-primary { height: 44px; border-radius: 12px; }
body.lp2-app .modal.ad2-tkt-m .ad2-tkt-closed {
    flex-shrink: 0; padding: 13px 16px; text-align: center; border-top: 1px solid #eef1f5; background: #f8fafc;
    font-size: .82rem; font-weight: 700; color: #334155;
}
@media (max-width: 420px) { body.lp2-app .modal.ad2-tkt-m .ad2-tkt-st { margin-left: 0; } }
/* ==== end Platform & Billing extras ==== */

/* ==== AI providers (Platform settings → API Credentials) ====
   Default provider + fallback, a card per provider with per-task model
   pickers, connection test result and the recent-calls list. */
.ad2-settings .ad2-ai-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ad2-settings .ad2-ai-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 750; color: #000; background: #f1f5f9; border: 1px solid #e2e8f0;
}
.ad2-settings .ad2-ai-chip i { font-size: .8rem; color: #64748b; }
.ad2-settings .ad2-ai-chip.is-ok { background: #ecfdf5; border-color: #a7f3d0; }
.ad2-settings .ad2-ai-chip.is-ok i { color: #047857; }
.ad2-settings .ad2-ai-chip.is-warn { background: #fffbeb; border-color: #fde68a; }
.ad2-settings .ad2-ai-chip.is-warn i { color: #b45309; }
.ad2-settings .ad2-ai-models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 14px; border-top: 1px solid #eef1f5; }
.ad2-settings .ad2-ai-models > .ad2-ai-model { padding: 14px 0 0; }
@media (min-width: 900px) {
    .ad2-settings .ad2-ai-models { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
.ad2-settings .ad2-ai-model .ad2-ai-custom { margin-top: 6px; }
.ad2-settings .ad2-ai-model .ad2-ai-custom[hidden] { display: none !important; }
.ad2-settings .ad2-ai-model .ad2-ai-best { margin-top: 6px; }
.ad2-settings .ad2-ai-model .ad2-ai-best i { color: #475569; }
.ad2-settings .ad2-ai-set .lp2-note { margin: 12px 0 0; }
.ad2-settings .ad2-ai-test {
    display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
    font-size: .8rem; font-weight: 650; line-height: 1.45; color: #000; background: #f8fafc; border: 1px solid #e2e8f0;
    overflow-wrap: anywhere;
}
.ad2-settings .ad2-ai-test[hidden] { display: none; }
.ad2-settings .ad2-ai-test i { margin-top: 2px; }
.ad2-settings .ad2-ai-test.is-ok { background: #ecfdf5; border-color: #a7f3d0; }
.ad2-settings .ad2-ai-test.is-ok i { color: #047857; }
.ad2-settings .ad2-ai-test.is-bad { background: #fef2f2; border-color: #fecaca; }
.ad2-settings .ad2-ai-test.is-bad i { color: #b91c1c; }
.ad2-settings .ad2-ai-recent { list-style: none; margin: 0; padding: 0; }
.ad2-settings .ad2-ai-recent li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; min-width: 0;
}
.ad2-settings .ad2-ai-recent li + li { border-top: 1px solid #eef1f5; }
.ad2-settings .ad2-ai-r-main { min-width: 0; font-size: .82rem; font-weight: 600; color: #000; overflow-wrap: anywhere; }
.ad2-settings .ad2-ai-r-main b { font-weight: 800; }
.ad2-settings .ad2-ai-r-main small, .ad2-settings .ad2-ai-r-side small { display: block; font-size: .7rem; font-weight: 600; color: #475569; margin-top: 1px; }
.ad2-settings .ad2-ai-r-side { flex: 0 0 auto; text-align: right; }
.ad2-settings .ad2-ai-out {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #000;
    background: #f1f5f9; border: 1px solid #e2e8f0;
}
.ad2-settings .ad2-ai-out.is-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ad2-settings .ad2-ai-out.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ad2-settings .ad2-ai-out.is-bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
/* ==== end AI providers ==== */

/* ---- Cloud storage (Cloudflare R2) card --------------------------------------- */
.ad2-settings .ad2-r2-steps { margin: 0 0 14px; padding-left: 20px; font-size: .8rem; line-height: 1.55; color: #334155; }
.ad2-settings .ad2-r2-steps li { margin: 0 0 4px; }
.ad2-settings .ad2-r2-steps b { color: #000; }
.ad2-settings .ad2-r2-status {
    display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
    background: #f8fafc; border: 1px solid #e2e8f0; font-size: .82rem; color: #000;
}
.ad2-settings .ad2-r2-status > i { font-size: 1.05rem; color: #475569; margin-top: 1px; }
.ad2-settings .ad2-r2-status.is-on { background: #ecfdf5; border-color: #a7f3d0; }
.ad2-settings .ad2-r2-status.is-on > i { color: #047857; }
.ad2-settings .ad2-r2-status span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad2-settings .ad2-r2-status small { font-size: .76rem; font-weight: 600; color: #475569; overflow-wrap: anywhere; }
.ad2-settings .ad2-r2-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.ad2-settings .ad2-r2-steplist { margin: 6px 0 0; padding-left: 18px; font-weight: 600; }
.ad2-settings .ad2-r2-switches { margin-top: 16px; padding-top: 6px; border-top: 1px solid #e2e8f0; }

/* ---- Platform settings → Automations (Admin.loadCronTab, src/api/cron.php) ---- */
.ad2 .ad2-cron-list { display: flex; flex-direction: column; border: 1px solid #e7ebf1; border-radius: 14px; overflow: hidden; background: #fff; }
.ad2 .ad2-cron-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.1fr); gap: 12px; align-items: center; padding: 12px 14px; }
.ad2 .ad2-cron-row + .ad2-cron-row { border-top: 1px solid #eef1f5; }
.ad2 .ad2-cron-main { display: flex; flex-direction: column; min-width: 0; }
.ad2 .ad2-cron-main b { color: #000; font-size: .88rem; }
.ad2 .ad2-cron-main span { color: #475569; font-size: .76rem; line-height: 1.35; }
.ad2 .ad2-cron-every { color: #334155; font-size: .78rem; font-weight: 700; }
.ad2 .ad2-cron-last { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ad2 .ad2-cron-last small { color: #475569; font-size: .74rem; line-height: 1.35; overflow-wrap: anywhere; }
.ad2 .ad2-cron-note { color: #475569; font-weight: 600; }
@media (max-width: 640px) {
    .ad2 .ad2-cron-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Messages (/admin-sms): every SMS, email and WhatsApp message, priced ----
   assets/js/admin.js renderSMSLogs / _paintMessages. Channel colour in --ad2-t. */
.ad2-ct .ad2-msg-periods { margin: 0 0 12px; }
.ad2-ct .ad2-msg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
@media (max-width: 760px) { .ad2-ct .ad2-msg-tiles { grid-template-columns: 1fr; } }
.ad2-ct .ad2-msg-tile {
    display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 15px; border-radius: 16px; cursor: pointer;
    background: #fff; border: 1px solid var(--ad2-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); font: inherit; color: #000;
}
.ad2-ct .ad2-msg-tile:hover { border-color: color-mix(in srgb, var(--ad2-t) 45%, #fff); }
.ad2-ct .ad2-msg-tile.is-on { border-color: var(--ad2-t); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ad2-t) 16%, transparent); }
.ad2-ct .ad2-msg-tile-h { display: flex; align-items: center; gap: 10px; }
.ad2-ct .ad2-msg-tile-h .ad2-ct-tile-ic {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: .95rem;
    color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 12%, #fff);
}
.ad2-ct .ad2-msg-tile-h b { font-size: .95rem; font-weight: 800; }
.ad2-ct .ad2-msg-tile-cost { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad2-ct .ad2-msg-tile-l { font-size: .78rem; font-weight: 600; color: #334155; line-height: 1.5; }
.ad2-ct .ad2-msg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .ad2-ct .ad2-msg-two { grid-template-columns: 1fr; } }
.ad2-ct .ad2-msg-tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ad2-ct .ad2-msg-tbl th { text-align: left; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; padding: 0 6px 6px 0; border-bottom: 1px solid var(--ad2-line); }
.ad2-ct .ad2-msg-tbl td { padding: 7px 6px 7px 0; border-bottom: 1px solid #f1f5f9; color: #000; vertical-align: top; }
.ad2-ct .ad2-msg-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad2-ct .ad2-msg-tbl td small { display: block; font-size: .7rem; color: #475569; font-weight: 600; }
.ad2-ct .ad2-msg-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; font-size: .72rem; color: var(--ad2-t); background: color-mix(in srgb, var(--ad2-t) 12%, #fff); vertical-align: -5px; }
.ad2-ct .ad2-msg-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.ad2-ct .ad2-msg-f-r { display: flex; gap: 8px; flex-wrap: wrap; }
.ad2-ct .ad2-msg-f-r select, .ad2-ct .ad2-msg-f-r input { height: 38px; border-radius: 10px; border: 1px solid var(--ad2-line); padding: 0 12px; font: inherit; font-size: .84rem; background: #fff; color: #000; }
.ad2-ct .ad2-msg-f-r input { min-width: 230px; }
.ad2-ct .ad2-msg-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; font-size: .82rem; font-weight: 700; color: #334155; }
.ad2-ct .ad2-msg-pay { display: block; font-size: .68rem; font-weight: 700; color: #475569; }
.ad2-ct .ad2-msg-pay.is-biz { color: #047857; }
/* the message pop-up */
.ad2-msg-kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ad2-msg-kv span { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #475569; }
.ad2-msg-kv b { font-size: .88rem; color: #000; word-break: break-word; }
.ad2-msg-body { padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: .86rem; color: #000; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.ad2-msg-body.is-bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ad2-msg-raw summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: #334155; }
.ad2-msg-raw pre { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: .72rem; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; }

/* ── Platform settings › API credentials: search, groups, one section open ──
   Phones: rows that tap open. From 1024px: the list on the left, the open
   section on the right. Every card stays in the page (hidden), so Save all
   still sees every field. */
.ad2-creds { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ad2-creds-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid #dbe3ec; }
.ad2-creds-search i { color: #475569; }
.ad2-creds-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .92rem; color: #000; height: 100%; padding: 0; box-shadow: none; }
.ad2-creds-search:focus-within { border-color: #0B8A55; box-shadow: 0 0 0 3px rgba(11, 138, 85, .14); }
.ad2-creds-nav { display: none; }
.ad2-creds-gh { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; margin: 6px 4px 6px; }
.ad2-creds-pgrp { display: flex; flex-direction: column; gap: 8px; }
.ad2-creds-pgrp + .ad2-creds-pgrp { margin-top: 8px; }
.ad2-cred { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; overflow: hidden; }
.ad2-cred-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ad2-cred-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ad2-cred-rt b { color: #000; font-size: .92rem; }
.ad2-cred-rt span { color: #475569; font-size: .76rem; line-height: 1.35; }
.ad2-cred-chev { color: #475569; transition: transform .2s ease; flex: 0 0 auto; }
.ad2-cred.is-open .ad2-cred-chev { transform: rotate(180deg); }
.ad2-cred-body { display: none; padding: 0 10px 10px; }
.ad2-cred.is-open .ad2-cred-body { display: block; }
.ad2-cred-body > .ad2-set { margin: 0; }
/* Phones: the row already names the section, so the card's own title goes (not when it holds buttons). */
@media (max-width: 1023px) { .ad2-cred-body > .ad2-set > .ad2-set-head:not(:has(.ad2-set-acts)) { display: none; } }
.ad2-cred-dot { font-style: normal; font-size: .66rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; white-space: nowrap; flex: 0 0 auto; }
.ad2-cred-dot.is-on { color: #fff; background: #0B8A55; }
.ad2-cred-dot.is-set { color: #075C3B; background: #dcfce7; }
.ad2-creds-none { padding: 18px; text-align: center; color: #334155; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fff; }
.ad2-creds [hidden] { display: none !important; }

@media (min-width: 1024px) {
    .ad2-creds-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
    .ad2-creds-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto;
        padding: 10px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; }
    .ad2-creds-grp + .ad2-creds-grp { margin-top: 8px; }
    .ad2-creds-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent;
        text-align: left; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: #000; }
    .ad2-creds-link i { color: #475569; width: 18px; text-align: center; }
    .ad2-creds-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ad2-creds-link:hover { background: #f1f5f9; }
    .ad2-creds-link.is-active { background: #ecfdf5; color: #075C3B; box-shadow: inset 3px 0 0 #0B8A55; }
    .ad2-creds-link.is-active i { color: #0B8A55; }
    /* The right side shows only the open section, as its own card. */
    .ad2-creds-panes .ad2-creds-gh, .ad2-cred-row { display: none; }
    .ad2-creds-pgrp + .ad2-creds-pgrp { margin-top: 0; }
    .ad2-cred { display: none; border: 0; background: transparent; overflow: visible; }
    .ad2-cred.is-active { display: block; }
    .ad2-cred-body { display: block; padding: 0; }
}

/* ── Platform settings: grouped list + search, one page open ───────────────
   Phones/tablets: the list; a tap opens that page full width (All settings
   goes back). From 1024px: the list on the left, the page on the right.
   API credentials lists its services under it. The old pill strip stays in
   the page, hidden, for the code that reads the active tab. */
.ad2-settings .ad2-ps-tabs { display: none !important; }
.ad2-st { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.ad2-st [hidden] { display: none !important; }
.ad2-st-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid #dbe3ec; }
.ad2-st-search i { color: #475569; }
.ad2-st-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .92rem; color: #000; height: 100%; padding: 0; box-shadow: none; }
.ad2-st-search:focus-within { border-color: #0B8A55; box-shadow: 0 0 0 3px rgba(11, 138, 85, .14); }
.ad2-st-nav { display: flex; flex-direction: column; gap: 12px; }
.ad2-st-gh { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #475569; margin: 2px 6px 6px; }
.ad2-st-grp { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 8px 6px; }
.ad2-st-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 650; color: #000; }
.ad2-st-link > i:first-child { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: #ecfdf5; color: #0B8A55; font-size: .95rem; }
.ad2-st-link span { flex: 1; min-width: 0; }
.ad2-st-chev { color: #94a3b8; }
.ad2-st-link:hover { background: #f8fafc; }
.ad2-st-subs { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 2px solid #e2e8f0; }
.ad2-st.is-searching .ad2-st-subs:not([hidden]) { display: flex; }
.ad2-st-sublink { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; color: #000; }
.ad2-st-sublink i { color: #475569; width: 16px; text-align: center; }
.ad2-st-sublink span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad2-st-sublink:hover { background: #f1f5f9; }
.ad2-st-sublink.is-active { background: #ecfdf5; color: #075C3B; }
.ad2-st-none { padding: 18px; text-align: center; color: #334155; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fff; }
.ad2-st-main { display: none; }
.ad2-st.is-open .ad2-st-nav { display: none; }
.ad2-st.is-open .ad2-st-main { display: block; }
.ad2-st-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 12px 8px 10px; border-radius: 999px; border: 1px solid #dbe3ec; background: #fff; color: #000; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.ad2-st-title { font-size: 1.15rem; font-weight: 800; color: #000; margin: 6px 2px 10px; }
/* API credentials inside the shell: the page's own list and search are not needed. */
#ad2-st .ad2-creds-search, #ad2-st .ad2-creds-nav { display: none !important; }
#ad2-st .ad2-creds { margin-top: 10px; }

@media (min-width: 1024px) {
    .ad2-st-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
    .ad2-st-nav { gap: 6px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; }
    .ad2-st-grp { border: 0; padding: 0; border-radius: 0; }
    .ad2-st-grp + .ad2-st-grp { margin-top: 6px; }
    .ad2-st-gh { margin: 4px 6px 4px; }
    .ad2-st-link { padding: 8px 10px; font-size: .88rem; font-weight: 600; gap: 10px; }
    .ad2-st-link > i:first-child { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; font-size: .85rem; }
    .ad2-st-chev { display: none; }
    .ad2-st-link.is-active { background: #ecfdf5; color: #075C3B; box-shadow: inset 3px 0 0 #0B8A55; }
    .ad2-st[data-cat="credentials"] .ad2-st-subs:not([hidden]) { display: flex; }
    .ad2-st-main, .ad2-st.is-open .ad2-st-main { display: block; }
    .ad2-st.is-open .ad2-st-nav { display: flex; }
    .ad2-st-back, .ad2-st-title { display: none; }
    #ad2-st .ad2-creds-body { display: block; }
    #ad2-st .ad2-creds { margin-top: 0; }
}

/* ── Overview › Social (/admin-social) ─────────────────────────────────── */
.ad2-soc .ad2-soc-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ad2-soc .ad2-soc-bar .pill-tabs { overflow-x: auto; scrollbar-width: none; }
.ad2-soc-setup { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ad2-soc-setup-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #fff; border: 1px solid #e2e8f0; color: #000; }
.ad2-soc-setup-c.is-ok i { color: #0B8A55; }
.ad2-soc-setup-c.is-warn i { color: #d97706; }
.ad2-soc-setup-c.is-off { color: #475569; }
.ad2-soc-setup-c.is-off i { color: #94a3b8; }
.ad2-soc-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 900px) { .ad2-soc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ad2-soc-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ad2-soc-kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; min-width: 0; }
.ad2-soc-kpi-h { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; color: #334155; text-transform: uppercase; letter-spacing: .04em; }
.ad2-soc-kpi-h i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 12%, #fff); font-size: .85rem; }
.ad2-soc-kpi-v { font-size: 1.6rem; font-weight: 800; color: #000; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ad2-soc-kpi-s { font-size: .78rem; color: #334155; line-height: 1.35; }
.ad2-soc-kpi-f { font-size: .74rem; font-weight: 700; color: #0B8A55; margin-top: 2px; }
.ad2-soc-kpi-f.is-bad { color: #b91c1c; }
.ad2-soc .ad2-msg-two { margin-bottom: 14px; }
.ad2-soc .ad2-set { margin-bottom: 14px; }
.ad2-soc-scroll { overflow-x: auto; }
.ad2-soc-tbl td small { color: #475569; }
.ad2-soc-bad { color: #b91c1c; font-weight: 700; }
.ad2-soc-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; border: 1px solid #dbe3ec; background: #fff; margin-bottom: 10px; }
.ad2-soc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .88rem; color: #000; padding: 0; box-shadow: none; }
.ad2-soc-search i { color: #475569; }
.ad2-soc-posts { display: flex; flex-direction: column; }
.ad2-soc-post { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-top: 1px solid #eef2f7; }
.ad2-soc-post:first-child { border-top: 0; }
.ad2-soc-post > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ad2-soc-post b { color: #000; font-size: .86rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.ad2-soc-post span { color: #475569; font-size: .76rem; }
.ad2-soc-post-n { display: flex; gap: 10px; flex-wrap: wrap; color: #000 !important; font-weight: 700; }
.ad2-soc-post-n i { color: #475569; margin-right: 2px; }
.ad2-soc-sub { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #475569; margin: 14px 0 4px; }

/* Packages: which plan is Most popular. */
.ad2-pkg-popular { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; height: 40px; border-radius: 12px; border: 1px solid #dbe3ec; background: #fff; font-weight: 700; font-size: .84rem; color: #000; }
.ad2-pkg-popular i { color: #d97706; }
.ad2-pkg-popular select { border: 0; background: transparent; font: inherit; font-weight: 700; height: 100%; padding: 0 28px 0 4px; }