/* Declared on BOTH scopes. Custom properties inherit down the DOM tree, and the
       overlays are siblings of #tab-campaigns rather than children — so a palette
       declared only on the tab leaves every var() inside a sheet unresolved, and
       `background:var(--cp-purple)` with no --cp-purple in scope does not fall back
       to something sensible, it renders transparent. */
    #tab-campaigns, .cp-overlay{ --cp-blue:#2563eb; --cp-purple:#2563eb; --cp-green:#1e8e3e; --cp-orange:#e8710a; --cp-ink:#202124; --cp-muted:#5f6368; --cp-line:#e8eaed; --cp-card:#fff; }
    #camp-root{ padding-bottom:30px; }
    #tab-campaigns .cp-mode{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; margin-bottom:14px; flex-wrap:wrap; }
    #tab-campaigns .cp-mode.auto{ background:linear-gradient(135deg,#ede4ff,#e3f0ff); border:1px solid #d9c9fb; }
    #tab-campaigns .cp-mode.manual{ background:#f8f9fa; border:1px solid var(--cp-line); }
    #tab-campaigns .cp-mode-ic{ width:40px; height:40px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; background:#fff; box-shadow:0 1px 3px rgba(60,64,67,.16); }
    #tab-campaigns .cp-mode-ic svg{ width:22px; height:22px; fill:none; stroke-width:2; }
    #tab-campaigns .cp-mode.auto .cp-mode-ic svg{ stroke:var(--cp-purple); } #tab-campaigns .cp-mode.manual .cp-mode-ic svg{ stroke:var(--cp-muted); }
    #tab-campaigns .cp-mode-txt{ flex:1; min-width:150px; } #tab-campaigns .cp-mode-txt h4{ margin:0; font-size:14px; font-weight:800; color:var(--cp-ink); }
    #tab-campaigns .cp-mode-txt p{ margin:2px 0 0; font-size:12px; color:var(--cp-muted); line-height:1.4; }
    #tab-campaigns .cp-toggle{ display:inline-flex; background:#fff; border:1.5px solid var(--cp-line); border-radius:999px; padding:3px; flex-shrink:0; }
    #tab-campaigns .cp-toggle button{ border:none; background:none; padding:7px 14px; font-size:13px; font-weight:700; color:var(--cp-muted); cursor:pointer; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
    #tab-campaigns .cp-toggle button svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
    #tab-campaigns .cp-toggle button.on{ background:var(--cp-purple); color:#fff; }
    #tab-campaigns .cp-toggle button.on.manual{ background:var(--cp-blue); }
    #tab-campaigns .cp-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
    #tab-campaigns .cp-title{ font-size:18px; font-weight:800; color:var(--cp-ink); }
    #tab-campaigns .cp-wallet{ display:inline-flex; align-items:center; gap:5px; background:#fff; border:1.5px solid var(--cp-line); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700; color:var(--cp-ink); }
    #tab-campaigns .cp-wallet svg{ width:15px; height:15px; fill:none; stroke:var(--cp-orange); stroke-width:2; }
    /* The word, quieter than the amount: the chip has to say what the number IS, but the
       number is still the thing being read. */
    #tab-campaigns .cp-wallet .cp-wallet-lbl{ font-weight:600; color:var(--cp-muted); }
    #tab-campaigns .cp-ico-btn{ width:34px; height:34px; border:1.5px solid var(--cp-line); background:#fff; border-radius:999px; cursor:pointer; display:grid; place-items:center; }
    #tab-campaigns .cp-ico-btn svg{ width:17px; height:17px; fill:none; stroke:var(--cp-muted); stroke-width:2; }
    /* Campaign Edit sheet */
    #cp-edit .cpe-ai{ border:1px solid #ddd6fe; background:linear-gradient(180deg,#f5f3ff,#faf5ff); border-radius:12px; padding:12px; margin-bottom:14px; }
    #cp-edit .cpe-ai-h{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#6d28d9; display:flex; align-items:center; gap:7px; margin-bottom:8px; }
    #cp-edit .cpe-ai-ic{ background:#7c3aed; color:#fff; width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
    #cp-edit .cpe-ai-p{ font-size:12.5px; color:#4c1d95; margin:0 0 10px; line-height:1.5; }
    #cp-edit .cpe-ai-btns{ display:flex; gap:8px; flex-wrap:wrap; }
    #cp-edit .cpe-sect{ border:1px solid var(--cp-line); border-radius:12px; padding:12px 12px 4px; margin-bottom:14px; }
    #cp-edit .cpe-sect.appr{ background:#fffbeb; border-color:#fde68a; }
    #cp-edit .cpe-h{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
    #cp-edit .cpe-sect.appr .cpe-h{ color:#92400e; }
    #cp-edit .cpe-hint, #cp-create .cpe-hint{ font-size:12px; color:var(--ink3); margin-top:8px; line-height:1.5; }
    #cp-arm .cp-arm-p{ font-size:13px; color:var(--cp-muted); margin:6px 0 14px; line-height:1.55; }
    #cp-arm .cp-arm-rows{ background:#f8f9fa; border-radius:10px; padding:4px 12px; margin-bottom:16px; }
    #cp-arm .cp-arm-rows div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px;
                              border-bottom:1px solid var(--cp-line); }
    #cp-arm .cp-arm-rows div:last-child{ border-bottom:none; }
    #cp-arm .cp-arm-rows span{ color:var(--cp-muted); } #cp-arm .cp-arm-rows b{ color:var(--cp-ink); font-weight:700; }
    #cp-edit .cpe-caveat{ background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:9px; padding:9px 11px; font-size:12px; line-height:1.5; margin:-4px 0 12px; }
    #cp-edit .cpe-fires{ font-size:12px; color:var(--ink3); margin:-2px 0 12px; line-height:1.5; }
    #cp-edit .cpe-appr-note{ background:#fef7e0; border:1px solid #fde68a; color:#92400e; border-radius:10px; padding:11px 13px; font-size:12.5px; line-height:1.55; margin:4px 0 12px; }
    #cp-edit .cpe-win{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:11px 12px; border:1px solid var(--cp-line); border-radius:10px; cursor:pointer; }
    #cp-edit .cpe-win input{ margin:2px 0 0; width:16px; height:16px; accent-color:#2563eb; flex:none; }
    #cp-edit .cpe-win b{ display:block; font-size:13px; color:var(--cp-ink); }
    #cp-edit .cpe-win em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink3); margin-top:3px; line-height:1.45; }
    #cp-edit .cpe-win-dates{ display:flex; gap:10px; margin-top:10px; }
    #cp-edit .cpe-win-dates label{ flex:1; font-size:11.5px; color:var(--ink3); }
    #cp-edit .cpe-win-dates input{ width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--cp-line); border-radius:8px; font:inherit; font-size:13px; }
    #cp-create .cp-imgopt{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 4px; padding:11px 12px; border:1px solid var(--cp-line); border-radius:10px; cursor:pointer; }
    #cp-create .cp-imgopt input{ margin:2px 0 0; flex:none; width:16px; height:16px; accent-color:#2563eb; }
    #cp-create .cp-imgopt b{ display:block; font-size:13px; font-weight:700; color:var(--cp-ink); }
    #cp-create .cp-imgopt em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink3); margin-top:3px; line-height:1.45; }
    #cp-edit .cpe-hint.warn, #cp-create .cpe-hint.warn{ color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 10px; }
    #cp-edit .cpe-lbl{ font-weight:400; color:var(--ink3); font-size:11px; margin-left:6px; }
    #cp-edit .cpe-rupee{ display:flex; align-items:center; gap:6px; }
    #cp-edit .cpe-rupee span{ font-size:17px; font-weight:700; color:var(--ink3); }
    #cp-edit .cpe-rupee input{ flex:1; }
    /* THE GROUP PICKER — A LIST, NOT A CLOUD OF PILLS.

       Fourteen pills of different widths wrapped into nine ragged rows on a phone, and the
       ten with nobody in them took exactly as much room as the four that matter. Rows are
       all one width, so the fourteen line up and the counts form a column you can compare
       down the right instead of being a grey number glued to the end of each label.

       .zero was opacity:.55, which dims the LABEL and the count together and puts both under
       the contrast floor. Muted explicitly instead, each to its own readable grey.

       No box around the list. #1365 settled that argument on this same sheet — a card earns
       its border by sitting beside another card, and one step is on screen at a time. The
       hairlines between the rows do the whole job, and no box means no class to toggle when
       the failure branch puts a sentence here instead of a list. */
    #cp-edit .cpe-grps, #cp-create .cpe-grps{ display:block; }
    #cp-edit .cpe-grp, #cp-create .cpe-grp{ display:grid; grid-template-columns:22px 1fr auto;
      align-items:start; gap:11px; padding:11px 12px; background:#fff; cursor:pointer;
      user-select:none; border-top:1px solid var(--cp-line); }
    #cp-edit .cpe-grp .tk, #cp-create .cpe-grp .tk{ width:20px; height:20px; border:1.5px solid #cbd2dc;
      border-radius:6px; margin-top:1px; display:grid; place-items:center; color:#fff; font-size:12px;
      font-weight:800; line-height:1; }
    #cp-edit .cpe-grp .lb, #cp-create .cpe-grp .lb{ display:block; font-size:13.5px; font-weight:600;
      color:var(--cp-ink); line-height:1.35; }
    /* The one-line description every segment has carried in services/campaign-audience.js
       since it was written, which listAudiences has always sent and no screen ever showed. */
    #cp-edit .cpe-grp .ds, #cp-create .cpe-grp .ds{ display:block; font-size:11.5px; color:var(--ink3);
      line-height:1.45; margin-top:2px; }
    #cp-edit .cpe-grp .n, #cp-create .cpe-grp .n{ font-size:14px; font-weight:700; color:var(--cp-ink);
      font-variant-numeric:tabular-nums; text-align:right; min-width:22px; margin-top:1px; }
    #cp-edit .cpe-grp.on, #cp-create .cpe-grp.on{ background:#eff6ff; }
    #cp-edit .cpe-grp.on .tk, #cp-create .cpe-grp.on .tk{ background:#2563eb; border-color:#2563eb; }
    #cp-edit .cpe-grp.on .lb, #cp-create .cpe-grp.on .lb{ color:#1d4ed8; }
    #cp-edit .cpe-grp.zero .lb, #cp-create .cpe-grp.zero .lb{ color:var(--ink3); font-weight:500; }
    #cp-edit .cpe-grp.zero .n, #cp-create .cpe-grp.zero .n{ color:#b6bdc9; }
    #cp-edit .cpe-more, #cp-create .cpe-more{ display:block; width:100%; background:#fafbfc; border:none;
      border-top:1px solid var(--cp-line); font:inherit; font-size:12.5px; font-weight:600;
      color:var(--cp-muted); padding:11px; cursor:pointer; text-align:center; }
    #cp-edit .cpe-more:hover, #cp-create .cpe-more:hover{ background:#f3f5f8; color:var(--cp-ink); }
    #tab-campaigns .cp-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--cp-line); margin-bottom:16px; }
    #tab-campaigns .cp-tab{ border:none; background:none; padding:10px 14px 9px; font-size:14px; font-weight:600; color:var(--cp-muted); cursor:pointer; position:relative; }
    #tab-campaigns .cp-tab.on{ color:var(--cp-purple); } #tab-campaigns .cp-tab.on::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--cp-purple); }
    #tab-campaigns .cp-sec-d{ display:block; font-size:11.5px; font-weight:400; color:var(--cp-muted); letter-spacing:0; text-transform:none; margin-top:3px; line-height:1.45; }
    #tab-campaigns .cp-sec{ font-size:14px; font-weight:800; color:var(--cp-ink); margin:4px 0 10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    #tab-campaigns .cp-sec svg{ width:16px; height:16px; fill:none; stroke:var(--cp-purple); stroke-width:2; }
    #tab-campaigns .cp-card{ background:var(--cp-card); border:1px solid var(--cp-line); border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 1px 2px rgba(60,64,67,.08); }
    #tab-campaigns .cp-rec-ic{ width:46px; height:46px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; }
    #tab-campaigns .cp-rec-ic svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; }
    #tab-campaigns .cp-metric{ font-size:11.5px; color:var(--cp-muted); } #tab-campaigns .cp-metric b{ display:block; font-size:14px; color:var(--cp-ink); font-weight:800; }
    #tab-campaigns .cp-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
    /* The overlays live OUTSIDE #tab-campaigns in the DOM, so a #tab-campaigns-only
       selector never reaches a button inside a sheet. That is why 'Write with AI'
       rendered with a full-size SVG: the 15px rule below simply did not apply.
       Both scopes are listed rather than dropping the scope entirely, so .cp-btn
       cannot start restyling buttons elsewhere in the app. */
    #tab-campaigns .cp-btn, .cp-overlay .cp-btn{ border:none; border-radius:9px; padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
    #tab-campaigns .cp-btn.pri, .cp-overlay .cp-btn.pri{ background:var(--cp-purple); color:#fff; }
    #tab-campaigns .cp-btn.pri.manual, .cp-overlay .cp-btn.pri.manual{ background:var(--cp-blue); }
    #tab-campaigns .cp-btn.ghost, .cp-overlay .cp-btn.ghost{ background:#f1f3f4; color:var(--cp-ink); }
    #tab-campaigns .cp-btn svg, .cp-overlay .cp-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
    #tab-campaigns .cp-status{ font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; }
    #tab-campaigns .cp-status.active{ background:#e6f4ea; color:var(--cp-green); } #tab-campaigns .cp-status.sent{ background:#e8f0fe; color:var(--cp-blue); }
    #tab-campaigns .cp-status.pending{ background:#fef7e0; color:#b06000; } #tab-campaigns .cp-status.draft{ background:#f1f3f4; color:var(--cp-muted); }
    #tab-campaigns .cp-create{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; cursor:pointer; background:#faf7ff; border:1.5px dashed #d9c9fb; margin-bottom:14px; }
    #tab-campaigns .cp-create .cp-rec-ic{ background:var(--cp-purple); } #tab-campaigns .cp-create h4{ margin:0; font-size:14px; font-weight:700; color:var(--cp-ink); } #tab-campaigns .cp-create p{ margin:2px 0 0; font-size:12px; color:var(--cp-muted); }
    #tab-campaigns .cp-auto-head{ display:flex; align-items:center; gap:12px; }
    /* A campaign the OWNER wrote. Same card, same layout, different ground — so the two
       kinds are told apart before either is read, and the section heading is not the only
       thing separating them. Deliberately the family of the Create card above it (#faf7ff,
       dashed purple): that is the control these come out of, so they should look related.
       Disabled switch = a campaign that has already gone; there is nothing left to automate
       about it and a live switch would only invite a second send. */
    #tab-campaigns .cp-card.cp-mine{ background:#f7f5ff; border-color:#e2d9fb; }
    #tab-campaigns .cp-card.cp-mine .cp-st{ background:#fff; }
    #tab-campaigns .cp-card.cp-mine .cp-sw-cap{ color:#4f46e5; }
    #tab-campaigns .cp-sw input:disabled ~ .cp-sk, #tab-campaigns .cp-sw input:disabled ~ .cp-sb{ opacity:.55; }
    #tab-campaigns .cp-sw input:disabled{ cursor:default; }
    #tab-campaigns .cp-auto-main{ flex:1; min-width:0; } #tab-campaigns .cp-auto-t{ font-size:14.5px; font-weight:700; color:var(--cp-ink); } #tab-campaigns .cp-auto-d{ font-size:12px; color:var(--cp-muted); margin-top:2px; line-height:1.4; }
    #tab-campaigns .cp-sw-wrap{ display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; } #tab-campaigns .cp-sw-cap{ font-size:9px; font-weight:800; color:var(--cp-purple); text-transform:uppercase; letter-spacing:.4px; }
    #tab-campaigns .cp-sw{ position:relative; width:62px; height:26px; flex-shrink:0; cursor:pointer; display:block; } #tab-campaigns .cp-sw input{ opacity:0; width:0; height:0; position:absolute; }
    #tab-campaigns .cp-sw-txt{ position:absolute; top:0; height:26px; display:flex; align-items:center; font-size:10px; font-weight:800; pointer-events:none; } #tab-campaigns .cp-on{ left:10px; color:#fff; opacity:0; } #tab-campaigns .cp-off{ right:10px; color:#5f6368; opacity:1; } #tab-campaigns .cp-sw input:checked ~ .cp-on{ opacity:1; } #tab-campaigns .cp-sw input:checked ~ .cp-off{ opacity:0; }
    #tab-campaigns .cp-sk{ position:absolute; inset:0; background:#dadce0; border-radius:999px; transition:.2s; } #tab-campaigns .cp-sb{ position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:999px; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
    #tab-campaigns .cp-sw input:checked + .cp-sk{ background:var(--cp-green); } #tab-campaigns .cp-sw input:checked + .cp-sk + .cp-sb{ transform:translateX(36px); }
    #tab-campaigns .cp-auto-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 12px; }
    #tab-campaigns .cp-st-cap{ font-size:10.5px; font-weight:700; color:var(--cp-muted); margin:12px 0 0; }
    #tab-campaigns .cp-st{ background:#f8f9fa; border-radius:10px; padding:9px; text-align:center; } #tab-campaigns .cp-st .v{ font-size:15px; font-weight:800; color:var(--cp-ink); } #tab-campaigns .cp-st .v.roi{ color:var(--cp-green); } #tab-campaigns .cp-st .l{ font-size:10.5px; color:var(--cp-muted); }
    #tab-campaigns .cp-auto-foot{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
    #tab-campaigns .cp-auto-note{ font-size:12px; font-weight:600; white-space:nowrap; justify-self:start; } #tab-campaigns .cp-auto-note.run{ color:var(--cp-green); } #tab-campaigns .cp-auto-note.pend{ color:#b06000; }
    #tab-campaigns .cp-link{ font-size:12.5px; font-weight:700; color:var(--cp-blue); cursor:pointer; }
    #tab-campaigns .cp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
    #tab-campaigns .cp-kpi{ background:var(--cp-card); border:1px solid var(--cp-line); border-radius:12px; padding:12px; } #tab-campaigns .cp-kpi .v{ font-size:20px; font-weight:800; color:var(--cp-ink); } #tab-campaigns .cp-kpi .v.g{ color:var(--cp-green); } #tab-campaigns .cp-kpi .v.b{ color:var(--cp-blue); } #tab-campaigns .cp-kpi .l{ font-size:11.5px; color:var(--cp-muted); margin-top:2px; }
    #tab-campaigns .cp-funnel{ display:flex; flex-direction:column; gap:6px; }
    #tab-campaigns .cp-fr{ display:flex; align-items:center; gap:10px; } #tab-campaigns .cp-fr .fl{ width:78px; font-size:12px; color:var(--cp-muted); flex-shrink:0; } #tab-campaigns .cp-fb{ height:26px; border-radius:6px; background:linear-gradient(90deg,#7c3aed,#a855f7); display:flex; align-items:center; padding:0 8px; color:#fff; font-size:12px; font-weight:700; min-width:40px; }
    #tab-campaigns .cp-bars{ display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:10px; } #tab-campaigns .cp-bcol{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; justify-content:flex-end; height:100%; } #tab-campaigns .cp-bar{ width:100%; max-width:22px; border-radius:5px 5px 0 0; background:var(--cp-purple); } #tab-campaigns .cp-bx{ font-size:10px; color:var(--cp-muted); }
    #tab-campaigns .cp-insight{ display:flex; gap:10px; background:#f3e8ff; border-radius:12px; padding:12px; margin-top:12px; } #tab-campaigns .cp-insight svg{ width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--cp-purple); stroke-width:2; } #tab-campaigns .cp-insight p{ margin:0 0 8px; font-size:12.5px; color:#4a1f8a; line-height:1.5; }
    #tab-campaigns .cp-date{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--cp-ink); border:1.5px solid var(--cp-line); border-radius:999px; padding:6px 12px; cursor:pointer; margin-bottom:12px; } #tab-campaigns .cp-date svg{ width:15px; height:15px; fill:none; stroke:var(--cp-muted); stroke-width:2; }
    .cp-overlay{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45); display:none; align-items:flex-end; } .cp-overlay.show{ display:flex; }
    .cp-overlay .cp-sheet{ background:#fff; width:100%; max-width:480px; margin:0 auto; border-radius:18px 18px 0 0; padding:18px 16px 24px; max-height:88vh; overflow-y:auto; } .cp-overlay .cp-sheet.center{ border-radius:18px; margin:auto; }
    .cp-sheet h3{ font-size:16px; font-weight:800; margin:0 0 14px; color:#202124; }
    .cp-field{ margin-bottom:12px; } .cp-field label{ display:block; font-size:12.5px; font-weight:600; color:#5f6368; margin-bottom:5px; } .cp-field input,.cp-field select,.cp-field textarea{ width:100%; border:1.5px solid #dadce0; border-radius:10px; padding:11px 12px; font-size:14px; font-family:inherit; } .cp-field textarea{ min-height:64px; }
    .cp-reach{ display:flex; align-items:center; justify-content:space-between; background:#f8f9fa; border-radius:10px; padding:10px 12px; font-size:12.5px; margin-bottom:12px; } .cp-reach b{ color:#202124; }
    .cp-sheet-btn{ width:100%; border:none; border-radius:10px; color:#fff; font-size:15px; font-weight:700; padding:13px; cursor:pointer; margin-top:6px; } .cp-sheet-btn.pri{ background:#2563eb; } .cp-sheet-btn.pri.manual{ background:#2563eb; } .cp-sheet-btn.ghost{ background:#f1f3f4; color:#3c4043; }
    .cp-help-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; } .cp-help-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; } .cp-help-ic svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; } .cp-help-row .ht{ font-size:14px; font-weight:700; color:#202124; } .cp-help-row .hd{ font-size:12.5px; color:#5f6368; line-height:1.4; }
    .cp-dstat{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f1f3f4; font-size:13.5px; } .cp-dstat .dk{ color:#5f6368; } .cp-dstat .dv{ font-weight:700; color:#202124; }
    .cp-dnote{ font-size:11.5px; color:#5f6368; line-height:1.5; margin:10px 0 0; }
    /* THE MESSAGE ITSELF. The details sheet had twelve fields and none of them was the text
       being broadcast, so "review this campaign" was not actually possible before paying
       ~Rs 0.99 per person to send it. Styled as the message it is, not as another stat row. */
    .cp-dmsg{ margin:12px 0; }
    .cp-dmsg .dk{ font-size:11.5px; color:#5f6368; font-weight:600; display:block; margin-bottom:6px; }
    .cp-dmsg-body{ background:#e7f8ee; border:1px solid #cdebd9; border-radius:12px; border-top-left-radius:3px; padding:11px 13px; font-size:13.5px; color:#202124; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
    .cp-dmsg-body.none{ background:#fff8e6; border-color:#f5e2b0; color:#8a6d1f; font-style:italic; white-space:normal; }
    .cp-improve{ background:#f3e8ff; border-radius:10px; padding:11px; font-size:12.5px; color:#4a1f8a; margin:12px 0; line-height:1.5; }

    /* THE STEP ITSELF (v2 §3, reworked to the approved mockup). One step is on screen at a
       time, so the section card has nothing to be separated from — its border was drawing a
       box around the entire visible sheet. Flat, and the type carries the hierarchy. */
    #cp-edit .cpe-sect{ border:none; background:none; padding:0; margin:0 0 4px; }
    #cp-edit .cpe-sect.appr{ background:none; border:none; }
    #cp-edit .cpe-eyebrow{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
      letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin:0 0 4px; }
    #cp-edit .cpe-title{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 3px; }
    #cp-edit .cpe-sub{ font-size:12.5px; color:var(--ink3); margin:0 0 14px; line-height:1.5; }
    /* The amber block the two pills became. It is on step 2 because that is where the wording
       is chosen, and above the endings because that is where it is committed. */
    #cp-edit .cpe-warn{ display:flex; gap:9px; background:#fffbeb; border:1px solid #fde68a;
      border-radius:11px; padding:11px 12px; font-size:12.5px; color:#7a4a06; line-height:1.5;
      margin-top:13px; }
    #cp-edit .cpe-warn b{ color:#5c3703; }
    #cp-edit .cpe-warn .ic{ flex:none; font-weight:700; }

    /* THE STEPPER (built-in campaigns v2 §3). The sheet's three sections were always
       numbered; these show one at a time instead of all three at once. The rail is the only
       new ornament — it answers "how much of this is left", which a scrolling form answered
       by its own scrollbar and a stepper otherwise answers not at all. */
    #cp-edit .cpe-rail{ display:flex; gap:6px; margin:4px 0 16px; }
    #cp-edit .cpe-rail > div{ flex:1; height:4px; border-radius:99px; background:var(--border); transition:background .18s ease; }
    #cp-edit .cpe-rail > div.on{ background:var(--green); }
    @media (prefers-reduced-motion: reduce){ #cp-edit .cpe-rail > div{ transition:none; } }
    /* THE FOOTER — ONE SHAPE ON ALL THREE STEPS.

       It used to be three. Steps 1-2 put Back beside Next at 50/50; step 3 swapped Next for
       two full-width endings, shrank Back to a 120px stub hanging on the left, and left
       Cancel below as a third full-width block in the SAME grey as Back — though one
       abandons the sheet and the other steps backwards. Three rows at three widths, on a
       phone, with 6px gaps between the groups and 8px inside them.

       The root cause is that step 3 has TWO primaries, so the 50/50 pattern has nowhere to
       go. The rule that holds on all three: WHAT COMMITS is full-width and filled; WHAT
       NAVIGATES is a quiet text row. So every filled button is the same width wherever you
       are, the primary never moves, and Back stops shouting as loudly as the button that
       starts spending money. */
    #cp-edit .cpe-foot{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
    #cp-edit .cpe-foot .cp-sheet-btn{ margin:0; }
    #cp-edit .cpe-ends{ display:flex; flex-direction:column; gap:8px; }
    /* Back is in this row on EVERY step including the last — that is the step it would be
       worst to strand someone on, because the next thing pressed is irreversible at Meta. */
    #cp-edit .cpe-nav{ display:flex; align-items:center; justify-content:space-between; }
    /* Step 1 has nothing behind it, so Back is REMOVED rather than greyed and Cancel takes
       the row alone. A disabled control is something you can see but cannot use. */
    #cp-edit .cpe-nav.one{ justify-content:center; }
    #cp-edit .cpe-quiet{ background:none; border:none; font:inherit; font-size:14px;
      font-weight:600; color:var(--ink3); padding:12px 8px; cursor:pointer; border-radius:8px; }
    #cp-edit .cpe-quiet.back{ color:var(--cp-blue); }
    #cp-edit .cpe-quiet:hover{ background:#f6f7f9; }
    #cp-edit .cpe-quiet:focus-visible{ outline:2px solid var(--cp-blue); outline-offset:2px; }