/* page styles: ads — fb-ads, fb-ads-settings, ad-accounts, campaign-links, campaign-cards, analytics, campaign-report.
   Every class is prefixed .ads-; global classes are only adjusted inside an .ads- parent. */

/* date range trigger (header button) */
.ads-rb { gap: 10px; padding: 0 12px; }
.ads-rb > span { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 500; color: var(--text-3); }
.ads-rb > span b { font-weight: 600; color: var(--text-2); }
.ads-rb > span em { font-style: normal; color: var(--text-4); font-weight: 500; }
.ads-rb > svg:last-child { color: var(--text-4); width: 16px; height: 16px; margin-left: 2px; }
.ads-sync { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 14px; }
.ads-sync i { width: 8px; height: 8px; border-radius: 50%; background: #17B26A; box-shadow: 0 0 0 3px #DCFAE6; display: inline-block; }

/* date picker modal */
.ads-dp { display: grid; grid-template-columns: 188px minmax(0, 1fr); margin: 4px -24px 0; border-top: 1px solid var(--border); }
.ads-dp-pre { border-right: 1px solid var(--border); padding: 8px; max-height: 452px; overflow-y: auto; scrollbar-width: thin; }
.ads-dp-pre .rc { height: 34px; padding: 0 10px; gap: 10px; align-items: center; border: 0; border-radius: 6px; background: none; box-shadow: none; font-size: 14px; font-weight: 500; color: var(--text-2); }
.ads-dp-pre .rc:hover { background: var(--surface-2); }
.ads-dp-pre .rc.on { background: var(--brand-50); color: var(--brand-700); box-shadow: none; }
.ads-dp-pre .rc .rdot { margin-top: 0; width: 14px; height: 14px; }
.ads-dp-pre hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
.ads-dp-main { padding: 16px 24px 4px; min-width: 0; }
.ads-cals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ads-cal h4 { display: flex; align-items: center; justify-content: center; position: relative; height: 32px; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.ads-cal h4 .ibtn { position: absolute; top: 0; } .ads-cal h4 .ibtn.pv { left: -4px; } .ads-cal h4 .ibtn.nx { right: -4px; }
.ads-cal .g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.ads-cal .g span { height: 34px; display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; position: relative; z-index: 0; cursor: pointer; }
.ads-cal .g span.wd { height: 28px; font-size: 12px; color: var(--text-4); cursor: default; }
.ads-cal .g span.mu { color: #C9CED6; cursor: default; }
.ads-cal .g span.in { background: var(--brand-50); color: var(--brand-700); }
.ads-cal .g span.s { background: linear-gradient(90deg, transparent 50%, var(--brand-50) 50%); }
.ads-cal .g span.e { background: linear-gradient(90deg, var(--brand-50) 50%, transparent 50%); }
.ads-cal .g span.s.e { background: none; }
.ads-cal .g span.s, .ads-cal .g span.e { color: #fff; font-weight: 600; }
.ads-cal .g span.s::before, .ads-cal .g span.e::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); z-index: -1; left: 50%; top: 0; transform: translateX(-50%); }
.ads-cal .g span.td:not(.s):not(.e)::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); }
.ads-cal .g span:not(.wd):not(.mu):not(.in):not(:empty):hover { background: var(--surface-3); border-radius: 50%; }
.ads-dp-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 16px; }
.ads-dp-cmp { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.ads-dp-cmp .select { width: 200px; margin-left: auto; }
.ads-dpf { align-items: center; margin-top: 16px !important; }
.ads-tz { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; }
.ads-tz svg { color: var(--text-4); }

/* account pills */
.ads-accts.pills-nav { display: flex; width: 100%; overflow-x: auto; gap: 4px; scrollbar-width: none; }
.ads-accts.pills-nav button { flex: 1 1 0; min-width: 190px; height: auto; min-height: 56px; padding: 8px 14px; text-align: left; justify-content: flex-start; display: block; }
.ads-accts .t { min-width: 0; display: flex; align-items: baseline; gap: 8px; line-height: 20px; }
.ads-accts .s { display: block; font-size: 12px; font-weight: 500; color: var(--text-4); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ads-accts .t b { font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-accts .n { margin-left: auto; padding-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ads-accts [aria-selected="true"] .t b, .ads-accts [aria-selected="true"] .n { color: var(--text); }
.ads-accts .itile { width: 28px; height: 28px; border-radius: 6px; } .ads-accts .itile svg.i { width: 16px; height: 16px; }

/* metric tiles (one card, ruled grid) */
.ads-mt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; overflow: hidden; }
.ads-mt.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ads-mt.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ads-mt > div { position: relative; padding: 18px 20px 16px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); min-width: 0; }
.ads-mt.c4 > div:nth-child(4n+1), .ads-mt.c6 > div:nth-child(6n+1), .ads-mt.c5 > div:nth-child(5n+1) { border-left: 0; }
.ads-mt.c4 > div:nth-child(-n+4), .ads-mt.c6 > div:nth-child(-n+6), .ads-mt.c5 > div:nth-child(-n+5) { border-top: 0; }
.ads-mt .l { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.ads-mt .l svg { width: 14px; height: 14px; color: var(--text-4); }
.ads-mt .v { margin-top: 6px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads-mt .v small { font-size: 13px; font-weight: 500; color: var(--text-4); letter-spacing: 0; margin-left: 4px; }
.ads-mt .f { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ads-mt svg.spark { position: absolute; right: 18px; top: 26px; width: 76px; height: 30px; }
.ads-mt.c6 > div { padding: 16px 18px 14px; } .ads-mt.c6 .v { font-size: 22px; line-height: 30px; }

/* campaign → ad set → ad tree */
.ads-tree { font-size: 14px; }
.ads-tr { display: grid; grid-template-columns: minmax(0, 1fr) 150px 96px 128px 112px 108px 32px; gap: 16px; align-items: center; min-height: 64px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.ads-th { min-height: 44px; background: var(--surface-2); font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.ads-tr .r { text-align: right; font-variant-numeric: tabular-nums; }
.ads-tree summary { list-style: none; cursor: pointer; transition: background .12s; }
.ads-tree summary::-webkit-details-marker { display: none; }
.ads-tree summary:hover, .ads-tree .ads-lv3:hover { background: var(--surface-2); }
.ads-tree > details:last-child > summary, .ads-tree > details:last-child[open] > details:last-child > summary, .ads-tree > details:last-child[open] > details:last-child[open] > .ads-lv3:last-child { border-bottom: 0; }
.ads-nm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ads-nm .tx { min-width: 0; line-height: 20px; }
.ads-nm .tx b { display: block; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-nm .tx span { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-chev { width: 16px !important; height: 16px !important; color: var(--text-4); flex: none; transition: transform .18s var(--ease); }
.ads-tree details[open] > summary .ads-chev { transform: rotate(90deg); color: var(--text-2); }
.ads-chev-sp { width: 16px; flex: none; }
.ads-lv2 { background: #FCFCFD; } .ads-lv2 .ads-nm { padding-left: 26px; }
.ads-lv3 { background: #FAFAFB; min-height: 60px; } .ads-lv3 .ads-nm { padding-left: 52px; }
.ads-lv2 .ads-nm .tx b, .ads-lv3 .ads-nm .tx b { font-weight: 500; color: var(--text-2); }
.ads-v > b { display: block; font-weight: 500; color: var(--text); line-height: 20px; }
.ads-v > span { display: block; font-size: 12px; color: var(--text-4); line-height: 18px; white-space: nowrap; }
.ads-v.mut { font-size: 12px; line-height: 16px; color: var(--text-4); }
.ads-dl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ads-dl small { font-size: 12px; color: var(--text-4); line-height: 16px; white-space: nowrap; }
.ads-dl small.bad { color: var(--error); }
.ads-tree .rowbtns { display: inline-flex; justify-content: flex-end; }
.ads-tree .menu { text-align: left; }

/* creative thumbnails (stand-ins for the ad image) */
.ads-thumb { width: 32px; height: 32px; border-radius: 6px; flex: none; display: grid; place-items: center; color: rgba(255,255,255,.95); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16,24,40,.08); }
.ads-thumb svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ads-thumb.big { width: 44px; height: 44px; border-radius: 8px; } .ads-thumb.big svg { width: 18px; height: 18px; }
.ads-thumb.t1 { background: linear-gradient(140deg, #7C2D12 0%, #C2410C 55%, #FDBA74 100%); }
.ads-thumb.t2 { background: linear-gradient(140deg, #1E3A5F 0%, #3E6A9A 60%, #B9D3EE 100%); }
.ads-thumb.t3 { background: linear-gradient(140deg, #3F2A56 0%, #8E5BA8 60%, #E9D5F5 100%); }
.ads-thumb.t4 { background: linear-gradient(140deg, #14532D 0%, #3F8F5F 60%, #C7EBD3 100%); }
.ads-thumb.t5 { background: linear-gradient(140deg, #4A2C1D 0%, #9C6644 60%, #EBD5BF 100%); }
.ads-thumb.t6 { background: linear-gradient(140deg, #5B1A2B 0%, #B23A5A 60%, #F6C9D4 100%); }

/* lists inside cards */
.ads-nc li .grow .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -0.01em; }

/* connection banner + token */
.ads-conn { display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 24px; }
.ads-conn .who { flex: 1; min-width: 0; } .ads-conn .who h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.ads-conn .who p { margin: 2px 0 0; color: var(--text-3); font-size: 14px; }
.ads-conn .facts { display: flex; gap: 0; }
.ads-conn .facts > div { padding: 0 20px; border-left: 1px solid var(--border); line-height: 20px; }
.ads-conn .facts span { display: block; font-size: 12px; color: var(--text-4); font-weight: 500; }
.ads-conn .facts b { display: block; font-size: 14px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.ads-fbtile { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; }
.ads-tok { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ads-tok > div { padding: 24px; } .ads-tok > div + div { border-left: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--r-lg) 0; }
.ads-tok h3 { margin-bottom: 4px; } .ads-tok .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ads intelligence */
.ads-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; align-items: stretch; }
.ads-g4 > .card, .ads-g3 > .card { display: flex; flex-direction: column; } .ads-g4 > .card > .card-b, .ads-g3 > .card > .card-b { flex: 1; }
.ads-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.ads-big { font-size: 30px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ads-big small { font-size: 14px; color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.ads-note { font-size: 14px; color: var(--text-3); line-height: 20px; margin: 8px 0 0; }
.ads-note b { color: var(--text-2); font-weight: 600; }
.ads-scale { margin: 22px 0 6px; position: relative; }
.ads-scale .trk { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #17B26A 0%, #84CC16 35%, #F79009 70%, #F04438 100%); opacity: .85; }
.ads-scale .mk { position: absolute; top: -5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--text); box-shadow: var(--sh-sm); }
.ads-scale .lb { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.ads-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin: 16px 0 4px; }
.ads-split i { display: block; height: 100%; }
.ads-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.ads-rank li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.ads-rank li:last-child { border-bottom: 0; padding-bottom: 0; } .ads-rank li:first-child { padding-top: 0; }
.ads-rank li::before { counter-increment: r; content: counter(r); width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 600; display: grid; place-items: center; flex: none; }
.ads-rank li:first-child::before { background: var(--success-bg); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-bd); }
.ads-rank .nm { flex: 1; min-width: 0; } .ads-rank .nm b { display: block; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ads-rank .nm span { display: block; font-size: 12px; color: var(--text-4); }
.ads-rank .vv { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.ads-age { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ads-age-t { border-left: 1px solid var(--border); }
@media (min-width: 641px) { .ads-age-t .t th:first-child, .ads-age-t .t td:first-child { padding-left: 20px; } }
.ads-age-t .tw { height: 100%; } .ads-age-t .t tfoot td { box-shadow: none; }

/* vendor cards */
.ads-vendors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.ads-vendors .split-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ads-vendors .split-stats > div { padding: 10px 12px; }
.ads-vendors .split-stats b.bad-t { color: var(--error); }
.ads-addcard { border: 1px dashed var(--border-2); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 24px; color: var(--text-3); background: transparent; cursor: pointer; transition: border-color .15s, background .15s; font: inherit; }
.ads-addcard:hover { border-color: var(--text-4); background: var(--surface); }
.ads-addcard b { color: var(--text-2); font-weight: 600; margin-top: 8px; } .ads-addcard span { font-size: 14px; max-width: 240px; }
.ads-stk { display: inline-flex; flex-direction: column; align-items: flex-end; border: 0; background: none; padding: 4px 8px; margin: -4px -8px; border-radius: 6px; cursor: pointer; font: inherit; color: inherit; text-align: right; transition: background .12s; }
.ads-stk:hover { background: var(--surface-3); }
.ads-stk > b { font-weight: 500; color: var(--text); } .ads-stk > span { font-size: 12px; color: var(--text-4); }
.ads-stk.bad > b { color: var(--error); } .ads-stk.ok > b { color: var(--success); }
.ads-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); margin-top: 4px; }
.ads-total span { color: var(--text-3); font-size: 14px; } .ads-total b { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ads-total small { display: block; font-size: 12px; color: var(--text-4); }

.t td.ads-wrapc { white-space: normal; min-width: 150px; max-width: 220px; }

/* report links */
.ads-link { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 248px; }
.ads-link .c { display: flex; align-items: center; gap: 6px; min-width: 0; } .ads-link .c b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ads-link .tag { height: 20px; padding: 0 6px; flex: none; margin-left: 2px; }
.ads-link .u { display: flex; align-items: center; gap: 4px; color: var(--text-3); }
.ads-link .u .ibtn { width: 24px; height: 24px; } .ads-link .u .ibtn svg.i { width: 14px; height: 14px; }
.ads-two > b { display: block; font-weight: 500; color: var(--text-2); } .ads-two > span { display: block; font-size: 12px; color: var(--text-4); }
.ads-client { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); margin-top: 10px; }
.ads-client .grow { flex: 1; min-width: 0; } .ads-client .grow > b { display: block; font-weight: 600; color: var(--text); } .ads-client .grow > span { display: block; font-size: 13px; color: var(--text-3); }
.ads-ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.ads-found { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ads-ok-url { display: flex; gap: 8px; margin-top: 4px; }
.ads-ok-url .input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* card settings (sortable lists) */
.ads-sl { list-style: none; margin: 0; padding: 0; }
.ads-sl li { display: flex; align-items: center; gap: 12px; padding: 12px 24px 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); transition: background .12s; }
.ads-sl li:last-child { border-bottom: 0; }
.ads-sl li:hover { background: var(--surface-2); }
.ads-sl .grip { color: var(--text-4); cursor: grab; display: grid; place-items: center; width: 24px; height: 32px; border-radius: 4px; flex: none; }
.ads-sl .grip:hover { background: var(--surface-3); color: var(--text-3); }
.ads-sl .nm { flex: 1; min-width: 0; } .ads-sl .nm b { display: block; font-weight: 500; color: var(--text); } .ads-sl .nm span { display: block; font-size: 13px; color: var(--text-3); }
.ads-sl li.off .nm b { color: var(--text-3); }
.ads-sl .vis { font-size: 12px; font-weight: 500; color: var(--text-4); width: 52px; text-align: right; }
.ads-sl li:not(.off) .vis { color: var(--success); }
.ads-sl.compact li { padding: 10px 4px; background: none; } .ads-sl.compact li:hover { background: none; }
.ads-gh { display: flex; align-items: center; gap: 12px; padding: 16px 24px 16px 16px; border-bottom: 1px solid var(--border); }
.ads-gh .grow { flex: 1; min-width: 0; } .ads-gh h2 { font-size: 16px; line-height: 24px; } .ads-gh .sub { font-size: 13px; color: var(--text-3); }
.ads-gh .grip { color: var(--text-4); cursor: grab; display: grid; place-items: center; width: 24px; height: 32px; }
.ads-cbar { display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 20px; margin-bottom: 24px; flex-wrap: wrap; }
.ads-cbar .lg { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--text-3); }
.ads-cbar .lg span { display: inline-flex; align-items: center; gap: 8px; } .ads-cbar .lg b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ads-prev { position: sticky; top: 88px; }
.ads-pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ads-pv > div { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; background: var(--surface); min-width: 0; }
.ads-pv span { display: block; font-size: 12px; line-height: 16px; color: var(--text-3); }
.ads-pv > div { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.ads-pv b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ads-pv-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.ads-pv-h b { color: var(--text-2); font-weight: 600; display: block; font-size: 14px; }

/* analytics: break-even */
.ads-be { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 32px; align-items: center; }
.ads-gauge { width: 100%; max-width: 248px; display: block; margin: 0 auto; }
.ads-gauge .gv { font: 600 34px var(--font); fill: var(--text); letter-spacing: -0.02em; }
.ads-gauge .gl { font: 500 13px var(--font); fill: var(--text-3); }
.ads-gauge .gt { font: 500 11px var(--font); fill: var(--text-4); }
.ads-be-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ads-be-cells > div { padding: 16px 18px; border-left: 1px solid var(--border); min-width: 0; }
.ads-be-cells > div:first-child { border-left: 0; }
.ads-be-cells span { display: block; font-size: 13px; color: var(--text-3); font-weight: 500; white-space: nowrap; }
.ads-be-cells b { display: block; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--text); margin-top: 4px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads-be-cells b small { font-size: 14px; color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-right: 2px; }
.ads-be-cells em { display: block; font-style: normal; font-size: 12px; color: var(--text-4); margin-top: 2px; white-space: nowrap; }
.ads-be-sum { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 14px; line-height: 20px; }
.ads-be-sum svg { color: var(--text-4); margin-top: 0; }
.ads-be-sum b { font-weight: 600; color: var(--text); }
.ads-tl { position: relative; margin-top: 18px; }
.ads-tl .bar { height: 8px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: hidden; }
.ads-tl .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #F79009; border-radius: 4px; }
.ads-tl .bar u { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #FEDF89 0 6px, transparent 6px 10px); }
.ads-tl .pin { position: absolute; top: -6px; width: 2px; height: 20px; background: var(--text); border-radius: 1px; }
.ads-tl .lb { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--text-4); }
.ads-tl .lb span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ads-tl .pin.be { background: #F79009; width: 2px; }
.ads-tl .lb b { color: var(--text-2); font-weight: 600; }

/* public client report */
.ads-rh { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.ads-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.ads-rh .ads-wrap { height: 72px; display: flex; align-items: center; gap: 16px; }
.ads-rh .vsep { height: 28px; margin: 0 4px; }
.ads-rh .ttl { display: flex; flex-direction: column; line-height: 18px; }
.ads-rh .ttl b { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ads-rh .ttl span { font-size: 12px; color: var(--text-3); }
.ads-live { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-bd); color: var(--success); font-size: 13px; font-weight: 500; }
.ads-live .sh { display: none; }
.ads-live i { width: 8px; height: 8px; border-radius: 50%; background: #17B26A; animation: pulse 1.6s infinite; display: inline-block; }
.ads-rm { padding-top: 32px; padding-bottom: 56px; animation: rise .3s var(--ease) both; }
.ads-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.ads-hero .who { flex: 1; min-width: 280px; }
.ads-hero .ey { font-size: 13px; font-weight: 600; color: var(--brand-600); margin-bottom: 2px; }
.ads-hero h1 { font-size: 30px; line-height: 38px; letter-spacing: -0.02em; }
.ads-hero .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--text-3); font-size: 14px; }
.ads-hero .meta span { display: inline-flex; align-items: center; gap: 6px; } .ads-hero .meta svg { width: 16px; height: 16px; color: var(--text-4); }
.ads-mgr { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-xs); }
.ads-mgr > div > b { display: block; font-weight: 600; color: var(--text); font-size: 14px; } .ads-mgr > div > span { display: block; font-size: 13px; color: var(--text-3); }
.ads-rbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ads-rbar .shown { margin-left: auto; color: var(--text-3); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.ads-rbar .shown b { color: var(--text-2); font-weight: 600; }
.ads-hm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.ads-hm > .card { padding: 20px 24px; position: relative; overflow: hidden; }
.ads-hm .l { font-size: 14px; font-weight: 500; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.ads-hm .l .itile { width: 28px; height: 28px; border-radius: 6px; } .ads-hm .l .itile svg.i { width: 16px; height: 16px; }
.ads-hm .v { font-size: 34px; line-height: 44px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); margin-top: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads-hm .v small { font-size: 16px; color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.ads-hm .f { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-3); }
.ads-hm svg.spark { position: absolute; right: 20px; top: 62px; width: 92px; height: 34px; }
.ads-tbl-ad { display: flex; align-items: center; gap: 12px; }
.ads-rf { border-top: 1px solid var(--border); background: var(--surface); }
.ads-rf .ads-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; color: var(--text-3); font-size: 14px; flex-wrap: wrap; }
.ads-rf b { color: var(--text-2); font-weight: 600; }

/* public report: full-page error states (opened by #invalid, #notfound, #expired) */
.scrim.ads-err { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; align-items: stretch; z-index: 95; }
.ads-err-b { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.ads-err-b .c { flex: 1; display: grid; place-items: center; padding: 48px 24px; }
.ads-err-b .box { max-width: 440px; text-align: center; }
.ads-err-b .itile { margin: 0 auto 24px; width: 56px; height: 56px; border-radius: 12px; } .ads-err-b .itile svg.i { width: 28px; height: 28px; }
.ads-err-b h1 { font-size: 30px; line-height: 38px; letter-spacing: -0.02em; margin-bottom: 12px; }
.ads-err-b p { color: var(--text-3); font-size: 16px; line-height: 24px; margin: 0 0 28px; }
.ads-err-b .code { display: inline-block; margin-bottom: 24px; }

/* ═════ responsive (ads) — breakpoints follow app.css: 1366 · 1280 · 1180 · 1100 · 860 · 640 ═════ */
.ads-svc { display: grid; grid-template-columns: minmax(0, 2.45fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.ads-svc > *, .ads-g3 > *, .ads-g4 > *, .ads-hm > *, .ads-vendors > *, .ads-age > *, .ads-tok > *, .ads-be > *, .ads-cals > * { min-width: 0; }
.ads-cm { display: none; }

@media (max-width: 1439px) {
  .ads-mbar { display: none; }
}
@media (max-width: 1366px) {
  .ads-tr { grid-template-columns: minmax(0, 1fr) 136px 92px 116px 104px 100px 32px; gap: 14px; }
}
@media (max-width: 1280px) {
  .ads-tr { grid-template-columns: minmax(0, 1fr) 124px 84px 104px 96px 92px 32px; gap: 12px; padding: 0 12px 0 20px; }
  .ads-lv2 .ads-nm { padding-left: 22px; } .ads-lv3 .ads-nm { padding-left: 44px; }
  .ads-svc, .ads-g3, .ads-g4, .ads-hm, .ads-vendors { gap: 16px; }
  .ads-g3.mb24, .ads-g4, .ads-hm, .ads-vendors { margin-bottom: 16px; }
  .ads-vendors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-vendors .ads-addcard { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; padding: 16px 20px; }
  .ads-vendors .ads-addcard b { margin: 0; } .ads-vendors .ads-addcard span { max-width: none; }
  .ads-conn { flex-wrap: wrap; }
  .ads-be { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .ads-be-cells em { white-space: normal; }
  .ads-mt.c6 > div { padding: 14px 14px 12px; } .ads-mt.c6 .v { font-size: 20px; line-height: 28px; }
  .ads-link { max-width: 210px; }
  .ads-hm .v { font-size: 30px; line-height: 40px; }
  .ads-mt { margin-bottom: 16px; }
}
@media (max-width: 1180px) {
  .ads-mt.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ads-mt.c6 > div:nth-child(n) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .ads-mt.c6 > div:nth-child(3n+1) { border-left: 0; } .ads-mt.c6 > div:nth-child(-n+3) { border-top: 0; }
  .ads-svc { grid-template-columns: minmax(0, 1fr); }
  .ads-svc > .card:last-child .hbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
  .ads-svc > .card:last-child .hbars > * + * { margin-top: 0; }
}
@media (max-width: 1100px) {
  .ads-mt.c4, .ads-hm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-mt.c4 > div:nth-child(n) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .ads-mt.c4 > div:nth-child(2n+1) { border-left: 0; } .ads-mt.c4 > div:nth-child(-n+2) { border-top: 0; }
  .ads-g3, .ads-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-g3 > :last-child:nth-child(odd), .ads-g4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ads-age { grid-template-columns: minmax(0, 1fr); } .ads-age-t { border-left: 0; border-top: 1px solid var(--border); }
  .ads-tok { grid-template-columns: minmax(0, 1fr); }
  .ads-tok > div + div { border-left: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .ads-be { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ads-gauge { max-width: 240px; }
  .ads-conn .facts { width: 100%; border-top: 1px solid var(--border); padding-top: 14px; }
  .ads-conn .facts > div:first-child { padding-left: 0; border-left: 0; }
  .ads-prev { position: static; }
  .ads-link { max-width: 190px; }
}
@media (max-width: 960px) {
  .ads-mt.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-mt.c5 > div:nth-child(n) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .ads-mt.c5 > div:nth-child(2n+1) { border-left: 0; } .ads-mt.c5 > div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 860px) {
  .ads-wrap { padding: 0 16px; }
  .ads-rm { padding-top: 20px; padding-bottom: 40px; }
  /* campaign → ad set → ad rows become small stacked cards */
  .ads-th { display: none; }
  .ads-tr { position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; min-height: 0; align-items: start; }
  .ads-tr > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; padding-right: 36px; }
  .ads-tr > :nth-child(7) { position: absolute; right: 8px; top: 12px; }
  .ads-tr > :nth-child(2) { grid-column: 1 / 3; grid-row: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .ads-tr > :nth-child(3) { grid-column: 3; grid-row: 2; }
  .ads-tr > :nth-child(4) { grid-column: 1; grid-row: 3; } .ads-tr > :nth-child(5) { grid-column: 2; grid-row: 3; } .ads-tr > :nth-child(6) { grid-column: 3; grid-row: 3; }
  .ads-tr .r { text-align: left; } .ads-tr > .r:nth-child(3) { text-align: right; }
  .ads-tr > span:empty { display: none; }
  .ads-tr [data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 500; color: var(--text-4); line-height: 16px; margin-bottom: 2px; }
  .ads-tr > [data-l]:nth-child(3)::before { display: none; }
  .ads-v.mut br { display: none; }
  .ads-nm .tx b { white-space: normal; }
  .ads-lv2 { padding-left: 32px; } .ads-lv3 { padding-left: 48px; }
  .ads-lv2 .ads-nm, .ads-lv3 .ads-nm { padding-left: 0; }
  .ads-lv3 .ads-chev-sp { display: none; }
  .ads-tree .ads-dl small { white-space: normal; }
  /* date picker: presets become a scrolling row */
  .ads-dp { grid-template-columns: minmax(0, 1fr); margin: 4px -16px 0; }
  .ads-dp-pre { display: flex; gap: 4px; max-height: none; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; scrollbar-width: none; }
  .ads-dp-pre::-webkit-scrollbar { display: none; }
  .ads-dp-pre .rc { flex: none; white-space: nowrap; }
  .ads-dp-pre hr { display: none; }
  .ads-dp-main { padding: 16px 16px 4px; }
  .ads-dp-cmp { flex-wrap: wrap; } .ads-dp-cmp .select { width: 100%; margin-left: 0; }
  .ads-dpf .ads-tz { width: 100%; }
  .ads-vendors { grid-template-columns: minmax(0, 1fr); }
  .ads-conn { padding: 16px; } .ads-conn .facts { flex-wrap: wrap; gap: 12px 0; }
  .ads-cbar { padding: 12px 16px; gap: 12px; } .ads-cbar .spacer { display: none; }
  .ads-gh { padding: 14px 16px 14px 8px; } .ads-sl li { padding: 10px 16px 10px 8px; }
  .ads-hero { gap: 14px; margin-bottom: 20px; } .ads-mgr { width: 100%; }
  .ads-rbar .shown { margin-left: 0; width: 100%; }
  .ads-rf .ads-wrap { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 20px; padding-bottom: 24px; }
  .ads-link { max-width: 180px; }
  .ads-ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ads-cd { display: none; } .ads-cm { display: block; }
  .ads-rb { max-width: 100%; min-width: 0; } .ads-rb > span { min-width: 0; overflow: hidden; } .ads-rb > span em { display: none; }
  .ads-accts.pills-nav button { min-width: 168px; }
  /* metric grids: two per row */
  .ads-mt.c4, .ads-mt.c6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-mt.c4 > div:nth-child(n), .ads-mt.c6 > div:nth-child(n) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
  .ads-mt.c4 > div:nth-child(2n+1), .ads-mt.c6 > div:nth-child(2n+1) { border-left: 0; }
  .ads-mt.c4 > div:nth-child(-n+2), .ads-mt.c6 > div:nth-child(-n+2) { border-top: 0; }
  .ads-mt > div, .ads-mt.c6 > div { padding: 14px 14px 12px; }
  .ads-mt .v, .ads-mt.c6 .v { font-size: 20px; line-height: 28px; }
  .ads-mt .v small { display: block; margin: 0; font-size: 12px; line-height: 16px; }
  .ads-mt .l { white-space: normal; line-height: 16px; }
  .ads-mt .f { flex-wrap: wrap; gap: 4px 6px; white-space: normal; }
  .ads-mt svg.spark { display: none; }
  .ads-g3, .ads-g4 { grid-template-columns: minmax(0, 1fr); }
  .ads-g3 > :last-child:nth-child(odd), .ads-g4 > :last-child:nth-child(odd) { grid-column: auto; }
  .ads-hm { gap: 12px; margin-bottom: 12px; }
  .ads-hm > .card { padding: 14px 14px 12px; }
  .ads-hm .l { font-size: 13px; line-height: 16px; } .ads-hm .l .itile { display: none; }
  .ads-hm .v { font-size: 24px; line-height: 32px; margin-top: 6px; }
  .ads-hm .f { flex-wrap: wrap; gap: 4px 6px; font-size: 12px; line-height: 16px; }
  .ads-hm svg.spark { display: none; }
  /* date picker: one month on phones */
  .ads-cals { grid-template-columns: minmax(0, 1fr); } .ads-cals .ads-cal:first-child { display: none; }
  .ads-dp-in { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ads-dp-in > .t4 { display: none; }
  /* break-even */
  .ads-be-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-be-cells > div:nth-child(n) { border-left: 1px solid var(--border); border-top: 1px solid var(--border); padding: 12px 14px; }
  .ads-be-cells > div:nth-child(odd) { border-left: 0; } .ads-be-cells > div:nth-child(-n+2) { border-top: 0; }
  .ads-be-cells span { white-space: normal; } .ads-be-cells b { font-size: 20px; line-height: 28px; }
  .ads-tl .lb { height: auto; display: flex; justify-content: space-between; gap: 8px; }
  .ads-tl .lb span { position: static; transform: none; }
  .ads-tl .lb span:first-child, .ads-tl .lb span:last-child { display: none; }
  /* public report header and hero */
  .ads-rh .ads-wrap { height: 60px; gap: 10px; }
  .ads-rh .auth-brand > span, .ads-rh .vsep, .ads-rh .ttl > span, .ads-rh .btn { display: none; }
  .ads-rh .ttl b { font-size: 14px; }
  .ads-live { padding: 0 10px; gap: 6px; } .ads-live > span { display: none; } .ads-live .sh { display: inline; font-style: normal; }
  .ads-hero .who { min-width: 0; flex: 1 1 200px; }
  .ads-hero h1 { font-size: 24px; line-height: 32px; }
  .ads-hero .av.s64 { width: 48px; height: 48px; font-size: 17px; }
  .ads-hero .meta { gap: 4px 12px; font-size: 13px; }
  .ads-tree .ads-lv2 { padding-left: 24px; } .ads-tree .ads-lv3 { padding-left: 36px; }
  .ads-sl .vis { display: none; }
  .ads-cbar .lg { width: 100%; } .ads-cbar .select { width: 100% !important; } .ads-cbar .btn { flex: 1 1 auto; }
  .ads-vendors .split-stats > div { padding: 8px; }
  .ads-conn .facts { flex-direction: column; } .ads-conn .facts > div { padding: 0; border-left: 0; }
  .ads-conn .facts b { white-space: normal; overflow-wrap: anywhere; }
  .ads-tok > div { padding: 16px; } .ads-tok .row { flex-wrap: wrap; }
  .ads-total b { font-size: 18px; }
  .ads-ok-url { flex-direction: column; }
  .ads-link { max-width: 100%; align-items: flex-end; }
  .ads-err-b h1 { font-size: 24px; line-height: 32px; } .ads-err-b .row { flex-direction: column; align-items: stretch; }
  .ads-err-b .code { word-break: break-all; }
  .ads-svc > .card:last-child .hbars { display: block; } .ads-svc > .card:last-child .hbars > * + * { margin-top: 16px; }
}

@media (max-width: 640px) {
  .ads-accts .t { display: block; } .ads-accts .t b { display: block; } .ads-accts .n { display: block; margin: 0; padding: 0; font-size: 14px; }
  .ads-sortl { display: none; }
  .ads-ch .card-h > div:first-child, .ads-ch .tbar-h > div:first-child { min-width: 0; }
  .ads-ch .card-h > .actions, .ads-ch .tbar-h > .actions { width: 100%; min-width: 0; flex-wrap: nowrap; }
  .ads-ch .actions .seg { max-width: 100%; }
}

@media (max-width: 640px) {
  /* the phone twins are drawn at phone size, so they must not take the global 600px chart minimum */
  .ads-cm .chart-wrap { overflow: visible; margin: 0; padding: 0; }
  .ads-cm .chart-wrap svg.chart { min-width: 0; }
}

/* pass 3: account pills on laptops, list rows and bar labels on phones */
@media (max-width: 1366px) {
  .ads-accts .t { display: block; } .ads-accts .t b { display: block; }
  .ads-accts .n { display: block; margin: 0; padding: 0; font-size: 13px; line-height: 18px; }
}
@media (max-width: 640px) {
  .ads-nc li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  .ads-nc li > :first-child { grid-row: 1 / 3; align-self: start; }
  .ads-nc li > .grow { grid-column: 2; grid-row: 1; }
  .ads-nc li > .pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .ads-nc li > .btn { grid-column: 3; grid-row: 1 / 3; }
  .ads-nc li .grow .tt { white-space: normal; }
  .ads-share .hbar .top { align-items: flex-start; }
  .ads-share .hbar .top > span { flex: 1 1 auto; min-width: 0; } .ads-share .hbar .top b { text-align: right; flex: 0 1 auto; max-width: 60%; } .ads-share .hbar .top b small { display: block; margin: 0; font-size: 12px; line-height: 16px; white-space: normal; }
}
@media (max-width: 860px) {
  .ads-live { white-space: nowrap; flex: none; }
  .ads-rh .auth-brand > span { display: none; }
  .ads-rh .ttl b { white-space: nowrap; }
}
@media (max-width: 640px) {
  .t td.ads-wrapc { min-width: 0; max-width: none; }
  .ads-vendors .ads-addcard { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px; }
  .ads-vendors .ads-addcard b { margin-top: 8px; }
}
@media (max-width: 640px) { .ads-wg { display: none; } }
@media (max-width: 640px) { .ads-t .t > tbody > tr > td:last-child, .ads-t .t > tfoot > tr > td:last-child { padding-right: 0; } }
@media (max-width: 1100px) and (min-width: 641px) { .ads-age .ads-cd { display: none; } .ads-age .ads-cm { display: block; } .ads-age .ads-cm svg.chart { max-height: 260px; margin: 0 auto; } }
@media (max-width: 1100px) and (min-width: 641px) { .ads-tk { display: none; } }
@media (min-width: 641px) and (max-width: 1100px) {
  .ads-t .t th, .ads-t .t td { padding-left: 12px; padding-right: 12px; }
  .ads-t .t th:first-child, .ads-t .t td:first-child { padding-left: 16px; }
  .ads-t .t td.ra:last-child { padding-right: 8px; }
}
@media (min-width: 641px) and (max-width: 860px) { .ads-link { max-width: 160px; } }
@media (min-width: 861px) and (max-width: 1366px) {
  .kpis.ads-k5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpis.ads-k5 > :nth-child(-n+3) { grid-column: span 2; } .kpis.ads-k5 > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 860px) { .kpis.ads-k5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

.ads-safe .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
@media (max-width: 860px) { .ads-safe .checks { grid-template-columns: 1fr; } }

/* ── v3 port (real CRM pages) ─────────────────────────────── */
.ads-sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; }
.ads-sl-grid li { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 10px 14px 10px 8px; }
.ads-sl li.dragging { opacity: .4; }
.ads-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ads-chips .pcard { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.ads-chips .pcard.pv { background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-100); }
.ads-chips .pcard.ph { background: var(--surface-2); color: var(--text-4); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 640px) { .ads-sl-grid { grid-template-columns: 1fr; } .ads-sl-grid li { border-right: 0; } }
.ads-sl-grid .vis { display: none; }
.ads-sl-grid li.off .card-lbl { color: var(--text-4); }
.ads-vendors .split-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ads-vendors .split-stats > div:nth-child(3) { border-left: 0; }
.ads-vendors .split-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
/* ads overview (real page) */
.ads-accts .p-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-dot); margin-right: 8px; vertical-align: 1px; }
.ads-accts .p-dot.ok { background: #17B26A; } .ads-accts .p-dot.bad { background: #F04438; }
.ads-calh { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ads-calh .select { flex: 1; min-width: 0; padding-right: 28px; }
.ads-dp-sum { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); font-size: 14px; font-weight: 500; color: var(--text-2); flex-wrap: wrap; }
.ads-cx { background: #FCFCFD; }
.ads-mstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); border-bottom: 1px solid var(--border); padding: 4px 16px 4px 50px; }
.ads-mstrip > div { padding: 8px 10px; min-width: 0; }
.ads-mstrip span { display: block; font-size: 12px; color: var(--text-4); white-space: nowrap; }
.ads-mstrip b { display: block; font-size: 14px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-none { padding: 14px 24px 14px 50px; font-size: 14px; color: var(--text-3); border-bottom: 1px solid var(--border); }
.ads-none.lv3 { padding-left: 76px; background: #FAFAFB; }
.ads-errs { max-width: 520px; margin: 0 auto; text-align: left; border: 1px solid var(--error-bd); background: var(--error-bg); border-radius: var(--r); }
.ads-errs > div { padding: 10px 14px; border-top: 1px solid var(--error-bd); font-size: 13px; } .ads-errs > div:first-child { border-top: 0; }
.ads-errs b { display: block; color: var(--error); font-weight: 600; } .ads-errs span { color: var(--text-3); overflow-wrap: anywhere; }
.ads-nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ads-nc-grid > li { border-right: 1px solid var(--border); }
#campsWrap .empty { padding: 40px 24px; }
@media (max-width: 640px) { .ads-mstrip { padding: 4px 8px 4px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ads-none, .ads-none.lv3 { padding-left: 32px; } .ads-nc-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { #campsWrap .ads-tr > [data-l]:nth-child(3)::before { display: block; } .ads-mstrip > div:last-child { grid-column: 1 / -1; } }
.ads-mstrip > div:last-child b { overflow: visible; }
@media (max-width: 860px) { .ads-chartcard .card-h { flex-wrap: wrap; } .ads-chartcard .card-h .actions { width: 100%; min-width: 0; } .ads-chartcard #metricPills { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ads-chartcard #metricPills button { flex: none; } }
@media (max-width: 640px) { .ads-rb { width: 100%; min-width: 0; } .ads-rb > span { min-width: 0; overflow: hidden; } .ads-rb > span b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 13px; } }

/* report links (campaign_links v3) */
.ads-cids { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.ads-cids .tag { height: 20px; padding: 0 6px; font-size: 11px; }
.ads-lt .ads-link { max-width: 320px; }
.ads-lt .ads-link .u { gap: 8px; min-width: 0; }
.ads-url { color: var(--brand-600); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ads-url:hover { color: var(--brand-700); }
.ads-lt .ads-link .btn { flex: none; }
.ads-tokc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-cm-scroll { max-height: min(52vh, 460px); overflow-y: auto; margin: 0 -24px; padding: 12px 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ads-cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.cm-inner { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); user-select: none; transition: border-color .15s; }
.cm-inner:hover { border-color: var(--border-2); }
.cm-drag { width: 10px; height: 16px; flex: none; cursor: grab; background: radial-gradient(circle, var(--text-4) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.cm-lbl { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-2); line-height: 18px; }
.cm-card-item.cm-hidden .cm-inner { border-style: dashed; background: transparent; }
.cm-card-item.cm-hidden .cm-lbl { color: var(--text-4); text-decoration: line-through; }
.cm-card-item.cm-chosen .cm-inner { border-color: var(--brand); box-shadow: var(--ring); opacity: .7; }
.cm-toggle { position: relative; width: 32px; height: 18px; flex: none; border: 0; padding: 0; border-radius: 10px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: background .2s; }
.cm-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); transition: transform .2s; }
.cm-toggle.on { background: var(--brand); box-shadow: none; } .cm-toggle.on::after { transform: translateX(14px); }
.ads-ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-4); }
@media (min-width: 641px) and (max-width: 1366px) { .ads-lt .ads-link { max-width: 220px; } }
@media (max-width: 640px) { .ads-tokc { grid-template-columns: 1fr; } .ads-lt .ads-link { max-width: 100%; } .ads-cm-grid { grid-template-columns: 1fr 1fr; } .ads-ua { max-width: 100%; } }
@media (max-width: 640px) {
  .ads-lt td[data-label="Report link"]::before { float: none; display: block; margin: 0 0 4px; }
  .ads-lt .ads-link { display: flex; width: 100%; }
  .ads-lt .ads-link .u { display: flex; width: 100%; justify-content: space-between; }
  .ads-lt .ads-url { flex: 1; text-align: left; }
  .ads-strip3 .stat-strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* public campaign report (client/campaign_report_public v3) */
.ads-dtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-xs); max-width: 100%; }
.ads-dtabs .date-tab { height: 36px; padding: 0 12px; border: 0; background: none; border-radius: 6px; font: 600 14px var(--font); color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, color .15s; }
.ads-dtabs .date-tab:hover { color: var(--text-2); background: var(--surface-2); }
.ads-dtabs .date-tab.active { background: var(--brand-50); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-100); }
.ads-cal-panel { display: none; padding: 16px 20px 18px; margin: 4px 0 20px; }
.ads-cal-panel.open { display: block; animation: rise .2s var(--ease) both; }
.ads-cmode.pills-nav { margin-bottom: 16px; }
.ads-cmode .cal-mode-tab.active { background: var(--surface-3); color: var(--text); }
.ads-cal-panel .cal-body { display: none; } .ads-cal-panel .cal-body.active { display: block; }
.ads-calrow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ads-calrow .field { min-width: 170px; }
.ads-calto { color: var(--text-4); font-size: 13px; font-weight: 500; padding-bottom: 10px; }
.ads-ctype { margin-bottom: 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ads-ctype .ctype-btn.active { background: var(--surface-2); color: var(--text); }
.ads-ctabs { margin: 8px 0 20px; }
.ads-ctabs .camp-tab.active { color: var(--brand-600); }
.ads-ctabs .camp-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.ads-loading { padding: 8px 0 24px; } .ads-loading p { text-align: center; margin: 16px 0 0; }
.ads-rerr { margin-top: 8px; }
.ads-rsec { margin: 28px 0 14px; } .ads-rsec:first-child { margin-top: 0; }
.ads-camphdr { display: flex; align-items: center; gap: 16px; padding: 18px 22px; flex-wrap: wrap; }
.ads-camphdr .grow { flex: 1; min-width: 0; }
.ads-campnm { font-size: 18px; line-height: 26px; font-weight: 600; } .ads-campnm a:hover { color: var(--brand-600); }
.ads-campmeta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.ads-campmeta b { color: var(--text-2); font-weight: 600; margin-left: 4px; }
.ads-campst { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ads-rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ads-rmc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); padding: 14px 16px; min-width: 0; cursor: grab; transition: box-shadow .15s, border-color .15s; }
.ads-rmc:hover { box-shadow: var(--sh-md); border-color: var(--border-2); }
.ads-rmc.dragging { opacity: .5; border-color: var(--brand); }
.ads-rmc .l { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text-3); min-width: 0; }
.ads-rmc .l > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-rmc .l .itile { width: 28px; height: 28px; border-radius: 6px; } .ads-rmc .l .itile svg.i { width: 15px; height: 15px; }
.ads-rmc .v { margin-top: 10px; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.ads-rmc .s { margin-top: 2px; font-size: 12px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ads-cities > .card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.ads-cities .grow { flex: 1; min-width: 0; } .ads-cities b { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ads-cities .grow span { font-size: 12px; color: var(--text-3); }
.ads-pct { font-weight: 600; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.ads-adthumb { position: relative; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--text-4); }
.ads-adthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ads-perf { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.ads-perf .l { font-size: 13px; color: var(--text-3); font-weight: 500; } .ads-perf .v { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); text-transform: capitalize; } .ads-perf .s { font-size: 12px; color: var(--text-4); }
.ads-rcharts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.ads-rcharts .donut-wrap { gap: 24px; }
.ads-nodata { padding: 28px 12px; text-align: center; color: var(--text-4); font-size: 14px; }
.ads-cmpcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ads-qk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ads-qk > div { padding: 14px 20px; border-top: 1px solid var(--border); } .ads-qk > div:nth-child(-n+2) { border-top: 0; } .ads-qk > div:nth-child(even) { border-left: 1px solid var(--border); }
.ads-qk .l { font-size: 13px; color: var(--text-3); } .ads-qk .v { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ads-qk.b .v { color: var(--info); }
.ads-pin { margin-top: 8px; }
.ads-pin-in { height: 56px; text-align: center; font: 600 24px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 10px; margin-bottom: 12px; }
@media (max-width: 1100px) { .ads-rgrid, .ads-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ads-rgrid, .ads-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ads-rcharts, .ads-cmpcols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ads-rh .ads-wrap { height: 60px; gap: 10px; } .ads-rh .ttl span, .ads-rh .vsep { display: none; } .ads-rh .ttl b { font-size: 13px; }
  .ads-rh .auth-brand > span { display: none; } .ads-live { height: 24px; font-size: 12px; padding: 0 8px; }
  .ads-dtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ads-rgrid { gap: 8px; } .ads-rmc { padding: 12px; } .ads-rmc .v { font-size: 18px; line-height: 26px; } .ads-rmc .l { gap: 8px; font-size: 12px; } .ads-rmc .l .itile { display: none; }
  .ads-cities { grid-template-columns: 1fr; }
  .ads-calrow .field { min-width: 0; flex: 1 1 100%; } .ads-calto { display: none; } .ads-calrow .btn { width: 100%; }
  .ads-campst { align-items: flex-start; } .ads-rcharts .donut-wrap { flex-direction: column; align-items: stretch; } .ads-rcharts .donut { align-self: center; }
  .ads-qk { grid-template-columns: 1fr 1fr; }
}

/* client ads dashboard (client/fb_ads_dashboard v3) */
.ads-who { display: inline-flex; align-items: center; gap: 10px; } .ads-who > span { display: flex; flex-direction: column; line-height: 16px; } .ads-who small { font-size: 12px; color: var(--text-3); } .ads-who b { font-size: 14px; font-weight: 600; color: var(--text); }
.ads-agg { margin-bottom: 24px; }
.ads-agg .kpi .lbl svg.i { width: 16px; height: 16px; color: var(--text-4); }
.ads-agg .kpi .val { font-size: 26px; line-height: 34px; }
.ads-accgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ads-acc { overflow: hidden; min-width: 0; }
.ads-accm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.ads-accm > div { padding: 12px 16px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); min-width: 0; }
.ads-accm > div:nth-child(4n+1) { border-left: 0; } .ads-accm > div:nth-child(-n+4) { border-top: 0; }
.ads-accm span { display: block; font-size: 12px; color: var(--text-3); } .ads-accm b { display: block; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads-acctabs { padding: 0 20px; margin: 0; }
.ads-acc .tab-pane { display: none; } .ads-acc .tab-pane.active { display: block; }
.ads-ell { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#refreshBtn.spinning svg { animation: adsspin .8s linear infinite; }
@keyframes adsspin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .ads-accgrid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .ads-back, .ads-who > span { display: none; } .ptop nav { display: none; } }
@media (max-width: 640px) { .ads-accm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ads-accm > div:nth-child(4n+1) { border-left: 1px solid var(--border); } .ads-accm > div:nth-child(odd) { border-left: 0; } .ads-accm > div:nth-child(3), .ads-accm > div:nth-child(4) { border-top: 1px solid var(--border); } .ads-ell { max-width: 100%; } .ads-acctabs { padding: 0 16px; } }
@media (max-width: 860px) { .ads-back { display: inline-flex; } .ptop .in { gap: 12px; } }
@media (max-width: 640px) { .ads-agg { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; } .ads-agg .kpi { padding: 14px; } .ads-agg .kpi .val { font-size: 20px; line-height: 28px; } .ads-back span, .ads-back { font-size: 13px; } }
@media (min-width: 641px) and (max-width: 860px) { .ads-lt .ads-link { max-width: 150px; } .ads-lt .ads-link .btn { padding: 0 8px; } .ads-lt .ads-cids .tag:nth-child(2) { display: none; } }
@media (min-width: 641px) and (max-width: 860px) { .ads-lt .ads-url { display: none; } .ads-lt .ads-link { max-width: 90px; } }
.ads-accgrid { grid-template-columns: 1fr; }