/* ============================================================================
   LITE-TOOLS — Social Mapia "Brutal Lite" styles for batch 5 (creator & business
   tools, settings, help, plus every other user-facing page not owned elsewhere).
   Loads AFTER assets/css/lite.css (shared tokens/components owned by batch 1).
   Do not redefine lite.css tokens here — reuse var(--ink) etc.

   Two kinds of content below:
   1) Page-specific classes that match the design file pixel-for-pixel
      (my-pins, analytics, edit-profile, settings, manage-business, for-business,
      help) — these class names mirror SocialMapia-BrutalLite-with-Moments.html.
   2) A legacy-compat layer: pages not in the design file (dashboard, radar,
      guide, support, report, business-add, delete-account, 404, privacy, terms,
      unsubscribe, clear) kept their old app.css/brutal.css class names
      (.page__title, .fcard, .btn--blue, .mbar, .empty, .hiw-*, …) — restyled
      here to the lite look instead of rewriting every template.
   ============================================================================ */

/* FIX: lite.css's `body.lite a{color:inherit}` (specificity 0,1,1) beats the
   button color classes (.btn-blue/.btn-ink/.btn-brand etc, specificity 0,1,0)
   whenever one of them sits on an <a> tag — the link renders same-colour text
   on its own background (invisible). Re-assert the colours here at higher
   specificity. Reported to batch 1 (lite.css owner) to fix at the source;
   kept here too so every page in this batch renders correctly regardless. */
body.lite a.btn-blue,body.lite a.btn-ink,body.lite a.btn-brand{color:#fff;}
body.lite a.btn-brand{color:var(--ink);}
body.lite a.btn-line,body.lite a.btn-ghost{color:var(--ink);}

/* legacy token aliases: old app.css/brutal.css pages reference these var names */
body.lite{
  --gold:var(--yellow); --success:var(--teal); --danger:var(--red);
  --surface-2:var(--card-2); --border:var(--line); --text:var(--ink);
  --font-mono:var(--font-ui); --lime-deep:#5c7a00;
}

/* ---------------------------------------------------------------------------
   1) PAGE SHELL HELPERS (shared across this batch's "exact match" pages)
   --------------------------------------------------------------------------- */
.top-bar{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;}
.back-row{display:flex;align-items:center;gap:6px;font:700 15px/1 var(--font-ui);color:var(--ink);cursor:pointer;}
.back-row i{font-size:17px;}
/* .add-btn moved to assets/css/page-my-pins.css — only my-pins.php uses it,
   despite living in this "shared helpers" section. */
.view-page-link{display:flex;align-items:center;gap:6px;font:700 13.5px/1 var(--font-ui);color:var(--blue);cursor:pointer;}

/* generic "kicker row list" (used by Settings, Help, Manage business) */
.list .row .row-label{font-weight:700;color:var(--ink);}
.list .row .val{margin-left:auto;}
.list .row .chev{margin-left:6px;}
.list .row.centered{justify-content:center;}

/* ---------------------------------------------------------------------------
   MY PINS: rebuilt against the strict rules — moved to
   assets/css/page-my-pins.css (builder B2, see PAGE-BUILDER.md report).
   .empty-lite stays here — analytics.php/my-restaurants.php/radar.php also
   use it. .more-btn stays here too — block-confirm.php/profile.php use it
   (my-pins.php's own three-dot menu uses .pin-menu > summary instead).
   --------------------------------------------------------------------------- */
.empty-lite{text-align:center;padding:36px 20px;color:var(--muted);}
.empty-lite i{font-size:30px;display:block;margin-bottom:10px;color:var(--muted-2);}
.empty-lite .btn{margin-top:14px;}

/* ---------------------------------------------------------------------------
   ANALYTICS — moved to assets/css/page-analytics.css (builder B2): every
   analytics class (.range-seg, .an-topbar/.an-back, .kpi-*, .rank-*,
   .report-card, .sticker.small, …) is exclusive to analytics.php, confirmed
   via repo-wide grep. .stats-grid/.stat-card/.chart-card/.chart-bars below
   are LEFT HERE on purpose — dead CSS from an earlier draft of this page
   (analytics.php's current markup doesn't use them), and .stat-card's base
   name is also referenced by admin/index.php, so moving them isn't a clean
   exclusive-ownership cut; out of scope for this pass.
   --------------------------------------------------------------------------- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.stat-card{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:14px;}
.stat-card .sc-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:8px;}
.stat-card .sc-val{font:800 20px/1 var(--font-display);color:var(--ink);}
.stat-card .sc-label{font-size:12px;color:var(--muted);margin-top:3px;}
.stat-card .sc-chg{font:700 11px/1 var(--font-ui);margin-top:6px;display:inline-flex;align-items:center;gap:3px;}
.stat-card .sc-chg.up{color:var(--teal);} .stat-card .sc-chg.down{color:var(--red);} .stat-card .sc-chg.flat{color:var(--muted-2);}
.chart-card{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:16px;margin-bottom:18px;}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:100px;margin-top:10px;}
.chart-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.chart-bars .bar{width:100%;max-width:18px;background:var(--card-2);border-radius:4px 4px 0 0;}
.chart-bars .col--now .bar{background:var(--blue);}
.chart-bars .bx{font-size:9.5px;color:var(--muted-2);font-weight:700;}

/* EDIT PROFILE: rebuilt against the strict rules — moved to
   assets/css/page-edit-profile.css (builder B2, see PAGE-BUILDER.md
   report). .edit-topbar's own base rule (shared with
   partials/pin_form_edit.php), .group-label (shared with creators.php/
   notifications.php/pin_form_edit.php) and .change-link's base rule
   (shared with pick.php) stay here; page-edit-profile.css only adds a
   couple of settings-only tweaks on top where noted. */
.edit-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.edit-topbar .link{background:none;border:0;font-family:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;padding:0;text-decoration:none;}
.edit-topbar .title{font:800 16px/1 var(--font-display);color:var(--ink);}
.group-label{font:800 11.5px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 2px 8px;}
.color-row .cr-label{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);}
.color-dots{display:flex;gap:9px;}
.color-dot{width:22px;height:22px;border-radius:50%;position:relative;flex:0 0 auto;border:0;cursor:pointer;padding:0;}
.color-dot.selected::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--ink);}

/* SETTINGS: rebuilt against the strict rules — moved to
   assets/css/page-settings.css (builder B2, see PAGE-BUILDER.md report).
   Deleted here on purpose; do not re-add. */

/* ---------------------------------------------------------------------------
   MANAGE BUSINESS — the classes my-restaurants.php actually uses moved to
   assets/css/page-manage-business.css (builder B2; .biz-logo also fixed
   there from an orange/brown gradient to the calm grey-tile+ink look).
   .clip-featured/.invite-row/.invite-avatar/.invite-info/.invite-handle/
   .invite-time/.team-row/.team-avatars/.add-manager are LEFT HERE on
   purpose — dead CSS for the reference's "Pending invites"/"Team" sections;
   my-restaurants.php's real markup never uses them (it has its own working
   "Invite a creator" dialog instead). Not deleted, just flagged, since
   removing dead CSS wasn't asked for this round.
   --------------------------------------------------------------------------- */
.clip-featured{position:absolute;top:5px;right:5px;color:var(--yellow);font-size:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
.invite-row{display:flex;align-items:center;gap:10px;padding:9px 0;}
.invite-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--card-2);flex:0 0 auto;}
.invite-info{flex:1;min-width:0;}
.invite-handle{font:700 13.5px/1.2 var(--font-ui);color:var(--ink);}
.invite-time{font-size:11.5px;color:var(--muted);margin-top:1px;}
.team-row{display:flex;align-items:center;gap:10px;}
.team-avatars{display:flex;}
.team-avatars img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px;background:var(--card-2);}
.team-avatars img:first-child{margin-left:0;}
.add-manager{flex:1;font:700 13.5px/1 var(--font-ui);color:var(--ink);}

/* ---------------------------------------------------------------------------
   FOR BUSINESS (sales page) + GUIDE (reused .hiw-* / .feat pattern)
   --------------------------------------------------------------------------- */
/* Theme audit fix (guide.php): same leak as .hiw-step below — brutal.css's .hiw-hero
   (lime fill + thick border + heavy shadow) and .hiw-final (blue fill) were never
   actually cleared, only re-laid-out, so the old hero/CTA band still showed through
   on an otherwise calm page. Flatten explicitly — ONE signature yellow CTA button
   (guide.php's .btn-brand) carries the page's visual weight instead. */
.hiw-hero{text-align:center;padding:22px 16px 6px;background:none;border:0;box-shadow:none;border-radius:0;}
.hiw-hero h1{font:800 24px/1.2 var(--font-display);margin:0 0 8px;}
.hiw-hero p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 16px;}
/* Theme audit fix: same leak as .hiw-hero/.hiw-final above — brutal.css's .feat
   (hard shadow) and .feat .fi (bordered + hard-shadow icon tile) were never
   actually cleared, only re-bordered, so every "good stuff" / "become a
   creator" row and its icon still looked old. Flatten explicitly. */
.feat{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:var(--r-card);border:1px solid var(--line);box-shadow:none;padding:14px;}
.feat .fi{width:36px;height:36px;border-radius:10px;background:var(--card-2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto;border:0;box-shadow:none;}
.feat b{font:800 14px/1.3 var(--font-display);color:var(--ink);display:block;margin-bottom:3px;}
.feat p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45;}
.hiw-two{display:grid;gap:10px;}
/* Theme audit fix: brutal.css's own .hiw-step/.hiw-num (card background + thick border +
   hard shadow, border-width 2px) were still showing through here — this file only ever
   overrode the layout (flex/gap/margin), never the visual treatment, so the old card
   look leaked onto an otherwise calm Brutal Lite page. Flatten explicitly. */
.hiw-step{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;background:none;border:0;box-shadow:none;border-radius:0;padding:0;}
.hiw-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 14px/1 var(--font-display);color:var(--ink);flex:0 0 auto;border:0;box-shadow:none;}
.hiw-step h3{font:700 15px/1.3 var(--font-display);margin:0 0 3px;display:flex;align-items:center;gap:6px;}
.hiw-step p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45;}
.hiw-final{text-align:center;margin-top:30px;padding:20px 0;background:none;border:0;box-shadow:none;border-radius:0;color:var(--ink);}
.hiw-final h2{font:800 20px/1.2 var(--font-display);margin:0 0 14px;color:var(--ink);}

/* ---------------------------------------------------------------------------
   FOR BUSINESS v2 (design: photo-collage hero band + why-rows + steps + FAQ)
   --------------------------------------------------------------------------- */
.fb-hero{background:var(--yellow);padding:28px 16px 26px;position:relative;overflow:hidden;border-bottom:var(--bd)}
.fb-photos{position:relative;height:130px;margin-bottom:16px}
.fb-photos img{position:absolute;width:88px;height:114px;object-fit:cover;border-radius:14px;border:var(--bd);background:var(--card-2)}
.fb-photos .p1{top:0;left:2px;transform:rotate(-8deg)}
.fb-photos .p2{top:2px;right:2px;transform:rotate(7deg)}
.fb-photos .p3{top:22px;left:50%;margin-left:-37px;width:74px;height:96px;transform:rotate(-3deg);z-index:2}
.fb-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:var(--bd);border-radius:999px;padding:6px 13px;font:800 12px/1 var(--font-ui);color:var(--ink);margin-bottom:12px}
.fb-hero-title{font:800 24px/1.2 var(--font-display);letter-spacing:-.3px;color:var(--ink);margin:0 0 8px}
.fb-hero-sub{font-size:13px;color:var(--ink-soft);font-weight:700;margin:0 0 18px}
.fb-why-row{display:flex;align-items:flex-start;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.fb-why-row:last-child{border-bottom:none}
.fb-why-icon{width:42px;height:42px;border-radius:12px;background:var(--card-2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.fb-why-title{font:700 14.5px/1.2 var(--font-ui);color:var(--ink);margin-bottom:2px}
.fb-why-desc{font-size:12.5px;color:var(--muted);line-height:1.4}
.fb-steps{display:flex;flex-direction:column;gap:13px}
.fb-step{display:flex;align-items:center;gap:13px}
.fb-step-num{width:30px;height:30px;border-radius:9px;background:var(--card-2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 auto}
.fb-step-text{font-size:14px;font-weight:600;color:var(--ink)}
.fb-cta-band{background:var(--ink);border-radius:var(--r-card);padding:26px 20px;text-align:center}
.fb-cta-title{font:800 18px/1.2 var(--font-display);color:#fff;margin:0 0 8px}
.fb-cta-sub{font-size:12.5px;color:#c8c3b4;margin:0 0 18px}

/* ---------------------------------------------------------------------------
   HELP
   --------------------------------------------------------------------------- */
/* .topic-grid/.topic-tile/.topic-icon/.topic-text/.contact-title/.contact-sub/
   .contact-btns/.reply-note: rebuilt against the strict rules — moved to
   assets/css/page-help.css (builder B2, see PAGE-BUILDER.md report).
   .faq-row/.faq-q/.faq-a stay here — for-business.php also uses them
   (found a bug: an earlier pass here deleted the actual rules by mistake,
   leaving only this comment — restored below). */
.faq-row{padding:13px 14px;border-bottom:1px solid var(--line);}
.faq-row:last-child{border-bottom:0;}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 13.5px/1.3 var(--font-ui);color:var(--ink);cursor:pointer;}
.faq-q i{color:var(--muted-2);font-size:15px;flex:0 0 auto;}
.faq-a{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.5;}

/* existing help.php checklist + guide markup, lite-skinned */
.help-mine{background:#fff;border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh);padding:16px;margin-bottom:18px;}
.help-mine--done{background:var(--yellow-soft);}
.help-mine__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.help-mine__k{display:block;font:800 10.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;}
.help-mine__head b{font:800 15px/1.2 var(--font-display);color:var(--ink);}
.help-count{font:800 18px/1 var(--font-display);color:var(--ink);text-align:right;}
.help-count small{display:block;font:600 10px/1 var(--font-ui);color:var(--muted);text-transform:none;}
.help-count--sm{font-size:13px;width:36px;height:36px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;justify-content:center;flex-direction:row;gap:1px;}
.help-count--sm.is-done{background:var(--teal);color:#fff;}
.help-bar{height:7px;border-radius:999px;background:var(--card-2);overflow:hidden;margin-bottom:10px;}
.help-bar i{display:block;height:100%;background:var(--blue);border-radius:999px;}
.help-mine__headline{font:700 13px/1.4 var(--font-ui);color:var(--ink-soft);margin:0 0 10px;}
.help-mine__list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px;}
.help-mine__list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink);}
.help-mine__list li.is-ok{color:var(--muted);} .help-mine__list li.is-ok i{color:var(--teal);}
.help-mine__list li.is-todo i{color:var(--muted-2);}
.help-mine__fix{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.help-mine__yay{font:700 13px/1.4 var(--font-ui);color:var(--ink);margin:0;}
.help-cards{display:flex;flex-direction:column;gap:10px;margin:14px 0;}
.help-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;text-decoration:none;color:inherit;}
.help-card__ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;flex:0 0 auto;}
.help-card__t{flex:1;min-width:0;font:700 14px/1.3 var(--font-display);color:var(--ink);}
.help-card__s{font-size:11.5px;color:var(--muted);flex:0 0 auto;}
.help-card__go{color:var(--muted-2);}
.help-support{background:var(--card-2);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink-soft);margin-top:16px;}
.help-support a{color:var(--blue);font-weight:700;}
.help-back{display:inline-flex;align-items:center;gap:6px;font:700 13.5px/1 var(--font-ui);color:var(--ink);text-decoration:none;}
.help-h-ic{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-size:15px;margin-right:4px;vertical-align:middle;}
.help-lead{font-size:13.5px;color:var(--muted);line-height:1.5;}
.help-steps{list-style:none;margin:18px 0;padding:0;counter-reset:none;display:flex;flex-direction:column;gap:14px;}
.help-step{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;}
.help-step__h{display:flex;align-items:center;gap:8px;font:800 14px/1.3 var(--font-display);color:var(--ink);margin-bottom:8px;}
.help-step__n{width:22px;height:22px;border-radius:50%;background:var(--card-2);font:800 12px/1 var(--font-ui);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.help-step ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;}
.help-step li{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.help-dont{background:#fff0ee;border:1.5px solid var(--red);border-radius:var(--r-card);padding:14px;margin-top:4px;}
.help-dont b{color:#9a1f17;display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:6px;}
.help-dont ul{margin:0;padding-left:18px;}
.help-dont li{font-size:12.5px;color:#9a1f17;line-height:1.5;}
.help-list{display:flex;flex-direction:column;gap:8px;}
.help-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-decoration:none;color:inherit;}
.help-row__t{flex:1;min-width:0;}
.help-row__t b{display:block;font-size:13.5px;color:var(--ink);}
.help-row__t small{font-size:11.5px;color:var(--muted);}

/* ============================================================================
   2) LEGACY-COMPAT — restyle old app.css/brutal.css class names with lite
   tokens, so pages not in the design file (dashboard, radar, guide, support,
   report, business-add, delete-account, 404, privacy, terms, unsubscribe,
   clear) get the same look without a full markup rewrite.
   ============================================================================ */
body.lite .page{max-width:480px;margin:0 auto;padding:calc(18px + var(--sat,0px)) 16px calc(110px + var(--sab,0px));}
body.lite .container{max-width:100% !important;}
body.lite .page__title{font:800 24px/1.2 var(--font-display);color:var(--ink);margin:0 0 10px;}
body.lite .mbar{display:flex;align-items:center;gap:10px;padding:2px 0 16px;}
body.lite .mbar__t{font:800 20px/1.1 var(--font-display);color:var(--ink);}
body.lite .mbar__sp{flex:1;}
body.lite .pad{padding:0;}
body.lite .muted{color:var(--muted);}
/* FIX: brutal.css's own un-scoped ".section-label" (comment: "section label =
   lime pill") ships a lime chip look — background:var(--lime), a 2px ink
   border, border-radius:var(--r-pill) and box-shadow:var(--sh-sm) — built for
   the old dark theme. This override only reset display/font/color/margin,
   so every Brutal Lite page's plain uppercase section label (Analytics'
   "Top pins", etc.) was rendering as an unwanted lime pill AND a second
   hard-shadow element on screen. Reset all five here too. */
body.lite .section-label{display:flex;align-items:center;gap:6px;font:800 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;background:none;border:0;padding:0;border-radius:0;box-shadow:none;}
body.lite .fcard,body.lite .card{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:16px;margin-bottom:14px;box-shadow:none;}
body.lite .stack{display:flex;flex-direction:column;}
body.lite .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
body.lite .field{margin-bottom:14px;}
body.lite .field .label,body.lite .label{display:block;font:700 12.5px/1 var(--font-ui);color:var(--muted);margin:0 0 7px 2px;text-transform:none;letter-spacing:0;}
body.lite .input,body.lite .textarea,body.lite .select{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;
  border-radius:var(--r-ctl);background:#fff;border:1.5px solid var(--line);font:500 15px/1.4 var(--font-ui);color:var(--ink);width:100%;font-family:inherit;}
body.lite .input:focus,body.lite .textarea:focus,body.lite .select:focus{border:var(--bd);box-shadow:var(--sh-sm);outline:none;}
body.lite .field-hint{font-size:12.5px;color:var(--muted);margin-top:6px;}
body.lite .field-error{display:flex;align-items:center;gap:8px;background:#fff0ee;border:1.5px solid var(--red);color:#9a1f17;
  border-radius:var(--r-ctl);padding:11px 13px;font-size:13.5px;font-weight:600;margin-bottom:12px;}
body.lite .check-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;font-size:13.5px;color:var(--ink);cursor:pointer;}
body.lite .check-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue);flex:0 0 auto;}
body.lite .empty{text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--r-card);padding:24px 16px;}
body.lite .empty i{font-size:26px;display:block;margin-bottom:8px;color:var(--muted-2);}
body.lite .empty .btn{margin-top:12px;}
body.lite .status{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--font-ui);padding:3px 8px;border-radius:999px;vertical-align:middle;}
body.lite .status--active{background:var(--lime);color:var(--ink);}
body.lite .status--inactive{background:var(--card-2);color:var(--muted);}
body.lite .status--draft{background:var(--yellow-soft);color:var(--ink);}

/* buttons: map old double-dash modifiers onto lite tokens */
body.lite .btn--blue,body.lite .btn.btn--blue{background:var(--blue);color:#fff;border:var(--bd);box-shadow:var(--sh);border-radius:var(--r-ctl);
  height:52px;padding:0 20px;font:800 15.5px/1 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;}
body.lite .btn--ghost{background:var(--card-2);color:var(--ink);border:0;border-radius:var(--r-ctl);height:52px;padding:0 20px;
  font:800 15.5px/1 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;}
body.lite .btn--danger{background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:var(--r-ctl);height:52px;padding:0 20px;
  font:800 15.5px/1 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;}
body.lite .btn:not(.btn--blue):not(.btn--ghost):not(.btn--danger):not([class*="btn-"]){background:var(--ink);color:#fff;border:var(--bd);box-shadow:var(--sh-sm);
  border-radius:var(--r-ctl);height:52px;padding:0 20px;font:800 15.5px/1 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;}
body.lite .btn--sm{height:38px !important;padding:0 14px !important;font-size:13.5px !important;border-radius:10px !important;}
body.lite .btn--lg{height:56px !important;font-size:16px !important;}
body.lite .btn--block{width:100%;}
body.lite .btn:disabled{opacity:.5;cursor:not-allowed;}

/* rows / cards used on My Business, radar, etc. */
body.lite .mcard{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:14px;margin-bottom:12px;}
body.lite .mcard__top{display:flex;gap:12px;align-items:flex-start;}
body.lite .mcard__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
body.lite .row__thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--card-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:18px;}
body.lite .row__body{flex:1;min-width:0;}
body.lite .row__title{font:800 15px/1.3 var(--font-display);color:var(--ink);}
body.lite .row__sub{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:4px;}
body.lite .myrest{display:flex;gap:12px;align-items:center;}
body.lite .myrest__logo{width:44px;height:44px;border-radius:12px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto;}
body.lite .myrest__body{flex:1;min-width:0;}
body.lite .myrest__name{font:700 14.5px/1.3 var(--font-display);color:var(--ink);}
body.lite .myrest__acts{display:flex;gap:8px;flex-wrap:wrap;}

/* How-it-works pattern (for-business, guide) */
body.lite .hiw-step{margin-bottom:16px;}

/* radar page */
body.lite .radar-intro__lead{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 12px;}
body.lite .radar-stats{display:flex;gap:10px;flex-wrap:wrap;}
body.lite .radar-stat{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--ink);}
body.lite .radar-stat--pink{color:var(--pink);border-color:var(--pink);}
body.lite .radar-stat--lime{color:#5c7a00;background:var(--yellow-soft);border-color:transparent;}
body.lite .railrow{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;}
body.lite .rperson{flex:0 0 auto;width:84px;text-align:center;}
/* v268: brutal.css's .rperson/.radar-stat/.rperson__av border + hard shadow leaked through (same bug class as .hiw-step) — calm, like the v3.1 people row */
body.lite .radar-stat,body.lite .rperson,body.lite .rperson__av{box-shadow:none;}
body.lite .rperson{border:0;background:none;padding:0;}
body.lite .rperson__av{border:1px solid var(--line);}
body.lite .rperson .btn{box-shadow:none;}
body.lite .rperson{width:96px;}
body.lite .rperson .radar-on{box-shadow:none;border:1px solid var(--line);border-radius:999px;background:#fff;padding:4px 8px;gap:4px;font-family:inherit;font-size:11px;text-decoration:none;white-space:nowrap;max-width:100%;}
body.lite .radar-stats + * .filterbar .pill,body.lite .filterbar .pill[data-owner-filter]{box-shadow:none;border:1px solid var(--line);}
body.lite .filterbar .pill[data-owner-filter].is-active{border-color:var(--ink);}
body.lite .rperson__link{text-decoration:none;color:inherit;display:block;}
body.lite .rperson__av{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--card-2);margin:0 auto 6px;display:block;}
body.lite .rperson__av--ph,body.lite .rperson__av--add{width:56px;height:56px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;color:var(--muted-2);font-size:18px;}
body.lite .rperson__handle{display:block;font:700 11.5px/1.2 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.lite .rperson__meta{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;}
body.lite .rperson__btn{margin-top:6px;font-size:10.5px;font-weight:700;color:var(--blue);background:none;border:0;cursor:pointer;padding:0;}
body.lite .filterbar{display:flex;gap:8px;overflow-x:auto;padding:4px 0;}
body.lite .pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font:700 12.5px/1 var(--font-ui);color:var(--ink);white-space:nowrap;cursor:pointer;text-decoration:none;}
body.lite .pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
body.lite .map-wrap{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:none;}
body.lite .row{display:flex;align-items:center;}

/* support / report forms */
body.lite .sup-cats{display:flex;flex-direction:column;gap:8px;}
body.lite .sup-cat{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-ctl);border:1.5px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;}
body.lite .sup-cat input{accent-color:var(--blue);}
body.lite .sup-cat:has(input:checked){border:var(--bd);background:var(--yellow-soft);}
body.lite .sup-list{display:flex;flex-direction:column;gap:8px;}
body.lite .sup-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;}
body.lite .sup-item summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;}
body.lite .sup-st{font:800 10.5px/1 var(--font-ui);padding:3px 8px;border-radius:999px;background:var(--card-2);color:var(--muted);}
body.lite .sup-st--answered{background:var(--teal);color:#fff;}
body.lite .sup-msg{font-size:13px;color:var(--ink-soft);margin:10px 0 0;line-height:1.5;}
body.lite .sup-reply{background:var(--card-2);border-radius:10px;padding:10px 12px;margin-top:10px;}
body.lite .sup-reply p{margin:4px 0 0;font-size:13px;color:var(--ink);}

/* settings crop/avatar modal (settings.php media section when not folded into the new list view) */
body.lite .settings-avatar{width:92px;height:92px;border-radius:50%;background:var(--card-2);display:flex;align-items:center;justify-content:center;
  position:relative;margin:0 auto;overflow:hidden;cursor:pointer;}
body.lite .settings-avatar img{width:100%;height:100%;object-fit:cover;}
body.lite .settings-avatar .cam{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff;box-shadow:none;}
body.lite .modal-backdrop{position:fixed;inset:0;background:rgba(20,21,24,.5);display:none;align-items:center;justify-content:center;z-index:900;padding:16px;}
body.lite .modal-backdrop.is-open{display:flex;}
body.lite .modal{background:#fff;border-radius:var(--r-card);border:var(--bd);box-shadow:var(--sh-lg);padding:18px;max-width:420px;width:100%;max-height:85vh;overflow-y:auto;}
body.lite .modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
body.lite .avpick__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
body.lite .avpick__it{padding:0;border:0;background:none;cursor:pointer;border-radius:50%;}
body.lite .avpick__it img{width:100%;aspect-ratio:1;border-radius:50%;border:2.5px solid var(--ink);display:block;}
body.lite .avpick__it.is-on img{outline:3px solid var(--blue);outline-offset:2px;}
body.lite .avpick__or{display:flex;align-items:center;gap:10px;margin:16px 0 10px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
body.lite .avpick__or::before,body.lite .avpick__or::after{content:"";flex:1;height:2px;background:var(--card-2);}
/* .social-edit/.input-group/.social-hl*: moved to
   assets/css/page-edit-profile.css (builder B2) — only settings.php uses
   them. (Found while moving: .social-edit__icon here never matched
   anything — the real markup uses a bare .li-ico, which only had a rule
   scoped under .link-item — fixed in the new file.) */
body.lite .handle-status{font-size:12px;font-weight:700;margin-top:5px;}
body.lite .handle-status.is-good{color:var(--teal);} body.lite .handle-status.is-bad{color:var(--red);} body.lite .handle-status.is-checking{color:var(--muted);}

/* bizpage / formpage shells (my-restaurants.php legacy wrappers, kept where not fully rewritten) */
body.lite .bizpage,body.lite .formpage,body.lite .radarpage,body.lite .anapage,body.lite .mypinspage{display:block;}
body.lite .biz-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:4px;}
body.lite .biz-stats2{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
body.lite .biz-stats2__row{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);}
body.lite .linkbtn,body.lite .biz-stats2__toggle{background:none;border:0;color:var(--blue);font:700 11.5px/1 var(--font-ui);cursor:pointer;padding:6px 0 0;}
body.lite .pa-pro{background:var(--yellow);border:var(--bd);border-radius:6px;padding:1px 5px;font:800 9.5px/1 var(--font-ui);margin-left:4px;}
body.lite .bizmanage{background:var(--card-2);border-radius:12px;padding:12px;margin-top:10px;}
body.lite .bizmanage summary{cursor:pointer;font:700 13px/1 var(--font-ui);color:var(--ink);}
body.lite .mypin-del{color:var(--red);}
body.lite .mypin-toggle.is-active{background:var(--lime);}
body.lite dialog.offer-dialog{border:var(--bd);border-radius:var(--r-card);box-shadow:var(--sh-lg);padding:18px;max-width:420px;width:92vw;}
body.lite dialog.offer-dialog::backdrop{background:rgba(20,21,24,.5);}
body.lite .offer-dialog__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
body.lite .offer-dialog__acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
body.lite .offer-dialog__x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;}
body.lite .catpills{display:flex;gap:8px;flex-wrap:wrap;}
body.lite .catpills .pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
body.lite .settings-cover{display:block;height:120px;border-radius:var(--r-card);background:var(--card-2) center/cover no-repeat;position:relative;cursor:pointer;margin-bottom:14px;border:0;box-shadow:none;}
body.lite .settings-cover__btn{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font:700 12px/1 var(--font-ui);display:flex;align-items:center;gap:6px;box-shadow:none;}
body.lite .settings-avatar--sq{border-radius:14px;}
/* FIX: brutal.css's base .pe-logo-ph (old dark theme) ships an orange/brown
   gradient background plus border:var(--bd)/box-shadow:var(--sh) (a hard
   shadow) — this override only reset layout/color/font, so the no-logo
   placeholder on place-edit.php was rendering with that gradient AND a
   second hard-shadow element on screen. Reset background/color/border/
   box-shadow too, to the same calm grey-tile+ink look used everywhere
   else (the page's "Save changes" button is this screen's one hard shadow). */
body.lite .pe-logo-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:var(--card-2);font:800 20px/1 var(--font-display);border:0;box-shadow:none;}
body.lite .hours__row{display:flex;align-items:center;gap:8px;padding:8px 0;flex-wrap:wrap;}
body.lite .hours__day{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink);min-width:80px;}
body.lite .hours__t{width:90px !important;min-height:40px !important;padding:8px !important;}
body.lite .hours__to{font-size:12px;color:var(--muted);}
body.lite .hours__row.is-closed .hours__t{display:none;}
body.lite .hours__row.is-closed .hours__closed{display:inline;color:var(--muted-2);font-size:12px;}
body.lite .hours__closed{display:none;}

/* privacy / terms / legal reading pages */
body.lite .legal h2,body.lite .prose h2,body.lite .prose h3{font:800 17px/1.3 var(--font-display);color:var(--ink);margin:22px 0 8px;}
body.lite .legal p,body.lite .legal li,body.lite .prose p,body.lite .prose li{font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
body.lite .legal ul,body.lite .prose ul{padding-left:18px;}
body.lite .prose{margin-top:14px;}

/* old analytics/report chart classes (report.php — public brand report) */
body.lite .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
body.lite .stat{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:14px;text-align:center;}
body.lite .stat__icon{width:30px;height:30px;border-radius:9px;background:var(--card-2);display:flex;align-items:center;justify-content:center;font-size:15px;margin:0 auto 8px;}
body.lite .stat__val{font:800 20px/1 var(--font-display);color:var(--ink);}
body.lite .stat__label{font-size:12px;color:var(--muted);margin-top:3px;}
body.lite .chartcard{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:16px;}
body.lite .bars{display:flex;align-items:flex-end;gap:3px;height:90px;margin-top:10px;}
body.lite .bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;}
body.lite .bars .bar{width:100%;max-width:14px;background:var(--card-2);border-radius:3px 3px 0 0;}
body.lite .bars .col--now .bar{background:var(--blue);}
body.lite .bars .bx{font-size:9px;color:var(--muted-2);font-weight:700;}
body.lite .rank-row{display:flex;align-items:center;gap:10px;padding:10px;background:#fff;border-radius:var(--r-card);border:1px solid var(--line);margin-bottom:8px;}
body.lite .rank-row .rank{width:20px;text-align:center;font:800 13px/1 var(--font-display);color:var(--muted-2);flex:0 0 auto;}
body.lite .pin-metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
body.lite .pin-metrics span{font:700 11px/1 var(--font-ui);color:var(--muted);display:inline-flex;align-items:center;gap:3px;}
body.lite .pin-metrics--head{display:none;}
body.lite .pm-lbl{display:none;}
body.lite .avatar{border-radius:50%;object-fit:cover;background:var(--card-2);}
body.lite .avatar--xl{width:64px;height:64px;}
body.lite .report-foot{text-align:center;font-size:11.5px;color:var(--muted-2);margin-top:16px;}

/* business-add.php place search */
body.lite .input-icon{position:relative;}
body.lite .input-icon i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;}
body.lite .input-icon .input{padding-left:38px;}
body.lite .sm-place-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--soft);max-height:300px;overflow-y:auto;z-index:50;}
body.lite .sm-place-results__head{padding:10px 14px 4px;font:800 10.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
body.lite .sm-place-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;background:none;border:0;cursor:pointer;text-align:left;}
body.lite .sm-place-row:hover{background:var(--card-2);}
body.lite .sm-place-row__thumb{width:34px;height:34px;border-radius:9px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--ink);background-size:cover;flex:0 0 auto;}
body.lite .sm-place-row__meta{flex:1;min-width:0;}
body.lite .sm-place-row__name{display:block;font:700 13.5px/1.3 var(--font-ui);color:var(--ink);}
body.lite .sm-place-row__sub{display:block;font-size:11.5px;color:var(--muted);}
body.lite .sm-place-row__go{color:var(--muted-2);}
body.lite .place-chosen{display:flex;align-items:center;gap:10px;padding:12px;background:var(--card-2);border-radius:var(--r-ctl);}
body.lite .place-chosen__icon{width:34px;height:34px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
body.lite .place-chosen__meta{flex:1;min-width:0;}
body.lite .place-chosen__name{display:block;font:700 14px/1.3 var(--font-ui);color:var(--ink);}
body.lite .place-chosen__sub{display:block;font-size:12px;color:var(--muted);}

/* 404 / error states */
.error-state{text-align:center;padding:60px 20px;}
.error-state .ic{font-size:52px;color:var(--muted-2);margin-bottom:16px;}
.error-state h1{font:800 24px/1.2 var(--font-display);margin:0 0 8px;}
.error-state p{color:var(--muted);font-size:14px;margin:0 0 20px;}

/* ---------------------------------------------------------------------------
   MANAGE BUSINESS — fix round (single-business dashboard + switcher)
   Everything else on this page reuses the unprefixed switcher-card/biz-logo/
   stats-row/offer-row/clips-row/invite-row classes above (already pixel-matched
   to the design). These .mb- rules only cover the NEW bits: the switcher
   dropdown, the real on/off toggle button, and the invite promo row being a
   whole tappable card instead of a link.
   --------------------------------------------------------------------------- */
.mb-switcher{cursor:pointer;}
.mb-switcher > summary{list-style:none;}
.mb-switcher > summary::-webkit-details-marker{display:none;}
.mb-switcher[open] .caret-down{transform:rotate(180deg);}
.mb-switcher-pop{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.mb-switcher-item{display:flex;align-items:center;gap:10px;padding:8px 2px;color:inherit;text-decoration:none;border-radius:10px;}
.mb-switcher-item:hover{background:var(--card-2);}
.mb-switcher-logo{width:32px;height:32px;border-radius:9px;font-size:12px;}
.mb-switcher-item-name{flex:1;min-width:0;font:700 13.5px/1.3 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mb-toggle-btn{all:unset;width:46px;height:28px;border-radius:999px;background:#d5d8dd;position:relative;flex:0 0 auto;cursor:pointer;}
.mb-toggle-btn::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s ease;}
.mb-toggle-btn.on{background:var(--ink);}
.mb-toggle-btn.on::after{left:21px;background:var(--yellow);}
.mb-invite-row{cursor:pointer;}

/* ---------------------------------------------------------------------------
   v207: business photos editor (place-edit.php) — matches playbook
   business-edit-details-preview.html's .photo-grid/.photo-tile/.add-tile.
   --------------------------------------------------------------------------- */
.pe-photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.pe-phototile{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--card-2);cursor:grab;}
.pe-phototile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pe-phototile.dragging{opacity:.4;}
.pe-phototile.drag-over{outline:2px dashed var(--ink);outline-offset:-2px;}
.pe-ptile-cover{position:absolute;top:6px;left:6px;background:var(--yellow);color:var(--ink);font:800 10px/1 var(--font-ui);padding:3px 8px;border-radius:999px;}
.pe-ptile-remove{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;background:rgba(20,21,24,.65);color:#fff;border:0;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;}
/* v207: touch reorder toolbar — bottom strip inside the tile, always visible (no hover
   state to discover on a phone). Buttons are 30px visual on a 36px tap target (padding
   extends the hit area without growing the small photo tile) — smaller than the site's
   44px baseline, same trade-off Instagram/Google Photos make for an in-tile reorder
   control; the remove (x) button above keeps the same size for visual consistency. */
.pe-ptile-tools{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.55) 60%);gap:4px;}
.pe-ptile-tool{width:36px;height:36px;border-radius:50%;background:rgba(20,21,24,.65);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex:0 0 auto;}
.pe-ptile-tool:disabled{opacity:.35;cursor:default;}
.pe-ptile-tool[data-cover]{background:rgba(255,255,255,.9);color:var(--ink);}
.pe-addtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--card-2);border:1.5px dashed var(--line);border-radius:12px;aspect-ratio:1/1;color:var(--ink);cursor:pointer;position:relative;}
.pe-addtile i{font-size:22px;}
.pe-addtile span{font:700 11px/1 var(--font-ui);color:var(--muted);}
.pe-addtile input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.pe-addtile[disabled]{opacity:.4;pointer-events:none;}

/* WhatsApp card */
.pe-wa-row{display:flex;align-items:center;gap:10px;padding:14px 14px 0;}
.pe-wa-code{display:flex;align-items:center;gap:6px;height:52px;padding:0 12px;border-radius:12px;background:var(--card-2);font:700 15px/1 var(--font-ui);color:var(--ink);flex:0 0 auto;}
.pe-wa-code-select{border:0;outline:0;appearance:none;-webkit-appearance:none;cursor:pointer;min-width:76px;}
.pe-wa-input{flex:1;border:0;outline:0;background:var(--card-2);border-radius:12px;height:52px;padding:0 14px;font:600 15px/1 var(--font-ui);color:var(--ink);width:100%;}
.pe-wa-toggle-row{display:flex;align-items:center;gap:10px;padding:14px 14px 14px;}
.pe-wa-toggle-row .wt-label{flex:1;font-size:14.5px;font-weight:700;color:var(--ink);}
.pe-wa-preview{margin:0 14px 14px;padding:10px 12px;background:var(--card-2);border-radius:10px;}
.pe-wa-preview .wp-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px;}
.pe-wa-preview .wp-text{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4;}