/* sg2026 page group «ai-support» (b: SocialGrow AI (Reactions), Support, Growth, Social Reports). Loaded after app.css by skin.helper (A284), with its own ?v=filemtime.
   OWNER: the Felix instance assigned to this group in the install plan, «Wave split». Edit ONLY this file, your group's view
   overrides and skin/manifest/ai-support.json. Tokens, shell and shared components live in app.css (B4 owner): ask, never copy.
   SCOPE RULE: every rule starts with html[data-skin="sg26"] and a selector unique to the page (its .skeleton id, its view root
   class, or body:has(<unique element>)), so nothing leaks to other groups. Existing tokens only (GL-003 §7.7).
   Boards: Ai* (14), Support* (5), TicketNotFound, WaPreferences, Growth*, Reports* (6) */

/* [SG-PATCH 2026-10-10 A286-b | Felix ai-support] wave 1.
   Specificity: B4's product layer (app.css §11.A) is html:is([data-skin="sg26"],#sg-skin) body … = (1,1,2)+. Every rule here adds the
   page id (#reactions-pro, …), so it outranks §11.A without touching it. !important only where a legacy rule (reactions core.css,
   smart-targets inline <style>, inline style="") already carries it or sits on an inline attribute. */

/* =====================================================================================================================
   1. SocialGrow AI (Reactions) — every account page shares #reactions-pro.skeleton--full (index, schedule, log, stats,
      messages, notifications, activity volumes, proxy status). The account list and every tab body are ALSO returned by AJAX
      (aside search/load more, Reactions.UpdateData, ScheduleController/SettingsController sections), outside Controller::view():
      plan §2.4 → CSS only here, no fork. Boards: AiIndex, AiSettings*, AiLog*, AiMessages, AiNotifications, AiStats*, AiVolumes.
   ===================================================================================================================== */

/* 1.1 Layout: board .content.r-row = padding 0 --pad-page --pad-page, row gap 24, the aside is a 280px card, the detail column fills.
       The legacy panels scroll inside a JS-fixed height; on the board the page scrolls, so height/overflow go back to auto. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro > .clearfix {
  display: flex; align-items: flex-start; gap: var(--gap-block); padding: 0 var(--pad-page) var(--pad-page); box-sizing: border-box;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro > .clearfix::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro > .clearfix::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-aside),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content){
  float: none !important; height: auto !important; overflow: visible !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content { flex: 1 1 auto; min-width: 0; width: auto !important; background: transparent !important; }

/* 1.2 Account aside = kit .card, 280 wide, 16 padding, 12 gap (board: aside.card) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside {
  flex: 0 0 280px; width: 280px !important; display: flex; flex-direction: column; gap: 12px; padding: 16px; box-sizing: border-box;
  border: 1px solid transparent !important; border-radius: var(--r-lg); background: var(--card-bg) padding-box, var(--card-edge) border-box !important;
  box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-box { position: static; padding: 0 !important; border: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-box .input { height: 40px; padding-left: 36px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-box :is(.field-icon--left),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-box :is(.search-icon),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-box :is(.cancel-icon){ width: 36px !important; height: 40px; padding: 0 !important; display: grid; place-items: center; font-size: 16px; color: var(--text-3); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .js-search-results { margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .aside-list { display: flex; flex-direction: column; gap: 6px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .loadmore { margin-top: 12px !important; padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .search-no-result { font: 400 13px/20px var(--f); color: var(--text-3); }
/* admin/staff filter blocks above the list (Background Task, Bulk Actions, Task Filters): label row 13/18 500, chips = kit chip */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .reactions-bulk-actions-header { padding: 0 !important; border: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .reactions-bulk-actions-header > .mb-5 > a { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--f); color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .rp-task-actions-filters .pos-r { display: flex; flex-wrap: wrap; gap: 8px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .reactions-filter-accounts-per-page { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .reactions-filter-accounts-per-page-pre { flex: 1; font: 500 13px/18px var(--f); color: var(--text); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .js-accounts-per-page { width: 88px !important; height: 40px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside .button--rp-filter:not(.js-accounts-per-page) {
  height: 30px !important; padding: 0 12px !important; border-radius: var(--r-full) !important; font: 500 13px/18px var(--f) !important; margin: 0 !important;
}

/* 1.3 Account row = board li.acc: radius 14, padding 12, 1px edge; selected = raised surface + border-2 (accent never; it is a selection
       of a row, the tab bar carries the accent). Head: [select 18] [avatar 32] [name / status] [⋯ 32]; the rest of .sub runs under
       the avatar (the board's 28px indent from the row edge). */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item {
  padding: 12px !important; border: 1px solid transparent !important; border-radius: var(--r-inset); background: transparent !important; box-shadow: none !important; color: var(--text-2);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item:hover { background: var(--hover-fill) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item:is(.active, .task-selected) { background: var(--surface-raised) !important; border-color: var(--border-2) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item::after { border-radius: inherit; background-color: color-mix(in srgb, var(--surface) 80%, transparent); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item > .clearfix {
  display: grid; grid-template-columns: 18px 32px minmax(0, 1fr) 32px; column-gap: 10px; align-items: start;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item > .clearfix::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item > .clearfix::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .circle {
  grid-column: 2; grid-row: 1; float: none !important; width: 32px !important; height: 32px !important; margin: 2px 0 0 !important; border-radius: 50%; object-fit: cover;
  background: var(--surface-alt) !important; overflow: hidden; font-size: 0; color: transparent;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .inner { grid-column: 3; grid-row: 1; overflow: visible !important; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .options {
  position: static !important; grid-row: 1; z-index: 11; font-size: 16px; display: grid; place-items: center;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .options.reactions-selector { grid-column: 1; height: 36px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .options.context-menu-wrapper { grid-column: 4; height: 36px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .options.context-menu-wrapper > a {
  position: relative; z-index: 11; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); color: var(--text-2) !important; font-size: 16px; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .options.context-menu-wrapper > a:hover { background: var(--hover-fill); color: var(--text-max) !important; }
/* select = board button.sel: 18px ring in --border-strong; selected = accent fill with a check (selection = accent, GL-003 §7.3) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .js-task-action-select {
  position: relative; z-index: 11; display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: 50%;
  font-size: 12px; color: transparent !important; background: transparent;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .js-task-action-select::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .js-task-action-select.mdi-checkbox-marked-circle-outline { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .js-task-action-select.mdi-checkbox-marked-circle-outline::before {
  content: "" !important; display: block; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--sg-ic-check) center/100% 100% no-repeat; mask: var(--sg-ic-check) center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .js-task-action-select:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
/* name 13/18 500 --text, status caption 12/16 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .title { margin: 0 !important; font: 500 13px/18px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .title .rp-device-type { margin-left: 6px; font: 400 12px/16px var(--f); color: var(--text-3); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 0 -42px; padding: 0; white-space: normal !important; overflow: visible !important;
  font: 400 12px/16px var(--f) !important; color: var(--text-muted) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > * { margin: 0 !important; float: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(span):not(.follow-speed, .like-speed, .comment-speed, .dm-speed, .welcome-dm-speed, .unfollow-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(a):not(.follow-speed, .like-speed, .comment-speed, .dm-speed, .welcome-dm-speed, .unfollow-speed){ flex-basis: 100%; }
/* everything above and including the status sits beside the avatar, under the name */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.rp-action-safety-list-status),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.slave-status),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.ac-rate-limit-status),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.ac-status),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.reuser-owner),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.status){ padding-left: 42px; box-sizing: border-box; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status ~ .status { padding-left: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub .mdi { font-size: 13px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :empty { display: none; }

/* 1.4 Status (GL-003 §7.2.4): active IG account row = success + heartbeat on EVERY row; «In pausa» = info azure, static dot;
       inactive/off = danger red dot. The label text is the product's; only colour and sign change. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status { display: inline-flex; align-items: center; gap: 7px; color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status > .mdi {
  position: relative; flex: none; width: 6px; height: 6px; margin: 0 !important; border-radius: 50%; background: currentColor; font-size: 0 !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status > .mdi::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-paused { color: var(--status-info) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-green { color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-green > .mdi { width: 8px; height: 8px; background: var(--live); animation: sg-beat 2.2s ease-in-out infinite; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-green > .mdi::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; animation: sg-ring 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-green > .mdi,
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status.color-green > .mdi::after { animation: none !important; }
}
/* the other row notes: warning (accelerator, rate limit, proxy issues), danger (used elsewhere, expired, re-login, break), info (pending re-login, expiry) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-orange),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-warning){ color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-red),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-danger),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-expired){ color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-blue) { color: var(--status-info) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub .rp-accelerator-proxy-state { line-height: 16px; }
/* «N azioni/giorno» = caption muted, no glyph */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .speed { color: var(--text-muted) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .speed > .mdi { display: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .speed .speed-value { color: inherit; }
/* counters = board ul.counters: 3 per row, 12/16 500 --text-muted, 13px stroke glyph from the board */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.follow-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.like-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.comment-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.dm-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.welcome-dm-speed),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.unfollow-speed){
  display: inline-flex; align-items: center; gap: 6px; width: calc((100% - 16px) / 3); font: 500 12px/16px var(--f); color: var(--text-muted) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .follow-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .like-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .comment-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .dm-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .welcome-dm-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .unfollow-speed > :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .follow-speed > :is(.sli),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .like-speed > :is(.sli),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .comment-speed > :is(.sli),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .dm-speed > :is(.sli),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .welcome-dm-speed > :is(.sli),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .unfollow-speed > :is(.sli){
  flex: none; width: 13px; height: 13px; margin: 0 !important; font-size: 0 !important; background: currentColor;
  -webkit-mask: var(--ais-i) center/100% 100% no-repeat; mask: var(--ais-i) center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .follow-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .like-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .comment-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .dm-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .welcome-dm-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .unfollow-speed > :is(.mdi)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .follow-speed > :is(.sli)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .like-speed > :is(.sli)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .comment-speed > :is(.sli)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .dm-speed > :is(.sli)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .welcome-dm-speed > :is(.sli)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .unfollow-speed > :is(.sli)::before{ content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub .speed-value { color: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .follow-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .like-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .comment-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .dm-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .welcome-dm-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .unfollow-speed { --ais-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E"); }
/* «Ultimo aggiornamento …» and other trailing notes = caption --text-3 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.login-flow-timestamp),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.count),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.ra-page),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.sdf-info),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.dm-complete-procentage){ color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .login-flow-timestamp > .mdi,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .count > .mdi,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .ra-page > .mdi,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .sdf-info > .mdi{ display: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .reactions-custom-label {
  display: inline-flex !important; align-items: center; height: 24px; margin: 0 6px 0 0 !important; padding: 0 10px; border-radius: var(--r-full); background: var(--surface-alt); border: 1px solid var(--border); font: 500 12px/16px var(--f); color: var(--text-2);
}

/* 1.5 Empty detail column (index, no account selected) = kit .empty: dashed, --fill-1, icon tile 44 + body-lg --text-2 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content:has(> .no-data) {
  display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: calc(100vh - var(--topbar-h) - var(--pad-page));
  border: 1px dashed var(--border-dash) !important; border-radius: var(--r-lg); background: var(--fill-1) !important; box-sizing: border-box;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content > .no-data { position: static; transform: none; margin: 0; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .no-data .no-data-icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 !important; border-radius: 13px; font-size: 22px; color: var(--sg-soft);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)); box-shadow: inset 0 1px 0 var(--border);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .no-data p { margin: 0; max-width: 420px; font: 400 16px/25px var(--f); color: var(--text-2) !important; }

/* 1.6 Account header + mode bar + tab bar = ONE card (board: section.card «@account … Tutorial», «Modalità impostazioni», nav.tabs).
       They are siblings in the product (inside the form on Settings/Messages, directly in .skeleton-content elsewhere) and smart-targets
       injects .st-view-bar / .st-live by JS, so no wrapper exists: the parent becomes a 1-column grid, the three blocks get rows 2-4 and
       the parent's ::before paints the card behind exactly those rows. ::after holds row 1 so every other child flows from row 5 on. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content:has(> .react-tab-heads)):not(sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content > form:has(> .react-tab-heads)){
  display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; position: relative;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content:has(> .react-tab-heads)):not(sg-p0)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content > form:has(> .react-tab-heads))::before{
  content: ""; grid-column: 1; grid-row: 2 / 5; align-self: stretch;
  border: 1px solid transparent; border-radius: var(--r-lg); background: var(--card-bg) padding-box, var(--card-edge) border-box; box-shadow: var(--card-shadow);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content:has(> .react-tab-heads)):not(sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content > form:has(> .react-tab-heads))::after{ content: ""; grid-column: 1; grid-row: 1; height: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header.back-button-wh { grid-column: 1; grid-row: 1; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header:not(.back-button-wh) {
  grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px 24px 0 !important; border: 0 !important; background: transparent !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header:not(.back-button-wh)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header:not(.back-button-wh)::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .st-view-bar { grid-column: 1; grid-row: 3; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .react-tab-heads { grid-column: 1; grid-row: 4; justify-self: start; margin: 18px 24px 20px !important; }
/* the account name row: legacy box removed; name 17/24 500, «Apri in Instagram» = content link, re-login = danger caption */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .section-title {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; float: none !important; margin: 0 !important;
  font: 500 17px/24px var(--f) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .rp-account-title-actions { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .rp-account-username { border: 0 !important; font: 500 17px/24px var(--f) !important; color: var(--text) !important; text-decoration: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .rp-account-open-link { font: 400 13px/20px var(--f) !important; color: var(--brand-primary-text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .rp-account-open-link:hover { color: var(--sg-soft) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .section-title small { margin: 0 !important; display: inline-flex; align-items: center; gap: 5px; font: 400 12px/16px var(--f) !important; }
/* ≥ 768: Tutorial pinned top-right of the card (board), so the name row is full width and the status pill drops under it */
@media (min-width: 768px) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header:not(.back-button-wh) { position: relative; padding-right: 160px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link { position: absolute !important; top: 20px; right: 24px; }
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .section-title { flex-basis: 100% !important; }
/* Tutorial = board .btn-grad (gradient fill that carries text, --brand-on-primary, pill 40). The product prints style="background-color:red" */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link {
  float: none !important; display: inline-flex !important; align-items: center; gap: 8px; height: 40px; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--r-full) !important; background: var(--sg-gradient-fill) !important; color: var(--brand-on-primary) !important;
  font: 500 14px/20px var(--f) !important; box-shadow: var(--sg-glow-rest) !important; text-decoration: none; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link :where(i):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link :is(.fab){ margin: 0 !important; font-size: 16px !important; line-height: 1 !important; background: transparent !important; color: inherit !important; }
/* automation pill (smart-targets .st-live) = kit .status: on = success + heartbeat (something running now, one per card), off = «in pausa» = info, static dot */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live {
  --t: var(--t-info); --tc: var(--status-info);
  order: 3; display: inline-flex; align-items: center; gap: 6px; height: 22px; margin: -4px 0 0 !important; padding: 0 9px !important; box-sizing: border-box; opacity: 1 !important;
  border: 1px solid rgba(var(--t), .3) !important; border-radius: var(--r-full); background: rgba(var(--t), .1); color: var(--tc) !important; font: 500 12px/16px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live--on { --t: var(--t-success); --tc: var(--status-success); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live .st-live-dot { width: 6px; height: 6px; opacity: 1; background: currentColor; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live--on .st-ecg { display: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live--on::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: sg-beat 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header .st-live--on::before { animation: none !important; } }
/* «Modalità impostazioni» row (board: label 13/18 500 + segmented control + hint 12/16 --text-3; no box of its own) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar {
  display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 24px 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-row { display: flex; flex-direction: row; align-items: center; gap: 12px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-label { opacity: 1 !important; gap: 8px; font: 500 13px/18px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-label .mdi { color: var(--text-3); font-size: 16px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-hint { flex: 1 1 240px; max-width: 360px; opacity: 1 !important; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-switch {
  display: inline-flex !important; gap: 2px; padding: 3px !important; border-radius: var(--r-full) !important; background: var(--fill-2) !important; border: 1px solid var(--border) !important; box-shadow: inset 0 1px 0 var(--hi);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-seg {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 14px !important; border: 0 !important; border-radius: var(--r-full) !important;
  background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-seg:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-seg.active { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-seg:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
/* tab bar: bare <a> tabs are styled globally since B4.2 (app.css 11.D); only the account-page placement stays here */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-tab-heads { padding: 3px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-tab-heads .proxy-status-dot { width: 6px; height: 6px; margin: 0 !important; }

/* 1.7 Tab bodies: each .section-content (and the loose .activity-data of the log) = its own card under the header card */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > :is(.section-content),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > :is(.activity-data){
  grid-column: 1; margin-top: var(--gap-block) !important; padding: 20px 24px !important; max-width: none; box-sizing: border-box;
  border: 1px solid transparent !important; border-radius: var(--r-lg); background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .activity-data > .no-data { position: static; margin: 0; padding: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .activity-data > .no-data p { font: 400 14px/22px var(--f); color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-content .col.s12.m10.l10 { width: 100% !important; }
/* save bar = board .actionbar (AiSettings): --surface-alt, border-2, radius 16, padding 14 16, gap 12; opaque in BOTH states.
   [FIX 2026-10-11, Angelo] floating (.is-fixed, set by Reactions core.js with inline left/width = its slot): opaque surface + the kit
   large shadow so it reads as one bar over the cards (the product painted it 76-82% translucent); bottom 16 like the kit; on >= 768 the
   bar stops 96px before the right edge so the fixed chat button (right 28 + 52) never sits on «Salva». Docked = in-flow, no shadow. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-save-bar {
  padding: 14px 16px !important; border: 1px solid var(--border-2) !important; border-radius: var(--r-lg) !important; background: var(--surface-alt) !important;
  box-shadow: inset 0 1px 0 var(--hi), var(--shadow-sm) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-save-bar.is-fixed { bottom: 16px !important; z-index: 90; box-shadow: inset 0 1px 0 var(--hi), var(--shadow-lg) !important; }
/* B4.28 #4 (Angelo): the floating bar keeps the width Reactions core.js gives it (= its column); the chat button rises above it (app.css b428) */
/* docked bar (every width): it scrolls through the chat button's row, so it ends 64px before the right edge of its column
   (button = right 28 / 16 + 52 wide, page padding 32 / 16: 64 clears both with an 8px gap). */
/* B4.28 #4: the docked bar is as wide as its column too (the 64px gap for the chat button is gone; app.css b428 page reserve) */
/* phone: the chat button is fixed at right 16 (52 wide): the bar, docked or floating, ends 60px before the right edge of its column, so
   «Salva» never passes under the button at any scroll position (a docked bar scrolls through the button's row too). */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-save-bar-content { gap: 12px; flex-wrap: wrap; }
/* footer actions: the two-up (m6) outline buttons have one-line labels; in the 993-1179 band the detail column is only ~400 wide,
   so the pair wraps to one per row instead of spilling the page sideways (1024: +54px). Wide widths keep the two-up row. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-footer-actions > .clearfix:not(.rp-download-actions-loading) { display: flex; flex-wrap: wrap; } /* the cols carry mb-20 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-footer-actions > .clearfix:not(.rp-download-actions-loading)::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-footer-actions > .clearfix:not(.rp-download-actions-loading)::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-footer-actions > .clearfix:not(.rp-download-actions-loading) > .col { float: none !important; flex: 1 1 260px; width: auto !important; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-row { flex-wrap: wrap; }
/* the docked bar's slot keeps the page rhythm below it */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-schedule-save-bar-slot { margin-bottom: var(--gap-block) !important; }

/* 1.6b Settings group heads: B4.15 (global) owns the group heads, switches and «Guida» since 2026-10-11; no local rule here. */
/* «Azioni attive» (smart-targets summary): title 13/18 500 --text, rows 13/20, «running now» = static success dot (more than one row: GL-003 §7.2.4) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-acts-title { opacity: 1 !important; margin-bottom: 8px; font: 500 13px/18px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-acts-empty { opacity: 1 !important; font: 400 13px/20px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-acts li { font: 400 13px/20px var(--f) !important; color: var(--text) !important; gap: 10px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-acts .st-dot { width: 6px; height: 6px; flex-basis: 6px; background: var(--status-success) !important; animation: none !important; }

/* 1.9 Tab bodies (wave 2). Boards AiStats*, AiVolumes, AiNotifications, AiMessages, AiLog*: every panel is its own top-level card
       (no card in a card). Where the tab body holds product panels, .section-content stops being the card and becomes a 24px stack;
       the panels (stats .rp-accelerator-metrics-dropdown, volumes details.rp-action-block-group) are the cards, and their inner
       report sections are .card-alt. Panels, toggles and chart bodies are re-rendered by AJAX: CSS only (plan §2.4). */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content > .section-content:has(.rp-accelerator-metrics-shell, > details.rp-action-block-group) {
  display: flex; flex-direction: column; gap: var(--gap-block); padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content > .section-content:has(.rp-accelerator-metrics-shell) > .col { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown):not(sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(details.rp-action-block-group){
  overflow: hidden; border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-head),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-head){ padding: 20px 24px !important; background: transparent !important; border: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-body),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-body){ padding: 4px 24px 24px !important; background: transparent !important; border: 0 !important; }
/* panel title = board card head: 17/24 500 + 13/20 --text-2 subtitle; the round glyph = kit icon tile 36 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-title),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-title){ font: 500 17px/24px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-copy),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-copy){ font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-icon),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-icon){
  display: grid !important; place-items: center; width: 36px !important; height: 36px !important; flex: none; border-radius: var(--r-md) !important; color: var(--sg-soft) !important; font-size: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; box-shadow: inset 0 1px 0 var(--border) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-accelerator-metrics-dropdown-icon :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-action-block-group-icon :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-accelerator-metrics-dropdown-icon :where(svg):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-action-block-group-icon :where(svg):not(.sg-p0){ color: inherit !important; }
/* head controls (download, clear, refresh, collapse) = kit ghost icon buttons 32 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-controls > :is(a)),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-controls > :is(button)),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-chevron):not(sg-p0){
  display: inline-grid !important; place-items: center; width: 32px !important; height: 32px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--r-full) !important;
  background: transparent !important; color: var(--text-2) !important; box-shadow: none !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-controls > :is(a)):hover,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-dropdown-controls > :is(button)):hover,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-action-block-group-chevron):not(sg-p0):hover{ background: var(--hover-fill) !important; color: var(--text-max) !important; }
/* sub-sections inside a panel = .card-alt (surface-alt, border, radius 14, inner highlight) */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-activity-current),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-activity-report-section),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-task-metrics-panel),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-activity-summary > *),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-stats-autorefresh),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.rp-accelerator-metrics-autorefresh){
  border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-context { font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
/* period switch (Giorno / Settimana / Mese / Trimestre) = kit segmented .tabs; the sliding indicator (positioned by JS) = the raised tab */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-periods {
  padding: 3px !important; border: 1px solid var(--border) !important; border-radius: var(--r-full) !important; background: var(--fill-2) !important; box-shadow: inset 0 1px 0 var(--hi) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-periods > button {
  height: 30px; padding: 0 14px !important; border-radius: var(--r-full) !important; background: transparent !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-periods > :is(button[aria-pressed="true"]),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-periods > :is(button.active),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-periods > :is(button.is-active){ color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-period-indicator { height: 30px !important; top: 3px !important; border: 0 !important; border-radius: var(--r-full) !important; background: var(--surface-raised) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !important; }
/* empty states inside panels: --text-2 title, --text-3 copy, no tinted glyph */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty :where(strong):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty-state :where(strong):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty :where(h3):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty-state :where(h3):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty :where(h4):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty-state :where(h4):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty :is(.title),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .rp-activity-empty-state :is(.title){ color: var(--text-2) !important; }
/* charts: colours come from tokens globally since B4.3 (app.css); nothing chart-related is set here */

/* 1.10 Messages (board AiMessages): one column, the field full width, the two actions in a row under the fields
       («Aggiungi messaggio» secondary, «Salva» primary), the variables as tag chips under a line, the saved messages as card-alt rows.
       The function picker stays the product <select> (Reactions.MessagesForm() reads it; the board's option cards would be new logic). */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content :is(.col.s12.m10.l8),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content :is(.col.s12.m12.l8),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content :is(.col.s12.m12.l4){ float: none !important; width: 100% !important; margin-left: 0 !important; padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mb-5 > .clearfix { display: flex; flex-direction: column; gap: 20px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mb-5 > .clearfix::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mb-5 > .clearfix::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mb-5 > .clearfix > .col.l8 { display: flex; flex-direction: column; gap: 20px; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mb-5 > .clearfix > .col.l8 > .none { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .col.l4.l-last { display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 20px !important; border-bottom: 1px solid var(--border); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .col.l4.l-last > :is(a),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .col.l4.l-last > :is(input){ width: auto !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .js-add-new-message-btn { background: var(--btn2-bg) !important; color: var(--btn2-fg) !important; border-color: transparent !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .js-add-new-message-btn:hover { background: var(--btn2-bg-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .new-message-input { min-height: 96px; height: 100px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-content .form-label { display: block; margin: 0 0 6px !important; font: 500 13px/18px var(--f) !important; color: var(--text) !important; text-transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content .mt-20 { margin-top: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-content .field-tips { margin: 6px 0 0 !important; padding: 0 !important; list-style: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-content .field-tips > li { margin: 0 0 4px !important; padding: 0 !important; list-style: none; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-content .field-tips > li::before { content: none !important; }
/* «Variabili»: name = accent tag chip, description --text-2 13/20 */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .section-content > .clearfix > .col > .field-tips { margin-top: 20px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .field-tips li > .mt-5 { display: flex; align-items: baseline; gap: 10px; margin-top: 8px !important; font: 400 13px/20px var(--f); color: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-reactions-messages-form .field-tips li > .mt-5 > strong {
  flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-full); border: 1px solid color-mix(in srgb, var(--sg-accent-2) 38%, transparent);
  background: var(--brand-primary-subtle); color: var(--sg-soft); font: 500 12px/16px var(--f);
}
/* saved messages: «Totale messaggi» tag + rows (card-alt, padding 16, remove = ghost ×), meta as tags */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-total-answers-count { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin: 20px 0 12px !important; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--border-2); background: var(--fill-3); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .js-total-answers-count label { margin: 0 !important; font: 500 12px/16px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list { display: flex; flex-direction: column; gap: 12px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item {
  position: relative; float: none !important; width: auto !important; margin: 0 !important; padding: 16px 48px 16px 16px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > .message { flex-basis: 100%; font: 400 14px/22px var(--f); color: var(--text); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.function),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.trigger),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.keyword),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.frequency),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.message-type),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item > :is(.ai-provider){
  display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; height: 24px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--border-2); background: var(--fill-3);
  font: 500 12px/16px var(--f) !important; color: var(--text) !important; opacity: 1 !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item .remove-message-btn {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); color: var(--text-2) !important; font-size: 16px; opacity: 1 !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item .remove-message-btn:hover { background: var(--hover-fill); color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item .attachment-box { display: inline-flex; flex-direction: column; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .reactions-message-list-item .attachment-file { border-radius: var(--r-md); }

/* 1.11 Notifications feed (board AiNotifications): title 20/26 + caption, filter chips + refresh (tonal sm), source/fetch caption,
        the tracking note = info alert, the feed = card-alt list */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-header { align-items: flex-start; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-title-wrap .react-stats-title { display: block; margin: 0 0 4px !important; font: 500 20px/26px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-subtitle { font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-fetched { font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-fetched :is(b),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-fetched :is(strong){ color: var(--text-2) !important; font-weight: 500; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-filters .js-notifications-filter:is(.active, .is-active, [aria-pressed="true"]) { background: var(--surface-raised) !important; color: var(--text-max) !important; border-color: var(--border-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-note {
  --t: var(--t-info); padding: 10px 14px !important; border: 1px solid rgba(var(--t), .3) !important; border-radius: var(--r-inset) !important; background: rgba(var(--t), .08) !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-list { border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; overflow: hidden; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .notification-feed-empty { font: 400 14px/22px var(--f) !important; color: var(--text-2) !important; }

/* 1.12 Activity log, client (board AiLog): empty state = kit .empty inside the card */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .activity-data:has(> .no-data) { border-style: dashed !important; border-color: var(--border-dash) !important; background: var(--fill-1) !important; text-align: center; padding: 40px 24px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .activity-data .no-data a { color: var(--brand-primary-text) !important; }

/* 1.8 Tablet and phone. < 1024 the aside narrows to the board's tablet width; < 768 (AiIndexM) everything stacks with the page gutter.
       The product hides the aside (≤ 992, .hide-on-medium-and-down) on the account pages and shows «Indietro»: that is logic, kept. */
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside { flex-basis: 260px; width: 260px !important; }
}
@media (max-width: 992px) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro > .clearfix { flex-direction: column; align-items: stretch; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-aside { flex-basis: auto; width: auto !important; }
  /* AiIndexM draws the empty state under the list: shown, although the product class hides it on medium and down */
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .skeleton-content.hide-on-medium-and-down:has(> .no-data) { display: flex !important; min-height: 0; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header.back-button-wh:not(.none) { padding: 0 0 16px !important; border: 0 !important; background: transparent !important; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header.back-button-wh a {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--border-2); background: var(--tonal-bg); color: var(--text) !important; font: 500 13px/18px var(--f);
  }
}
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro > .clearfix { padding: 0 var(--pad-page) var(--pad-page); gap: var(--gap-block); }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .section-header:not(.back-button-wh) { padding: 16px 16px 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar { margin: 16px 16px 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-view-bar-row { flex-wrap: wrap; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > .react-tab-heads { margin: 16px 16px 16px !important; justify-self: stretch; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > :is(.section-content),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro :is(.skeleton-content, .skeleton-content > form) > :is(.activity-data){ padding: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .section-header a.youtube-link { height: 44px; }
}

/* =====================================================================================================================
   2. Support (user side, fixed dark: the views print body.darkside, GL-003 §7.7.9). L2 overrides under
      skin/views/plugins/support-ticket/views/… render the boards' markup with kit classes under .sg-root; the rules below are the
      boards' screen-specific rules (Support*.dc.html, block «screen-specific»), scoped to the override's root class.
   ===================================================================================================================== */
/* 2.0 page column: board .content = gap 24 between blocks; the FAB never covers the last block (GL-003 §7.7.10, 52 + 16) */
html[data-skin="sg26"] body .sg-root.st-page { display: flex; flex-direction: column; gap: var(--gap-block); padding: 0 0 68px; }
html[data-skin="sg26"] body .sg-root.st-page .tile { color: var(--text); transition: var(--tr); text-decoration: none; }
html[data-skin="sg26"] body .sg-root.st-page .card-alt.tile:hover { border-color: var(--border-2); background: var(--surface-raised); color: var(--text); }
html[data-skin="sg26"] body .sg-root.st-page .card.tile:hover { color: var(--text); box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px color-mix(in srgb, var(--sg-accent-2) 35%, transparent); }
html[data-skin="sg26"] body .sg-root.st-page :is(a.tile):focus-visible,
html[data-skin="sg26"] body .sg-root.st-page :is(button.tile):focus-visible{ outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .sg-root.st-page .tab .count { min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-full); background: var(--border); color: var(--text-2); font: 500 12px/18px var(--f); text-align: center; font-variant-numeric: tabular-nums; }
html[data-skin="sg26"] body .sg-root.st-page .tab.is-on .count { background: var(--brand-primary-subtle); color: var(--sg-soft); }
html[data-skin="sg26"] body .sg-root.st-page .st-block { display: flex; flex-direction: column; gap: 14px; }
html[data-skin="sg26"] body .sg-root.st-page .st-bhead { display: flex; align-items: center; gap: 10px; }
html[data-skin="sg26"] body .sg-root.st-page .list { list-style: none; margin: 0; padding: 0; }

/* 2.1 home: hero (glow card, centred, search 640 / 44, «Apri un ticket» secondary sm) */
html[data-skin="sg26"] body .st-home .st-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 32px; text-align: center; }
html[data-skin="sg26"] body .st-home .st-sbox { position: relative; width: 100%; max-width: 640px; margin-top: 16px; }
html[data-skin="sg26"] body .st-home .st-sbox > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); z-index: 1; }
html:is([data-skin="sg26"],#sg-skin) body .st-home .st-sbox .input { width: 100%; height: 44px; padding-left: 42px !important; font-size: 15px; box-sizing: border-box; }
html[data-skin="sg26"] body .st-home .st-noanswer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
/* live search results (built by the page JS, classes kept): the kit menu surface */
html[data-skin="sg26"] body .st-home .st-sresults { display: none; width: 100%; max-width: 640px; margin-top: 8px; text-align: left; }
html[data-skin="sg26"] body .st-home .st-sresults.is-shown { display: block; }
html[data-skin="sg26"] body .st-home .st-sresults__panel { padding: 6px; border-radius: var(--r-menu); background: var(--surface-raised); border: 1px solid var(--menu-line); box-shadow: var(--shadow-lg); }
html[data-skin="sg26"] body .st-home .st-sresults__panel :where(a):not(.sg-p0),
html[data-skin="sg26"] body .st-home .st-sresults__panel :is(.st-sresults__more){ display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--text-2); font: 500 14px/20px var(--f); text-decoration: none; }
html[data-skin="sg26"] body .st-home .st-sresults__panel a:hover { background: var(--hover-fill); color: var(--text-max); }
html[data-skin="sg26"] body .st-home .st-sresults__panel .mdi { font-size: 18px; color: var(--text-3); }
html[data-skin="sg26"] body .st-home .st-sresults__more { color: var(--brand-primary-text) !important; }
html[data-skin="sg26"] body .st-home .st-sresults__none { padding: 10px; font: 400 13px/20px var(--f); color: var(--text-2); }
html[data-skin="sg26"] body .st-home .st-sresults__none b { color: var(--text); font-weight: 500; }

/* 2.2 featured (4 / 2 / 1) and topics (5 / 3 / 2) */
html[data-skin="sg26"] body .st-home .st-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-skin="sg26"] body .st-home .st-feat { height: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
html[data-skin="sg26"] body .st-home .st-feat > svg { flex-shrink: 0; color: var(--sg-soft); }
html[data-skin="sg26"] body .st-home .st-feat .label,
html[data-skin="sg26"] body .st-home .st-cat .label{ font-size: 14px; line-height: 20px; }
html[data-skin="sg26"] body .st-home .st-cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
html[data-skin="sg26"] body .st-home .st-cat { display: flex; align-items: center; gap: 12px; padding: 14px; }
html[data-skin="sg26"] body .st-home .st-cat__txt { display: flex; flex-direction: column; min-width: 0; }

/* 2.3 my tickets (3 / 2 / 1): card tiles, priority neutral badge, status badge by role (GL-003 §7.2.3) */
html[data-skin="sg26"] body .st-home .st-mine { gap: 16px; }
/* head action next to the title, never in the right-hand column: the fixed chat FAB (bottom-right) would cover it at some scroll position (B4.9 note, Vera 1010 gate) */
html:is([data-skin="sg26"],#sg-skin) body .st-home .st-mine .sec-head { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start !important; gap: 12px 16px; }
html:is([data-skin="sg26"],#sg-skin) body .st-home .st-mine .sec-head > .btn { flex: none; width: auto; }
html[data-skin="sg26"] body .st-home .st-mine .tabs { align-self: flex-start; }
html[data-skin="sg26"] body .st-home .st-tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html[data-skin="sg26"] body .st-home .st-tk { height: 100%; min-height: 150px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 20px; }
html[data-skin="sg26"] body .st-home .st-tk__head { display: flex; align-items: center; justify-content: space-between; }
html[data-skin="sg26"] body .st-home .st-tk__subj { font: 500 15px/22px var(--f); overflow-wrap: anywhere; }
html[data-skin="sg26"] body .st-home .st-tk__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* 2.4 WhatsApp preference: card row, icon tile 40, the product checkbox drawn as the kit switch 42x26 (44 hit area) */
html[data-skin="sg26"] body .st-home .st-notif__card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--pad-card); }
html[data-skin="sg26"] body .st-home .st-notif__text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
html[data-skin="sg26"] body .st-home .st-notif__text .icon-tile { width: 40px; height: 40px; }
html[data-skin="sg26"] body .st-home .st-notif__title { font: 500 14px/20px var(--f); color: var(--text); }
html[data-skin="sg26"] body .st-home .st-notif__saved { display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
html[data-skin="sg26"] body .sg-root.st-page .st-switch { position: relative; flex: none; width: 42px; height: 26px; }
html[data-skin="sg26"] body .sg-root.st-page .st-switch input { position: absolute; inset: -9px; width: 60px; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
html[data-skin="sg26"] body .sg-root.st-page .st-switch__track { position: absolute; inset: 0; box-sizing: border-box; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: var(--switch-off); transition: var(--tr); }
html[data-skin="sg26"] body .sg-root.st-page .st-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--switch-knob); box-shadow: var(--knob-shadow); transition: transform .35s var(--ease); }
html[data-skin="sg26"] body .sg-root.st-page .st-switch input:checked + .st-switch__track { background: var(--brand-primary); border-color: var(--brand-primary-border); }
html[data-skin="sg26"] body .sg-root.st-page .st-switch input:checked + .st-switch__track::after { transform: translateX(16px); background: #fff; }
html[data-skin="sg26"] body .sg-root.st-page .st-switch input:focus-visible + .st-switch__track { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }

/* 2.5 widths (board: tablet 768-1279 / 768-1023, phone < 768) */
@media (max-width: 1279.98px) {
  html[data-skin="sg26"] body .st-home .st-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="sg26"] body .st-home .st-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body .st-home .st-tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body .st-home .st-hero { padding: 32px var(--pad-card); }
  html[data-skin="sg26"] body .st-home :is(.st-feat-grid),
html[data-skin="sg26"] body .st-home :is(.st-tk-grid){ grid-template-columns: minmax(0, 1fr); }
  html[data-skin="sg26"] body .st-home .st-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="sg26"] body .st-home .st-notif__card { gap: 16px; }
}

/* 2.6 New ticket (board SupportNew, /e/support-ticket/new): the product's .stn-* markup already has the board's structure (form card +
       3 side cards, back link, live KB suggestions, drop zone), so it is restyled here, not forked. Values from the board dump. */
html[data-skin="sg26"] body .stn-page { max-width: none !important; margin: 0 !important; padding: 0 0 68px !important; display: flex; flex-direction: column; gap: 16px; }
html[data-skin="sg26"] body .stn-page .stn-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
  font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; text-decoration: none;
}
html[data-skin="sg26"] body .stn-page .stn-back:hover { color: var(--text-max) !important; }
html[data-skin="sg26"] body .stn-page .stn-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px !important; gap: var(--gap-block) !important; align-items: start; }
html[data-skin="sg26"] body .stn-page :is(.stn-card),
html[data-skin="sg26"] body .stn-page :is(.stn-info){
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .stn-page .stn-card { padding: 32px !important; }
html[data-skin="sg26"] body .stn-page .stn-card > h2 { margin: 0 0 6px !important; font: 500 20px/26px var(--f) !important; letter-spacing: -.018em; color: var(--text) !important; }
html[data-skin="sg26"] body .stn-page .stn-card > .lead { margin: 0 0 28px !important; font: 400 14px/22px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .stn-page form { display: flex; flex-direction: column; gap: 20px; }
html[data-skin="sg26"] body .stn-page .stn-field { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; }
html[data-skin="sg26"] body .stn-page .stn-field > label { margin: 0 !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stn-page .stn-field > label > span { color: var(--text-3) !important; font-weight: 400 !important; }
html[data-skin="sg26"] body .stn-page .stn-field :is(input[type="text"]),
html[data-skin="sg26"] body .stn-page .stn-field :is(select):not(.sg-p0),
html[data-skin="sg26"] body .stn-page .stn-field :is(textarea):not(.sg-p0){
  width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important;
  background-color: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; box-shadow: none !important; transition: var(--tr);
}
html[data-skin="sg26"] body .stn-page .stn-field textarea { height: 200px !important; min-height: 96px; padding: 9px 12px !important; resize: vertical; }
html[data-skin="sg26"] body .stn-page .stn-field :is(input):hover,
html[data-skin="sg26"] body .stn-page .stn-field :is(select):hover,
html[data-skin="sg26"] body .stn-page .stn-field :is(textarea):hover{ border-color: var(--border-strong-hover) !important; }
html[data-skin="sg26"] body .stn-page .stn-field :is(input):focus-visible,
html[data-skin="sg26"] body .stn-page .stn-field :is(select):focus-visible,
html[data-skin="sg26"] body .stn-page .stn-field :is(textarea):focus-visible{ outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html[data-skin="sg26"] body .stn-page .stn-field :is(input)::placeholder,
html[data-skin="sg26"] body .stn-page .stn-field :is(textarea)::placeholder{ color: var(--text-3); opacity: 1; }
html[data-skin="sg26"] body .stn-page .stn-field .hint { font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html[data-skin="sg26"] body .stn-page .stn-field .error { font: 400 12px/16px var(--f) !important; color: var(--status-danger) !important; }
html[data-skin="sg26"] body .stn-page .stn-field.has-error :is(input),
html[data-skin="sg26"] body .stn-page .stn-field.has-error :is(textarea){ border-color: var(--status-danger-line) !important; }
html[data-skin="sg26"] body .stn-page .stn-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 !important; }
/* live suggestions = board .card-alt.sugg (title soft accent 13/18, rows 40 radius 10) */
html[data-skin="sg26"] body .stn-page .stn-sugg { margin: -8px 0 0 !important; padding: 14px 8px 8px !important; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
html[data-skin="sg26"] body .stn-page .stn-sugg:not(.is-shown) { display: none; }
html[data-skin="sg26"] body .stn-page .stn-sugg__head { padding: 0 12px 6px !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .stn-page .stn-sugg__list a { display: flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 9px 12px !important; border: 0 !important; border-radius: var(--r-md) !important; background: transparent !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; text-decoration: none; }
html[data-skin="sg26"] body .stn-page .stn-sugg__list a:hover { background: var(--hover-fill) !important; }
html[data-skin="sg26"] body .stn-page .stn-sugg__list a .mdi { color: var(--sg-soft) !important; font-size: 16px; }
/* attachments drop zone = board label.drop (input-bg, border-strong, radius 14, padding 20, icon tile lg) */
html[data-skin="sg26"] body .stn-page .stn-drop {
  display: flex !important; align-items: center; gap: 16px; padding: 20px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-inset) !important;
  background: var(--input-bg) !important; cursor: pointer; box-shadow: none !important;
}
html[data-skin="sg26"] body .stn-page .stn-drop:hover { border-color: var(--border-strong-hover) !important; }
html[data-skin="sg26"] body .stn-page .stn-drop:focus-within { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .stn-page .stn-drop__icon {
  display: grid !important; place-items: center; width: 44px !important; height: 44px !important; flex: none; border-radius: 13px !important; font-size: 22px; color: var(--sg-soft) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; box-shadow: inset 0 1px 0 var(--border) !important;
}
html[data-skin="sg26"] body .stn-page .stn-drop__text { display: flex; flex-direction: column; gap: 2px; }
html[data-skin="sg26"] body .stn-page .stn-drop__title { font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stn-page .stn-drop__sub { font: 400 12px/16px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-3) !important; }
html[data-skin="sg26"] body .stn-page .stn-drop__count { margin-left: auto; font: 500 12px/16px var(--f); color: var(--sg-soft); }
/* footer: ghost «Annulla» + primary «Invia ticket», 44px, line above */
html[data-skin="sg26"] body .stn-page .stn-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 0 !important; padding: 20px 0 0 !important; border-top: 1px solid var(--border) !important; }
html[data-skin="sg26"] body .stn-page .stn-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px !important; box-sizing: border-box; border: 1px solid transparent !important;
  border-radius: var(--r-full) !important; font: 500 15px/20px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none; cursor: pointer; transition: var(--tr);
}
html[data-skin="sg26"] body .stn-page .stn-btn--ghost { background: transparent !important; color: var(--text-2) !important; box-shadow: none !important; }
html[data-skin="sg26"] body .stn-page .stn-btn--ghost:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html[data-skin="sg26"] body .stn-page .stn-btn--primary { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important; }
html[data-skin="sg26"] body .stn-page .stn-btn--primary:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html[data-skin="sg26"] body .stn-page .stn-btn--primary:active { background: var(--brand-primary-active) !important; }
html[data-skin="sg26"] body .stn-page .stn-btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .stn-page .stn-banner { display: flex; gap: 8px; margin: 0 0 20px !important; padding: 12px 14px !important; border-radius: var(--r-inset) !important; border: 1px solid rgba(var(--t-danger), .3) !important; background: rgba(var(--t-danger), .1) !important; color: var(--status-danger) !important; font: 400 13px/20px var(--f) !important; }
/* side cards: padding 20, gap 12, title 14/20 500 with an 18px glyph, body 13/20 --text-2, bullets 4px --text-3; the last one = glow card */
html[data-skin="sg26"] body .stn-page .stn-aside { display: flex !important; flex-direction: column; gap: 16px !important; }
html[data-skin="sg26"] body .stn-page .stn-info { display: flex; flex-direction: column; gap: 12px; margin: 0 !important; padding: 20px !important; }
html[data-skin="sg26"] body .stn-page .stn-info:last-child { background: var(--surface) !important; border-color: var(--border) !important; position: relative; overflow: hidden; }
html[data-skin="sg26"] body .stn-page .stn-info:last-child::after {
  content: ""; position: absolute; right: -100px; bottom: -140px; width: 380px; height: 280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent);
}
html[data-skin="sg26"] body .stn-page .stn-info > * { position: relative; z-index: 1; }
html[data-skin="sg26"] body .stn-page .stn-info h3 { display: flex; align-items: center; gap: 8px; margin: 0 !important; font: 500 14px/20px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stn-page .stn-info h3 .mdi { font-size: 18px; color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .stn-page .stn-info p { margin: 0 !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .stn-page .stn-info ul { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; list-style: none; }
html[data-skin="sg26"] body .stn-page .stn-info li { position: relative; margin: 0 !important; padding: 0 0 0 12px !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .stn-page .stn-info li::before { content: "" !important; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3) !important; }
@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body .stn-page .stn-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body .stn-page .stn-card { padding: 20px 16px !important; }
  html[data-skin="sg26"] body .stn-page .stn-row { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-skin="sg26"] body .stn-page .stn-field :is(input[type="text"]),
html[data-skin="sg26"] body .stn-page .stn-field :is(select):not(.sg-p0){ height: 44px; font-size: 16px !important; }
  html[data-skin="sg26"] body .stn-page .stn-actions .stn-btn { flex: 1; }
}

/* 2.7 Help center: category / search list (board SupportKb, column 880 centred) and article (board SupportKbArticle, column 760).
       Markup = the product's .stkb-* / .stka-* (forked only to turn the content h1 into an h2: one h1 per page). */
html[data-skin="sg26"] body :is(.stkb-page),
html[data-skin="sg26"] body :is(.stka-page){ max-width: 880px !important; margin: 0 auto !important; padding: 0 0 68px !important; display: flex; flex-direction: column; gap: var(--gap-block); }
html[data-skin="sg26"] body .stka-page { max-width: 760px !important; gap: 20px; }
html[data-skin="sg26"] body :is(.stkb-back),
html[data-skin="sg26"] body :is(.stka-back),
html[data-skin="sg26"] body :is(.st-vback){
  align-self: flex-start; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; text-decoration: none; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-skin="sg26"] body :is(.stkb-back):hover,
html[data-skin="sg26"] body :is(.stka-back):hover,
html[data-skin="sg26"] body :is(.st-vback):hover{ color: var(--text-max) !important; }
/* hero = glow card 20 radius, 36 40 padding; title 28/34; lead body-lg; search 44 + primary «Cerca» lg */
html[data-skin="sg26"] body .stkb-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 !important; padding: 36px 40px !important; text-align: center;
  border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: none !important;
  background: radial-gradient(380px 280px at calc(100% + 90px) calc(100% + 40px), color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent 100%), var(--surface) !important;
}
html[data-skin="sg26"] body .stkb-hero :is(h1),
html[data-skin="sg26"] body .stkb-hero :is(h2){ margin: 0 !important; font: 500 28px/34px var(--f) !important; letter-spacing: -.02em; color: var(--text) !important; }
html[data-skin="sg26"] body .stkb-hero > p { margin: 0 !important; font: 400 16px/25px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .stkb-search { display: flex !important; gap: 8px; width: 100%; max-width: 600px; margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-skin="sg26"] body .stkb-search input {
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important;
  background: var(--input-bg) !important; color: var(--text) !important; font: 400 15px/22px var(--f) !important;
}
html[data-skin="sg26"] body .stkb-search input:focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html[data-skin="sg26"] body :is(.stkb-search button),
html[data-skin="sg26"] body :is(.stkb-cta a),
html[data-skin="sg26"] body :is(.stka-cta a){
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px !important; box-sizing: border-box; border: 1px solid transparent !important;
  border-radius: var(--r-full) !important; background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important;
  font: 500 14px/20px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none; cursor: pointer; transition: var(--tr);
}
html[data-skin="sg26"] body .stkb-search button { height: 44px; padding: 0 22px !important; font-size: 15px !important; }
html[data-skin="sg26"] body :is(.stkb-search button):hover,
html[data-skin="sg26"] body :is(.stkb-cta a):hover,
html[data-skin="sg26"] body :is(.stka-cta a):hover{ box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html[data-skin="sg26"] body :is(.stkb-search button):focus-visible,
html[data-skin="sg26"] body :is(.stkb-cta a):focus-visible,
html[data-skin="sg26"] body :is(.stka-cta a):focus-visible{ outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body :is(.stkb-search button, .stkb-cta a, .stka-cta a) .mdi { color: inherit !important; }
/* category head: icon tile 36 + title 20/26 + neutral count badge + ghost «Tutte le categorie» on the right */
html[data-skin="sg26"] body .stkb-cathead { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html[data-skin="sg26"] body .stkb-cathead h2 { margin: 0 !important; font: 500 20px/26px var(--f) !important; color: var(--text) !important; text-transform: none !important; }
html[data-skin="sg26"] body .stkb-cathead .count { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-full); border: 1px solid rgba(var(--t-neutral), .3); background: rgba(var(--t-neutral), .1); font: 500 12px/16px var(--f) !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stkb-allcats { margin-left: auto !important; display: inline-flex !important; align-items: center; gap: 8px; height: 32px; padding: 0 14px !important; border-radius: var(--r-full); background: transparent !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none; }
html[data-skin="sg26"] body .stkb-allcats:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html[data-skin="sg26"] body .stkb-section { display: flex; flex-direction: column; gap: 16px; margin: 0 !important; }
html[data-skin="sg26"] body .stkb-shead { display: flex; align-items: center; gap: 10px; margin: 0 !important; font: 500 17px/24px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stkb-shead .mdi { color: var(--sg-soft) !important; }
/* article rows = kit card tiles with a chevron; title 15/22 500, excerpt 13/20 --text-2 */
html[data-skin="sg26"] body .stkb-list { display: flex !important; flex-direction: column; gap: 12px !important; }
html[data-skin="sg26"] body .stkb-item {
  position: relative; display: block !important; margin: 0 !important; padding: 20px 56px 20px 24px !important; text-decoration: none;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important; transition: var(--tr);
}
html[data-skin="sg26"] body .stkb-item::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: var(--text-3);
  -webkit-mask: var(--sg-ic-chevron-right) center/100% 100% no-repeat; mask: var(--sg-ic-chevron-right) center/100% 100% no-repeat;
}
html[data-skin="sg26"] body .stkb-item:hover { box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px color-mix(in srgb, var(--sg-accent-2) 35%, transparent) !important; transform: none !important; }
html[data-skin="sg26"] body .stkb-item:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .stkb-item__t { margin: 0 0 4px !important; font: 500 15px/22px var(--f) !important; color: var(--text) !important; }
html[data-skin="sg26"] body .stkb-item__e { font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
/* the KB index tiles (featured / categories) reuse the Support home look */
html[data-skin="sg26"] body .stkb-featured > a,
html[data-skin="sg26"] body .stkb-cats > a{
  border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important; transform: none !important;
}
html[data-skin="sg26"] body .stkb-featured > a:hover,
html[data-skin="sg26"] body .stkb-cats > a:hover{ background: var(--surface-raised) !important; border-color: var(--border-2) !important; }
html[data-skin="sg26"] body .stkb-featured .mdi,
html[data-skin="sg26"] body .stkb-cats .mdi{ color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .stkb-cat-tile__icon { border-radius: var(--r-md) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; }
html[data-skin="sg26"] body .stkb-empty { padding: 40px 24px !important; border: 1px dashed var(--border-dash) !important; border-radius: var(--r-lg) !important; background: var(--fill-1) !important; color: var(--text-2) !important; font: 400 14px/22px var(--f) !important; text-align: center; }
/* «Non hai trovato…» = card row: icon tile lg + h3 text, primary on the right */
html[data-skin="sg26"] body .stkb-cta {
  display: flex !important; align-items: center; justify-content: space-between; gap: 24px; margin: 0 !important; padding: 24px 28px !important; text-align: left !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .stkb-cta :is(p):not(.sg-p0),
html[data-skin="sg26"] body .stkb-cta :is(h3):not(.sg-p0),
html[data-skin="sg26"] body .stkb-cta :is(h4):not(.sg-p0),
html[data-skin="sg26"] body .stkb-cta :is(span:not(.mdi)){ margin: 0 !important; font: 500 17px/24px var(--f) !important; color: var(--text) !important; }
/* article card: padding 40 44, category = neutral badge, title 28/34 (h2), prose body-lg --text-2 */
html[data-skin="sg26"] body .stka-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin: 0 !important; padding: 40px 44px !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .stka-cat { display: inline-flex !important; align-items: center; height: 22px; margin: 0 !important; padding: 0 9px !important; border-radius: var(--r-full) !important; border: 1px solid rgba(var(--t-neutral), .3) !important; background: rgba(var(--t-neutral), .1) !important; color: var(--text) !important; font: 500 12px/16px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; }
html[data-skin="sg26"] body .stka-card :is(h1),
html[data-skin="sg26"] body .stka-card :is(h2){ margin: 0 !important; font: 500 28px/34px var(--f) !important; letter-spacing: -.02em; color: var(--text) !important; }
html[data-skin="sg26"] body .stka-body { font: 400 16px/25px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .stka-body :is(p),
html[data-skin="sg26"] body .stka-body :is(ul),
html[data-skin="sg26"] body .stka-body :is(ol){ margin: 0 0 16px !important; }
html[data-skin="sg26"] body .stka-body :is(b),
html[data-skin="sg26"] body .stka-body :is(strong){ color: var(--text) !important; font-weight: 500; }
html[data-skin="sg26"] body .stka-body a { color: var(--brand-primary-text) !important; }
html[data-skin="sg26"] body .stka-related {
  display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 20px 24px !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .stka-related__h { margin: 0 !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-3) !important; }
html[data-skin="sg26"] body .stka-related a { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 0 !important; border: 0 !important; background: transparent !important; font: 500 14px/20px var(--f) !important; color: var(--text) !important; text-decoration: none; }
html[data-skin="sg26"] body .stka-related a:hover { color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .stka-related a .mdi { color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .stka-cta {
  position: relative; overflow: hidden; display: flex !important; align-items: center; justify-content: space-between; gap: 24px; margin: 0 !important; padding: 24px 28px !important; text-align: left !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: none !important;
  background: radial-gradient(380px 280px at calc(100% + 90px) calc(100% + 60px), color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent 100%), var(--surface) !important;
}
html[data-skin="sg26"] body .stka-cta p { margin: 0 !important; font: 400 16px/25px var(--f) !important; color: var(--text) !important; }

/* 2.8 Ticket thread (board SupportThread): main 784 + side 320; meta = badges (status tinted by role, priority/category neutral);
       user message = card + avatar, agent/system = card-alt + round icon tile; reply = card with h3, textarea, attach + primary */
html[data-skin="sg26"] body .st-wrap-view { display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: var(--gap-block) !important; align-items: start; max-width: none !important; margin: 0 !important; padding: 0 0 68px !important; }
html[data-skin="sg26"] body .st-vmain { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
html[data-skin="sg26"] body .st-meta { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
html[data-skin="sg26"] body .st-meta__chip {
  display: inline-flex !important; align-items: center; gap: 5px; height: 24px; margin: 0 !important; padding: 0 11px 0 9px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  border: 1px solid rgba(var(--t-neutral), .3) !important; background: rgba(var(--t-neutral), .1) !important; color: var(--text) !important; font: 500 12px/16px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html[data-skin="sg26"] body .st-meta__chip.status { border-color: color-mix(in srgb, var(--st-s) 30%, transparent) !important; background: color-mix(in srgb, var(--st-s) 10%, transparent) !important; color: var(--st-s) !important; }
html[data-skin="sg26"] body .st-meta__chip.status.st-status--neutral { border-color: rgba(var(--t-neutral), .3) !important; background: rgba(var(--t-neutral), .1) !important; color: var(--text) !important; }
html[data-skin="sg26"] body .st-meta__chip .dot { width: 6px !important; height: 6px !important; background: currentColor !important; }
html[data-skin="sg26"] body .st-meta__chip .mdi { font-size: 12px; color: inherit !important; }
html[data-skin="sg26"] body .st-thread { display: flex !important; flex-direction: column; gap: 12px !important; margin: 0 !important; }
html[data-skin="sg26"] body .st-msg {
  display: flex !important; gap: 14px; margin: 0 !important; padding: 20px !important; max-width: none !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .st-msg:not(.is-user) { border-color: var(--border) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
html[data-skin="sg26"] body .st-msg__avatar {
  display: grid !important; place-items: center; width: 36px !important; height: 36px !important; flex: none; border-radius: 50% !important; font-size: 18px !important;
  background: var(--sg-gradient-fill) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important;
}
html[data-skin="sg26"] body .st-msg:not(.is-user) .st-msg__avatar { color: var(--sg-soft) !important; box-shadow: inset 0 1px 0 var(--border) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; }
html[data-skin="sg26"] body .st-msg__avatar .mdi { color: inherit !important; }
html[data-skin="sg26"] body .st-msg__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 !important; background: transparent !important; border: 0 !important; }
html[data-skin="sg26"] body .st-msg__head { display: flex !important; align-items: baseline; gap: 10px; margin: 0 !important; }
html[data-skin="sg26"] body .st-msg__from { font: 500 13px/18px var(--f) !important; color: var(--text) !important; }
html[data-skin="sg26"] body .st-msg__when { margin: 0 !important; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; font-variant-numeric: tabular-nums; }
html[data-skin="sg26"] body .st-msg__text { font: 400 14px/22px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .st-att { display: inline-flex !important; align-items: center; gap: 8px; height: 32px; padding: 0 12px !important; border-radius: var(--r-full) !important; border: 1px solid var(--border-2) !important; background: var(--fill-3) !important; color: var(--text) !important; font: 500 13px/18px var(--f) !important; text-decoration: none; }
html[data-skin="sg26"] body .st-att .size { color: var(--text-3) !important; font-weight: 400; }
html[data-skin="sg26"] body .st-reply {
  display: flex; flex-direction: column; gap: 12px; margin: 0 !important; padding: 24px !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .st-reply :is(h2):not(.sg-p0),
html[data-skin="sg26"] body .st-reply :is(h3):not(.sg-p0),
html[data-skin="sg26"] body .st-reply :is(h4):not(.sg-p0),
html[data-skin="sg26"] body .st-reply :is(label:not(.st-attach)){ margin: 0 !important; font: 500 17px/24px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .st-reply form { display: flex; flex-direction: column; gap: 12px; margin: 0 !important; }
html[data-skin="sg26"] body .st-reply textarea {
  width: 100%; min-height: 130px; box-sizing: border-box; padding: 9px 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important;
  background: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; resize: vertical;
}
html[data-skin="sg26"] body .st-reply textarea:focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html[data-skin="sg26"] body .st-reply textarea::placeholder { color: var(--text-3); opacity: 1; }
html[data-skin="sg26"] body .st-attach {
  align-self: flex-start; display: inline-flex !important; align-items: center; gap: 8px; height: 32px; margin: 0 !important; padding: 0 14px !important; border-radius: var(--r-full) !important;
  border: 1px solid var(--border-2) !important; background: var(--tonal-bg) !important; color: var(--text) !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer;
}
html[data-skin="sg26"] body .st-attach .mdi { color: inherit !important; }
html[data-skin="sg26"] body .st-attach:focus-within { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .st-reply .actions { display: flex; justify-content: flex-end; margin: -44px 0 0 !important; pointer-events: none; }
html[data-skin="sg26"] body .st-reply .actions > * { pointer-events: auto; }
html[data-skin="sg26"] body .st-reply .st-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px !important; box-sizing: border-box; border: 1px solid transparent !important; border-radius: var(--r-full) !important;
  font: 500 14px/20px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: var(--tr);
}
html[data-skin="sg26"] body .st-reply .st-btn--primary { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important; }
html[data-skin="sg26"] body .st-reply .st-btn--primary:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html[data-skin="sg26"] body .st-reply .st-btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .st-reply .st-btn .mdi { color: inherit !important; }
html[data-skin="sg26"] body :is(.st-resolved-note),
html[data-skin="sg26"] body :is(.st-form-banner),
html[data-skin="sg26"] body :is(.st-locked){ display: flex; gap: 8px; padding: 10px 14px !important; border-radius: var(--r-inset) !important; font: 400 13px/20px var(--f) !important; }
html[data-skin="sg26"] body .st-resolved-note { --t: var(--t-success); border: 1px solid rgba(var(--t), .3) !important; background: rgba(var(--t), .1) !important; color: var(--status-success) !important; }
html[data-skin="sg26"] body .st-form-banner { --t: var(--t-danger); border: 1px solid rgba(var(--t), .3) !important; background: rgba(var(--t), .1) !important; color: var(--status-danger) !important; }
html[data-skin="sg26"] body .st-locked { border: 1px solid var(--border) !important; background: var(--surface-alt) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .st-csat { padding: 16px 20px !important; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; }
html[data-skin="sg26"] body .st-csat__btn { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 14px !important; border-radius: var(--r-full) !important; border: 1px solid var(--border-2) !important; background: var(--tonal-bg) !important; color: var(--text) !important; font: 500 13px/18px var(--f) !important; }
/* side: «Dettagli ticket» card (title 14/20 500 with glyph, k/v rows 13/20 with hairlines), the email card = glow card (no violet) */
html[data-skin="sg26"] body .st-vside { display: flex !important; flex-direction: column; gap: 16px; padding-top: 42px; }
html[data-skin="sg26"] body .st-vcard {
  margin: 0 !important; padding: 20px !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html[data-skin="sg26"] body .st-vcard + .st-vcard {
  position: relative; overflow: hidden; border-color: var(--border) !important;
  background: radial-gradient(380px 280px at calc(100% + 90px) calc(100% + 60px), color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent 100%), var(--surface) !important;
}
html[data-skin="sg26"] body .st-vcard h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font: 500 14px/20px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html[data-skin="sg26"] body .st-vcard h4 .mdi { font-size: 18px; color: var(--sg-soft) !important; }
html[data-skin="sg26"] body .st-vcard p { margin: 0 !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html[data-skin="sg26"] body .st-vcard__row { display: flex !important; justify-content: space-between; gap: 12px; padding: 8px 0 !important; border-bottom: 1px solid var(--border) !important; font: 400 13px/20px var(--f) !important; }
html[data-skin="sg26"] body .st-vcard__row:last-child { border-bottom: 0 !important; }
html[data-skin="sg26"] body .st-vcard__row .k { color: var(--text-2) !important; }
html[data-skin="sg26"] body .st-vcard__row .v { color: var(--text) !important; font-variant-numeric: tabular-nums; text-align: right; }

/* 2.9 Ticket not found (board TicketNotFound): centred, icon tile lg, h3, body-sm --text-2, primary */
html[data-skin="sg26"] body .st-404 { align-items: center; }
html[data-skin="sg26"] body .st-404__box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 600px; margin: 20px auto 0; padding: 40px 20px; text-align: center; }
html[data-skin="sg26"] body .st-404__box .btn { margin-top: 12px; }

@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body .st-wrap-view { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-skin="sg26"] body .st-vside { padding-top: 0; }
}
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body .stkb-hero { padding: 28px 16px !important; }
  html[data-skin="sg26"] body .stkb-hero :is(h1),
html[data-skin="sg26"] body .stkb-hero :is(h2),
html[data-skin="sg26"] body .stka-card :is(h1),
html[data-skin="sg26"] body .stka-card :is(h2){ font-size: 24px !important; line-height: 30px !important; }
  html[data-skin="sg26"] body .stkb-search { flex-direction: column; }
  html[data-skin="sg26"] body :is(.stkb-cta),
html[data-skin="sg26"] body :is(.stka-cta){ flex-direction: column; align-items: stretch; padding: 20px 16px !important; }
  html[data-skin="sg26"] body .stka-card { padding: 24px 20px !important; }
  html[data-skin="sg26"] body .stkb-item { padding: 16px 44px 16px 16px !important; }
  html[data-skin="sg26"] body .stkb-item::after { right: 16px; }
  html[data-skin="sg26"] body .st-msg { padding: 16px !important; }
  html[data-skin="sg26"] body .st-reply { padding: 16px !important; }
  html[data-skin="sg26"] body .st-reply .actions { margin-top: 0 !important; }
  html[data-skin="sg26"] body .st-reply .st-btn { width: 100%; height: 44px; }
}

/* =====================================================================================================================
   3. Engagement Boost (growth plugin, /e/growth, root .skeleton#ann). Boards Growth / GrowthM / GrowthLocked*.
      The fragment carries the order forms, the 7-step tour, the datatable and their JS (form names, data-*, ids): restyled, not
      forked. Same grid technique as 1.6: #ann becomes a 1-column grid, hero + KPIs + tutorial button share one glow card
      (#ann::before, rows 2-3), everything else flows from row 4.
   ===================================================================================================================== */
html:is([data-skin="sg26"],#sg-skin) body #ann { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 100px !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann::before {
  content: ""; grid-column: 1; grid-row: 2 / 4; align-self: stretch;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface);
  background-image: radial-gradient(380px 280px at calc(100% + 90px) calc(100% + 0px), color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent 100%);
}
html:is([data-skin="sg26"],#sg-skin) body #ann::after { content: ""; grid-column: 1; grid-row: 1; height: 0; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .alert { grid-column: 1; grid-row: 1; margin: 0 0 16px !important; }
/* hero: icon tile lg 44 / title 20/26 / lead body-lg --text-2; the tutorial button = kit secondary 40, top-right of the card */
html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-hero {
  grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap !important; align-items: flex-start; gap: 16px; margin: 0 !important; padding: 28px 200px 0 28px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero-icon {
  display: grid; place-items: center; width: 44px !important; height: 44px !important; flex: none; border-radius: 13px !important; font-size: 22px !important; color: var(--brand-on-primary) !important;
  background: var(--sg-gradient-fill) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--sg-glow-rest) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero-text { flex: 1 1 auto !important; display: flex; flex-direction: column; gap: 4px; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero-icon { display: grid !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero-text h2 { margin: 0 !important; font: 500 20px/26px var(--f) !important; letter-spacing: -.018em; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero-text p { margin: 0 !important; font: 400 16px/25px var(--f) !important; color: var(--text-2) !important; opacity: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-tutorial-btn-row { grid-column: 1; grid-row: 2; justify-self: end; align-self: start; margin: 28px 28px 0 0 !important; padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-tutorial-btn {
  display: inline-flex !important; align-items: center; gap: 8px; height: 40px; padding: 0 18px !important; box-sizing: border-box; border: 1px solid transparent !important; border-radius: var(--r-full) !important;
  background: var(--btn2-bg) !important; color: var(--btn2-fg) !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12) !important; font: 500 14px/20px var(--f) !important; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-tutorial-btn:hover { background: var(--btn2-bg-hover) !important; transform: translateY(-1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 0 20px color-mix(in srgb, var(--sg-accent-2) 22%, transparent) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-tutorial-btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-tutorial-btn .mdi { font-size: 16px; color: inherit !important; }
/* KPIs = board dl.kpi-row: card-alt tiles, caption (glyph + label) above the 28/34 value */
html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-kpi-grid { grid-column: 1; grid-row: 3; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; margin: 24px 28px 28px !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 6px; padding: 16px 20px !important; margin: 0 !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; transform: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-head { grid-column: 1; grid-row: 1; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-icon { width: auto !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; font-size: 14px !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-label { grid-column: 2; grid-row: 1; margin: 0 !important; font: 400 12px/16px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-value { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; font: 500 28px/34px var(--f) !important; font-variant-numeric: tabular-nums; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-value small { font: inherit !important; color: inherit !important; }
/* service cards: 3 / 2 / 1 columns, gap 24, kit card (padding 20, gap 16) */
html:is([data-skin="sg26"],#sg-skin) body #ann > .row { margin: 24px 0 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .row.gr-services-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-block); padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .row { padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .row::before, html:is([data-skin="sg26"],#sg-skin) body #ann > .row::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > .row > .col { float: none !important; width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card { height: 100%; box-sizing: border-box; padding: 20px !important; margin: 0 !important; overflow: visible; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 8px; align-items: center; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form > :is(.section-content),
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form > :is(.clearfix){ display: contents !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form br { display: none; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form > *,
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form > .section-content > *,
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-order-form > .clearfix > *{ grid-column: 1 / -1; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .section-header { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-service-icon {
  display: grid; place-items: center; width: 36px !important; height: 36px !important; flex: none; border-radius: var(--r-md) !important; font-size: 18px !important; color: var(--sg-soft) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; box-shadow: inset 0 1px 0 var(--border) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .section-title { margin: 0 !important; padding-top: 6px; font: 500 17px/24px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .form-label { display: block; margin: 16px 0 6px !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .section-content > .form-label:first-child { margin-top: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .field-tips { margin: 0 0 6px !important; padding: 0 !important; list-style: none; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .field-tips li { margin: 0 !important; padding: 0 !important; list-style: none; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .field-tips li::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card input[name="description"][readonly] {
  height: auto !important; min-height: 40px; padding: 9px 12px !important; border: 1px solid var(--border) !important; background: var(--input-bg) !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; cursor: default;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .input { width: 100% !important; max-width: none !important; box-sizing: border-box; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card { width: 100% !important; }
/* quantity: preset chips + the field on one row (board), field alone when there are no presets */
/* quantity: chips row then the field (Vera H3, 1010 gate: chips + field on one row spilled 37px at 1280 with five chips) */
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 8px !important; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy + .gr-amount { grid-column: 1 / -1; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card { min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy .chip {
  display: inline-flex; align-items: center; height: 30px; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  border: 1px solid var(--border-2) !important; background: var(--fill-3) !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; font-variant-numeric: tabular-nums; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy .chip:hover { border-color: var(--border-hover) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy .chip.active { background: var(--brand-primary-subtle) !important; border-color: color-mix(in srgb, var(--sg-accent-2) 38%, transparent) !important; color: var(--sg-soft) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy .chip:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
/* total: separator, caption label, price 32/38 500 on the left; «Procedi al pagamento» (kit primary 40) on the right of the price */
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-price ~ * { grid-column: 1 / -1; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .section-content > .form-label:nth-last-of-type(1) { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--border); font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-price {
  grid-column: 1; float: none !important; width: 100% !important; max-width: 180px !important; height: 38px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 500 32px/38px var(--f) !important; font-variant-numeric: tabular-nums; color: var(--text) !important; outline: none;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-submit-btn { grid-column: 2 !important; justify-self: end; width: auto !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-form-err.show { margin-top: 12px; font: 400 12px/16px var(--f); color: var(--status-danger) !important; }
/* order list: statuses (GL-003 §7.2.4: completed = static green dot, in progress = info, cancelled/failed = danger) */
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; box-sizing: border-box; border-radius: var(--r-full); border: 1px solid rgba(var(--t), .3); background: rgba(var(--t), .1) !important; color: var(--tc) !important; font: 500 12px/16px var(--f) !important; --t: var(--t-neutral); --tc: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-status--progress { --t: var(--t-info); --tc: var(--status-info); }
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-status--done { --t: var(--t-success); --tc: var(--status-success); }
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-status--cancel { --t: var(--t-danger); --tc: var(--status-danger); }
html:is([data-skin="sg26"],#sg-skin) body #ann #dataTable .gr-url { color: var(--brand-primary-text) !important; }
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #ann > .row.gr-services-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-hero { flex-direction: column; padding: 20px 16px 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-tutorial-btn-row { grid-row: 3; justify-self: start; margin: 16px 0 0 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann::before { grid-row: 2 / 5; }
  html:is([data-skin="sg26"],#sg-skin) body #ann > .gr-kpi-grid { grid-row: 4; margin: 16px !important; gap: 12px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card { padding: 12px 14px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-value { font-size: 24px !important; line-height: 30px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann > .row.gr-services-row { grid-template-columns: minmax(0, 1fr); }
  html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy { grid-column: 1 / -1; margin-bottom: 8px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann .gr-card .gr-quick-buy + .gr-amount { grid-column: 1 / -1; }
}

/* 3.1 GrowthLocked (package without Engagement Boost): the product's centred block (center > .mb-25 > .side-block: title, danger
       alert with the «Clicca qui» link inside it) becomes the board's glow card 560: lock tile 44, title 20/26, danger alert, primary
       button with an arrow under the alert. The link is moved under the alert visually (absolute), its markup and href unchanged. */
html:is([data-skin="sg26"],#sg-skin) body #ann:has(> center > .mb-25 > .side-block) { display: block !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann:has(> center > .mb-25 > .side-block)::before,
html:is([data-skin="sg26"],#sg-skin) body #ann:has(> center > .mb-25 > .side-block)::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann > center { display: block; padding-top: 96px; }
html:is([data-skin="sg26"],#sg-skin) body #ann > center > .mb-25 { margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 16px; box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto; padding: 40px 40px 108px !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; text-align: center;
  background: radial-gradient(380px 280px at calc(100% - 60px) calc(100% + 60px), color-mix(in srgb, var(--brand-primary) var(--glow-a1), transparent), color-mix(in srgb, var(--sg-accent-2) var(--glow-a2), transparent) 58%, transparent 100%), var(--surface) !important;
}
/* lock tile (44, radius 13, raised surface) + the board's lock glyph on it */
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal::before { content: ""; width: 44px; height: 44px; border-radius: 13px; background: var(--tonal-bg); box-shadow: inset 0 1px 0 var(--border); }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal > center::before {
  content: ""; position: absolute; top: 51px; left: 50%; width: 22px; height: 22px; transform: translateX(-50%); background: var(--text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal > center big,
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal > center strong { font: 500 20px/26px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal br { display: none; }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert {
  --t: var(--t-danger); position: static; display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 12px 16px !important; text-align: left;
  border: 1px solid rgba(var(--t), .3) !important; border-radius: var(--r-inset) !important; background: rgba(var(--t), .1) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--status-danger);
  -webkit-mask: var(--sg-ic-alert-circle) center/100% 100% no-repeat; mask: var(--sg-ic-alert-circle) center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert big { font: 400 14px/22px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert .sg-help-link {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: inline-block; height: 44px; padding: 0 44px 0 24px; box-sizing: border-box; white-space: nowrap;
  border-radius: var(--r-full); background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest);
  font: 500 15px/44px var(--f) !important; text-decoration: none !important; text-transform: lowercase; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert .sg-help-link::first-letter { text-transform: uppercase; }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert .sg-help-link::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert .sg-help-link:hover { box-shadow: var(--sg-glow-hover); transform: translate(-50%, -1px); }
html:is([data-skin="sg26"],#sg-skin) body #ann .side-block .alert .sg-help-link:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #ann > center { padding-top: 24px; }
  html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal { padding: 32px 16px 100px !important; }
  html:is([data-skin="sg26"],#sg-skin) body #ann .side-block.is-title-reveal > center::before { top: 43px; }
}

/* =====================================================================================================================
   4. Social Reports (plugin social-reports, every user page shares .srep-* inside .srep-wrapper; scoped to pages with the tab bar so
      the admin settings/logs pages of group d are untouched). Boards ReportsOverview*, ReportsContent, ReportsCompetitors,
      ReportsBranding. CSS on the product markup. Chart colours: global since B4.3 (app.css), never set here.
   ===================================================================================================================== */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper { max-width: none !important; margin: 0 !important; padding: 0 0 68px !important; display: flex; flex-direction: column; gap: var(--gap-block); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* toolbar: account select + «Ultimo aggiornamento» caption on the left; «Genera PDF» secondary + «Raccogli dati» primary on the right */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-toolbar { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 0 !important; border: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-toolbar__left),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-toolbar__right){ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-account-switcher { display: flex; align-items: center; gap: 10px; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-account-switcher__label { margin: 0 !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-account-switcher select {
  height: 40px; min-width: 200px; padding: 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; background-color: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-last-updated { display: inline-flex; align-items: center; gap: 6px; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-toolbar .button--light-outline { background: var(--btn2-bg) !important; color: var(--btn2-fg) !important; border-color: transparent !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-toolbar .button--light-outline:hover { background: var(--btn2-bg-hover) !important; }
/* tabs = kit segmented .tabs (selected raised; Panoramica / Contenuti / Competitor / Branding) */
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs {
  align-self: flex-start; display: inline-flex !important; flex-wrap: wrap; gap: 2px; padding: 3px !important; border: 1px solid var(--border) !important; border-radius: var(--r-full) !important;
  background: var(--fill-2) !important; box-shadow: inset 0 1px 0 var(--hi) !important; max-width: 100%; box-sizing: border-box;
}
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs .srep-tab {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: var(--r-full) !important;
  background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; text-decoration: none; white-space: nowrap; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs .srep-tab:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs .srep-tab--active { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs .srep-tab:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .srep-tabs .srep-tab .mdi { font-size: 14px; color: inherit !important; }
/* alerts: info = card-alt, ok = success tint, warn = warning tint, err = danger tint (the inline good/warn left bar is replaced) */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert {
  --t: var(--t-info); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px !important; border: 1px solid rgba(var(--t), .3) !important; border-radius: var(--r-inset) !important;
  background: rgba(var(--t), .08) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert[style*="16a34a"], html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert--ok { --t: var(--t-success); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert[style*="f59e0b"], html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert--warn { --t: var(--t-warning); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert--err { --t: var(--t-danger); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert .mdi { color: rgb(var(--t)) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert--warn .mdi { color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-alert a { color: var(--brand-primary-text) !important; text-decoration: none; font-weight: 500; }
/* KPI cards: kit card 24; head = icon tile 36 + label 13/20; value 28/34 + delta badge (success / danger); the neutral delta repeats the value: hidden */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--gap-block) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-card),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-chart-box){
  margin: 0 !important; border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important; color: var(--text);
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card {
  display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 16px; padding: 24px !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__icon {
  order: 1; flex: none; display: grid !important; place-items: center; width: 36px !important; height: 36px !important; margin: 0 !important; border-radius: var(--r-md) !important; color: var(--sg-soft) !important; font-size: 18px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; box-shadow: inset 0 1px 0 var(--border) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__icon .mdi { color: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__label { order: 2; flex: 1 1 calc(100% - 48px); margin: 0 !important; font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__value { order: 3; margin: 0 !important; font: 500 28px/34px var(--f) !important; font-variant-numeric: tabular-nums; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__delta {
  order: 4; position: static !important; display: inline-flex; align-items: center; height: 22px; padding: 0 9px !important; border-radius: var(--r-full) !important; font: 500 12px/16px var(--f) !important; font-variant-numeric: tabular-nums;
  --t: var(--t-neutral); border: 1px solid rgba(var(--t), .3) !important; background: rgba(var(--t), .1) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card .srep-card__delta--neutral { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__delta--pos { --t: var(--t-success); color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-card__delta--neg { --t: var(--t-danger); color: var(--status-danger) !important; }
/* chart boxes: card 24, title 17/24 500, «Ultimi N giorni» caption on the right, empty = --text-3 */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-charts { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: var(--gap-block) !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-charts--2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box { padding: 24px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box__title { margin: 0 0 16px !important; font: 500 17px/24px var(--f) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box__sub { font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box__nodata { padding: 24px 0 !important; font: 400 14px/22px var(--f) !important; color: var(--text-3) !important; text-align: center; }
/* «Analisi crescita follower» + «Post con la performance migliore»: one product box -> the board's two cards side by side.
   The box turns transparent and becomes a 2-column grid; its ::before paints the left card behind title, caption and the 3 tiles,
   the impact block is the right card. */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box:has(> .srep-growth) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-block); align-items: start; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box:has(> .srep-growth)::before {
  content: ""; grid-column: 1; grid-row: 1 / 4; align-self: stretch; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--card-bg) padding-box, var(--card-edge) border-box; box-shadow: var(--card-shadow);
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > .srep-chart-box__title:is(.srep-growth, .srep-growth ~ *, :has(~ .srep-growth)){ grid-column: 1; grid-row: 1; margin: 0 !important; padding: 24px 24px 0; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > .srep-chart-box__sub:is(.srep-growth, .srep-growth ~ *, :has(~ .srep-growth)){ grid-column: 1; grid-row: 1; justify-self: end; padding: 28px 24px 0; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > .srep-growth:is(.srep-growth, .srep-growth ~ *, :has(~ .srep-growth)){ grid-column: 1; grid-row: 2; margin: 20px 24px 24px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > .srep-impact:is(.srep-growth, .srep-growth ~ *, :has(~ .srep-growth)){
  grid-column: 2; grid-row: 1 / 4; align-self: stretch; margin: 0 !important; padding: 24px !important;
  border: 1px solid transparent !important; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip {
  display: flex !important; flex-direction: column-reverse; gap: 6px; margin: 0 !important; padding: 16px 20px !important; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important;
  background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip__lbl { font: 400 12px/16px var(--f) !important; color: var(--text-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip__val { font: 500 28px/34px var(--f) !important; font-variant-numeric: tabular-nums; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip--pos .srep-growth-chip__val { color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip--neg .srep-growth-chip__val { color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__label { display: block; margin: 0 0 20px !important; font: 500 17px/24px var(--f) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__label .mdi { display: none; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__card { display: flex !important; align-items: flex-start; gap: 16px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-decoration: none; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__thumb { width: 104px !important; height: 104px !important; flex: none; border-radius: 12px !important; background-color: var(--surface-alt) !important; background-size: cover; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__thumb--empty {
  display: grid !important; place-items: center; color: var(--sg-soft) !important; font-size: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__caption { margin: 0 0 12px !important; font: 400 14px/22px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font: 500 13px/18px var(--f) !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__stats .mdi { color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-impact__eng { color: var(--brand-primary-text) !important; }
/* «Prossime azioni per crescere»: the section title sits inside its card (board); rows = numbered, title 14/20 500, detail 13/20 */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section {
  margin: 0 !important; padding: 0 !important; border: 0 !important; font: 500 20px/26px var(--f) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section::after, html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section:has(+ .srep-chart-box) { position: relative; z-index: 1; padding: 24px 24px 0 !important; margin-bottom: calc(-1 * (var(--gap-block) + 50px)) !important; font: 500 17px/24px var(--f) !important; pointer-events: none; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box { padding-top: 64px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box > div[style*="border-bottom"] { padding: 14px 0 !important; border-bottom: 1px solid var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box > div[style*="border-bottom"]:first-child { border-top: 1px solid var(--border); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box > div > div > div[style*="font-weight:600"] { font: 500 14px/20px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box > div > div > div[style*="font-weight:600"] .mdi { display: none; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-muted { font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; opacity: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .sg-srep-step { width: 28px !important; height: 28px !important; flex-basis: 28px !important; background: var(--surface-raised) !important; border: 1px solid var(--border-2) !important; color: var(--text) !important; font: 500 12px/16px var(--f) !important; }
/* impact badge: «Alto impatto» = accent outline, «Vittoria rapida» = neutral outline */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box :is(.srep-card__delta--pos),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box :is(.srep-card__delta--neutral){
  display: inline-flex !important; align-items: center; height: 24px; padding: 0 10px !important; border-radius: var(--r-full) !important; font: 500 12px/16px var(--f) !important; text-transform: none !important;
  border: 1px solid var(--border-2) !important; background: transparent !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box .srep-card__delta--pos { border-color: color-mix(in srgb, var(--sg-accent-2) 38%, transparent) !important; background: var(--brand-primary-subtle) !important; color: var(--sg-soft) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > div[style*="margin-top:14px"] { border-top-color: var(--border) !important; }
/* shared bits of the other report tabs: tables, AI cards, empty state */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-ai-card { padding: 16px !important; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-ai-card__title { font: 500 14px/20px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-ai-card__body { font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body .srep-empty { padding: 40px 24px !important; border: 1px dashed var(--border-dash) !important; border-radius: var(--r-lg) !important; background: var(--fill-1) !important; color: var(--text-2) !important; text-align: center; }
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-charts--2col { grid-template-columns: minmax(0, 1fr) !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box:has(> .srep-growth) { grid-template-columns: minmax(0, 1fr); row-gap: var(--gap-block); }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-chart-box > .srep-impact:is(.srep-growth, .srep-growth ~ *, :has(~ .srep-growth)){ grid-column: 1; grid-row: 4; }
}
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cards { grid-template-columns: minmax(0, 1fr) !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-card):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-chart-box:not(:has(> .srep-growth))){ padding: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box:not(:has(> .srep-growth)) { padding-top: 56px !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section:has(+ .srep-chart-box) { padding: 16px 16px 0 !important; margin-bottom: calc(-1 * (var(--gap-block) + 40px)) !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth { grid-template-columns: minmax(0, 1fr); }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-growth-chip__val { font-size: 24px !important; line-height: 30px !important; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-tabs .srep-tab { height: 36px; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-toolbar__right { width: 100%; }
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-toolbar__right > * { flex: 1; }
}

/* 4.1 Report tabs Contenuti / Competitor: section label = the board's eyebrow when the box carries its own title; post switch = kit
       segmented; post cards = card-alt; type and hashtag bars = accent track/fill (the product's violet hashtag gradient is out, GL-003 §7.7.6) */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section:has(+ .srep-chart-box > .srep-chart-box__title) { font: 400 13px/18px var(--f) !important; color: var(--text-2) !important; margin-bottom: calc(-1 * (var(--gap-block) + 42px)) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-section + .srep-chart-box:has(> .srep-chart-box__title) { padding-top: 48px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postswitch { display: inline-flex !important; gap: 2px; margin-bottom: 20px; padding: 3px !important; border: 1px solid var(--border) !important; border-radius: var(--r-full) !important; background: var(--fill-2) !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postswitch__btn { height: 30px; padding: 0 14px !important; border: 0 !important; border-radius: var(--r-full) !important; background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; cursor: pointer; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postswitch__btn:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postswitch__btn--active { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postswitch__btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postgallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postcard { overflow: hidden; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postcard__thumb { border-radius: 0 !important; background-color: var(--surface-raised) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postcard__thumb--empty {
  color: var(--sg-soft) !important; background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postcard__meta { font: 500 12px/16px var(--f) !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-postcard__eng { color: var(--brand-primary-text) !important; font: 500 13px/18px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-rank { background: var(--surface-raised) !important; color: var(--text) !important; border: 1px solid var(--border-2) !important; font: 500 12px/16px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-rank--1),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-rank--2),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-rank--1),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-rank--2),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-rank--3){ background: var(--sg-gradient-fill) !important; color: var(--brand-on-primary) !important; border-color: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-typebar-label),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-uses),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-pct),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-typebar-value){ font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-hash-tag { font: 500 14px/20px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-typebar-track),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-bar),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-compare-track),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-cmp-bar){ background: var(--fill-3) !important; border-radius: var(--r-full) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-typebar-fill):not(sg-p0),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-bar i),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-compare-fill):not(sg-p0){ border-radius: var(--r-full) !important; background: var(--sg-gradient) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-hash-row),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-cmp-row){ border-color: var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-comp-card),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-cmp){ border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-ugc-empty { padding: 32px 24px !important; border: 1px dashed var(--border-dash) !important; border-radius: var(--r-inset) !important; background: var(--fill-1) !important; color: var(--text-2) !important; text-align: center; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-heatmap__cell { border-radius: 4px !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-heatmap__day),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-heatmap__hour){ font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }

/* 3.2 Engagement Boost: no violet, explicitly (GL-003 §7.7.6; coordinator 2026-10-10, B4.3 note). The product's own <style> paints the hero
       rgba(139,92,246,.10), the hero icon #3b82f6 -> #8b5cf6 and the «Totale speso» KPI icon rgba(139,92,246,.15) / #a78bfa. All three are
       already replaced by 3. above; these rules name them so a later edit cannot bring them back. */
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero { background: transparent !important; border-color: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-hero .gr-hero-icon { background: var(--sg-gradient-fill) !important; color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body #ann .gr-kpi-card .kpi-icon:is(.purple, .amber, .green) { background: transparent !important; color: var(--text-2) !important; }
/* competitor table rows (legacy navy) -> card-alt rows; «tu» row = accent subtle; head = caption --text-3 */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-row { background: var(--surface-alt) !important; border: 1px solid var(--border) !important; border-radius: var(--r-inset) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-row--self { background: var(--brand-primary-subtle) !important; border-color: color-mix(in srgb, var(--sg-accent-2) 30%, transparent) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-head { font: 500 12px/16px var(--f) !important; color: var(--text-3) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-cmp-av),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-comp-card__avatar){ background: var(--surface-raised) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-youtag { background: var(--brand-primary-subtle) !important; color: var(--sg-soft) !important; border-radius: var(--r-full) !important; }

/* 4.2 Report branding (board ReportsBranding, /e/social-reports/branding): column 720 left-aligned; plain back link; title 20/26; one card
       holding intro, fields, help, logo preview, and the actions under a hairline (primary on the right). Scoped by the back link, which the
       admin settings page (group d) does not have. */
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-wrapper--narrow { max-width: 720px !important; margin: 0 !important; padding: 0 0 68px !important; display: flex; flex-direction: column; gap: 20px; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-wrapper--narrow > * { margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-wrapper--narrow .srep-tab {
  align-self: flex-start; display: inline-flex !important; align-items: center; gap: 6px; height: auto; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  font: 400 13px/20px var(--f) !important; color: var(--text-2) !important; text-decoration: none;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-wrapper--narrow .srep-tab:hover { color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-section { margin: 0 !important; padding: 0 !important; border: 0 !important; font: 500 20px/26px var(--f) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-section::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-settings-form {
  display: flex; flex-direction: column; gap: 20px; margin: 0 !important; padding: 24px !important; border: 1px solid transparent !important; border-radius: var(--r-lg) !important;
  background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-settings-section { display: flex; flex-direction: column; gap: 20px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-settings-section > .srep-form-help { margin: 0 !important; font: 400 14px/22px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row label { margin: 0 !important; font: 500 13px/18px var(--f) !important; color: var(--text) !important; text-transform: none !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row input[type="text"] {
  width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; background: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row input[type="text"]:focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row .srep-form-help { font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-row img { border-radius: var(--r-md); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-form-actions { display: flex; justify-content: flex-end; margin: 0 !important; padding: 20px 0 0 !important; border-top: 1px solid var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-alert { --t: var(--t-info); display: flex; gap: 10px; padding: 12px 16px !important; border: 1px solid rgba(var(--t), .3) !important; border-radius: var(--r-inset) !important; background: rgba(var(--t), .08) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-alert--ok { --t: var(--t-success); }
html:is([data-skin="sg26"],#sg-skin) body.sghas-c5af5775 .srep-alert--err { --t: var(--t-danger); }

/* 4.3 Report for print (board ReportsPrint; override skin/views/plugins/social-reports/views/report.php): centred A4 sheets 794 x 1123,
       padding 56, gap 24; screen-only action bar; fixed dark like the code. Below 768 the sheets become fluid cards and wide blocks
       scroll in their own box (board v5.1). Print: no bar, one sheet per page, no shadows. */
html[data-skin="sg26"] body .sg-root.rpt-root { min-height: 100vh; box-sizing: border-box; padding: 32px var(--pad-page) 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; background: var(--bg); color: var(--text); font-family: var(--f); }
html[data-skin="sg26"] body .rpt-root .rpt-bar { width: 100%; max-width: 794px; display: flex; justify-content: flex-end; }
html[data-skin="sg26"] body .rpt-root .rpt-main { width: 100%; max-width: 794px; display: flex; flex-direction: column; gap: 32px; }
html[data-skin="sg26"] body .rpt-root .rpt-page {
  width: 100%; min-height: 1123px; box-sizing: border-box; padding: 56px; display: flex; flex-direction: column; gap: 24px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 4px; box-shadow: inset 0 1px 0 var(--hi), var(--shadow-lg);
}
html[data-skin="sg26"] body .rpt-root .rpt-head { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-2); }
html[data-skin="sg26"] body .rpt-root .rpt-head__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-skin="sg26"] body .rpt-root .rpt-logo { height: 24px; width: auto; max-width: 220px; object-fit: contain; display: block; }
html[data-skin="sg26"] body .rpt-root .rpt-wordmark { font: 500 17px/24px var(--f); color: var(--text); }
html[data-skin="sg26"] body .rpt-root .rpt-acct { font: 500 14px/20px var(--f); color: var(--text); }
html[data-skin="sg26"] body .rpt-root .rpt-head__title { display: flex; flex-direction: column; gap: 4px; }
html[data-skin="sg26"] body .rpt-root .rpt-blk { display: flex; flex-direction: column; gap: 12px; }
html[data-skin="sg26"] body .rpt-root .rpt-blk__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
html[data-skin="sg26"] body .rpt-root :is(.rpt-kpis),
html[data-skin="sg26"] body .rpt-root :is(.rpt-stat3){ margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html[data-skin="sg26"] body .rpt-root .rpt-stat3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-skin="sg26"] body .rpt-root .rpt-kpis > div,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 > div{ padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
html[data-skin="sg26"] body .rpt-root .rpt-kpis dt,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 dt{ font: 400 12px/16px var(--f); color: var(--text-2); }
html[data-skin="sg26"] body .rpt-root .rpt-kpis dd,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 dd{ margin: 0; font: 500 28px/34px var(--f); font-variant-numeric: tabular-nums; color: var(--text); }
html[data-skin="sg26"] body .rpt-root .rpt-kpis dd.up,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 dd.up{ color: var(--status-success); }
html[data-skin="sg26"] body .rpt-root .rpt-kpis dd.down,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 dd.down{ color: var(--status-danger); }
html[data-skin="sg26"] body .rpt-root .rpt-chart { margin: 0; }
html[data-skin="sg26"] body .rpt-root .rpt-chart svg { display: block; width: 100%; height: auto; }
/* bars: track --border, fill neutral --text-3; content and «tu» = accent gradient (blue -> azure, never violet) */
html[data-skin="sg26"] body .rpt-root .rpt-bar-track { height: 8px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
html[data-skin="sg26"] body .rpt-root .rpt-bar-track > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--text-3); }
html[data-skin="sg26"] body .rpt-root .acc.rpt-bar-track > span,
html[data-skin="sg26"] body .rpt-root .me.rpt-bar-track > span{ background: linear-gradient(90deg, var(--brand-primary), var(--sg-accent-2)); }
html[data-skin="sg26"] body .rpt-root .rpt-type { display: flex; flex-direction: column; gap: 12px; }
html[data-skin="sg26"] body .rpt-root .rpt-type li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px 48px; align-items: center; gap: 12px; }
html[data-skin="sg26"] body .rpt-root .r { text-align: right; font-variant-numeric: tabular-nums; }
/* heatmap: 6 levels of the accent on --surface-alt */
html[data-skin="sg26"] body .rpt-root .rpt-hm-wrap { margin: 0; }
html[data-skin="sg26"] body .rpt-root .rpt-hm { display: grid; grid-template-columns: 72px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
html[data-skin="sg26"] body .rpt-root .rpt-hm > span { display: block; height: 18px; border-radius: 3px; }
html[data-skin="sg26"] body .rpt-root .rpt-hm > span:is(.dl, .hl) { height: auto; background: none; font: 400 12px/16px var(--f); color: var(--text-3); }
html[data-skin="sg26"] body .rpt-root .rpt-hm > span.hl { text-align: center; }
html[data-skin="sg26"] body .rpt-root .l0 { background: var(--surface-alt); }
html[data-skin="sg26"] body .rpt-root .l1 { background: color-mix(in srgb, var(--brand-primary) 20%, var(--surface-alt)); }
html[data-skin="sg26"] body .rpt-root .l2 { background: color-mix(in srgb, var(--brand-primary) 38%, var(--surface-alt)); }
html[data-skin="sg26"] body .rpt-root .l3 { background: color-mix(in srgb, var(--brand-primary) 56%, var(--surface-alt)); }
html[data-skin="sg26"] body .rpt-root .l4 { background: color-mix(in srgb, var(--brand-primary) 78%, var(--surface-alt)); }
html[data-skin="sg26"] body .rpt-root .l5 { background: var(--brand-primary); }
html[data-skin="sg26"] body .rpt-root .rpt-scale { display: flex; align-items: center; gap: 6px; }
html[data-skin="sg26"] body .rpt-root .rpt-scale__steps { display: inline-flex; gap: 3px; }
html[data-skin="sg26"] body .rpt-root .rpt-scale__steps > span { width: 16px; height: 8px; border-radius: 2px; }
/* tables (top posts, hashtags) */
html[data-skin="sg26"] body .rpt-root .rpt-tbl { width: 100%; border-collapse: collapse; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl th { text-align: left; font: 500 12px/16px var(--f); letter-spacing: .02em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border-2); background: transparent; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl th.n { width: 32px; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl th.w38 { width: 38%; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl th.r { text-align: right; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); font: 400 13px/20px var(--f); color: var(--text); vertical-align: middle; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl tr:last-child td { border-bottom: 0; }
html[data-skin="sg26"] body .rpt-root .rpt-tbl .label { font: 500 13px/18px var(--f); }
html[data-skin="sg26"] body .rpt-root .rpt-barcell { display: flex; align-items: center; gap: 10px; }
html[data-skin="sg26"] body .rpt-root .rpt-barcell .rpt-bar-track { flex: 1; }
html[data-skin="sg26"] body .rpt-root .rpt-barcell .num { width: 40px; text-align: right; }
html[data-skin="sg26"] body .rpt-root .rpt-thumb { display: block; width: 40px; height: 40px; border-radius: 6px; background-size: cover; background-position: center;
  background-color: var(--surface-raised); background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 45%, var(--surface-raised)), color-mix(in srgb, var(--sg-accent-2) 40%, var(--surface-raised))); }
html[data-skin="sg26"] body .rpt-root .rpt-thumb[style] { background-color: var(--surface-raised); }
html[data-skin="sg26"] body .rpt-root .rpt-thumb-link { display: inline-block; border-radius: 6px; }
html[data-skin="sg26"] body .rpt-root .rpt-thumb-link:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body .rpt-root .rpt-soft { color: var(--sg-soft); }
/* competitors */
html[data-skin="sg26"] body .rpt-root .rpt-fc { display: flex; flex-direction: column; gap: 10px; }
html[data-skin="sg26"] body .rpt-root .rpt-fc li { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
html[data-skin="sg26"] body .rpt-root .rpt-fc__me { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-skin="sg26"] body .rpt-root .rpt-me-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--r-full); background: var(--sg-gradient-fill); color: var(--brand-on-primary); font: 500 12px/16px var(--f); }
html[data-skin="sg26"] body .rpt-root .rpt-legend { display: flex; flex-wrap: wrap; gap: 16px; }
html[data-skin="sg26"] body .rpt-root .rpt-legend > span { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px var(--f); color: var(--text-2); }
html[data-skin="sg26"] body .rpt-root .rpt-legend__dot { width: 22px; height: 3px; border-radius: 2px; }
html[data-skin="sg26"] body .rpt-root .rpt-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-2); text-align: center; font: 400 12px/16px var(--f); color: var(--text-3); }
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body .rpt-root .rpt-page { min-height: 0; padding: 24px 16px; gap: 20px; }
  html[data-skin="sg26"] body .rpt-root .rpt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-skin="sg26"] body .rpt-root .rpt-hm { min-width: 560px; }
  html[data-skin="sg26"] body .rpt-root .r-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
  html[data-skin="sg26"] body .rpt-root .r-scroll > .rpt-tbl { min-width: 480px; }
  html[data-skin="sg26"] body .rpt-root .rpt-type li { grid-template-columns: 76px minmax(0, 1fr) 52px 40px; gap: 8px; }
  html[data-skin="sg26"] body .rpt-root .rpt-fc li { grid-template-columns: 128px minmax(0, 1fr) 56px; }
  html[data-skin="sg26"] body .rpt-root .rpt-fc .rpt-me-tag { display: none; }
  html[data-skin="sg26"] body .rpt-root .rpt-kpis dd,
html[data-skin="sg26"] body .rpt-root .rpt-stat3 dd{ font-size: 24px; line-height: 30px; }
}
@media print {
  html[data-skin="sg26"] body .rpt-root { padding: 0; gap: 0; }
  html[data-skin="sg26"] body .rpt-root .rpt-bar { display: none; }
  html[data-skin="sg26"] body .rpt-root .rpt-main { gap: 0; max-width: none; }
  html[data-skin="sg26"] body .rpt-root .rpt-page { border: 0; border-radius: 0; box-shadow: none; break-after: page; }
  html[data-skin="sg26"] body .rpt-root .rpt-page:last-child { break-after: auto; }
}

/* 4.4 Two-up rows (boards ReportsContent: [tipi 4 | mappa 8], [hashtag 7 | UGC 5]; ReportsCompetitors: [benchmark 6 | follower a confronto 6]).
       The wrapper becomes a 12-column dense grid on these two tabs only; every child spans the row unless placed below. Pairs are found
       by their content, not by position. Inside the grid a section label keeps the «title inside the card» look like this: its own row
       collapses to 0 (margin-bottom) and the card under it pulls up one gap (negative margin-top), so the label sits on the card's top edge. The heatmap
       (no label of its own) pulls up the same way, in the same row as the content-types card. */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) {
  display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--gap-block); align-items: stretch;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > * { grid-column: 1 / -1; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > :is(.srep-toolbar),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > :is(.srep-tabs){ justify-self: stretch; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > .srep-tabs { justify-self: start; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper.srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > .srep-section:has(+ .srep-chart-box) {
  align-self: start; margin-bottom: -400px !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper.srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > .srep-section + .srep-chart-box { margin-top: calc(-1 * var(--gap-block)) !important; }
/* Contenuti: content types (4) | heatmap (8, spans the label row and the card row) */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > .srep-chart-box:has(> .srep-typebars) { grid-column: 1 / 5; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > .srep-typebars) > .srep-chart-box:has(> .srep-heatmap) { grid-column: 5 / -1; margin-top: calc(-1 * var(--gap-block)) !important; }
/* Contenuti: hashtag (7) | UGC (5) = the section + box pair right after the hashtag box */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-section:has(+ .srep-chart-box > .srep-hash)),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-chart-box:has(> .srep-hash)):not(.sg-p0){ grid-column: 1 / 8; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > .srep-chart-box:has(> .srep-hash) + .srep-section,
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > .srep-chart-box:has(> .srep-hash) + .srep-section + .srep-chart-box { grid-column: 8 / -1; }
/* Competitor: benchmark (6) | follower a confronto (6) */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-section:has(+ .srep-chart-box + .srep-section + .srep-chart-box > .srep-compare)),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-chart-box:has(+ .srep-section + .srep-chart-box > .srep-compare)):not(.sg-p0){ grid-column: 1 / 7; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-section:has(+ .srep-chart-box > .srep-compare)),
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper > :is(.srep-chart-box:has(> .srep-compare)):not(.sg-p0){ grid-column: 7 / -1; }
/* the competitor cards: up to 3 per row as on the board */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-comp-cards { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap-block) !important; }
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-wrapper:has(> .srep-chart-box > :is(.srep-heatmap, .srep-compare)) { grid-auto-flow: row; }
}

/* 1.13 Trial popup (board AiTrialLocked; reactions-trial-guard trial-popup.js builds .sg-trial-modal inside .hc-modal, always dark):
        left-aligned 460 modal; rocket tile 44; title 20/26; text 14/22 muted; benefits with tinted check circles; note 12/16;
        «Non ora» ghost + «Attiva un pacchetto» primary in a row on the right. Same elements and handlers, CSS order only. */
html:is([data-skin="sg26"],#sg-skin) body .hc-modal.sg-trial-modal {
  position: relative; width: 460px !important; max-width: calc(100vw - 32px) !important; padding: 0 !important; box-sizing: border-box; text-align: left !important;
  border: 1px solid var(--border-2) !important; border-radius: var(--r-xl) !important; background: var(--modal-bg) !important; box-shadow: var(--shadow-lg) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-body {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 16px; align-items: center; padding: 22px 24px !important; text-align: left !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-body > * { grid-column: 1 / -1; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-icon {
  grid-column: 1; justify-self: start; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; border-radius: 13px !important; color: var(--sg-soft) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sg-accent-2) var(--tile-a1), transparent), color-mix(in srgb, var(--brand-primary) var(--tile-a2), transparent)) !important; box-shadow: inset 0 1px 0 var(--border) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-icon .mdi { font-size: 0 !important; width: 22px; height: 22px; display: block; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-icon .mdi::before {
  content: "" !important; display: block; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.350 22.350 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.350 22.350 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-title { font: 500 20px/26px var(--f) !important; color: var(--text) !important; text-align: left !important; letter-spacing: -.01em; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-sub { margin-top: -10px !important; font: 400 14px/22px var(--f) !important; color: var(--text-muted) !important; text-align: left !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-benefits { display: flex; flex-direction: column; gap: 10px; padding: 0 !important; list-style: none; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-benefits li { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; font: 400 14px/22px var(--f) !important; color: var(--text) !important; text-align: left; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-benefits .mdi {
  flex: none; display: grid !important; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; font-size: 11px !important; color: var(--sg-soft) !important;
  background: color-mix(in srgb, var(--sg-accent-2) 14%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sg-accent-2) 30%, transparent);
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-note { order: 5; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; text-align: left !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal :is(.sg-trial-primary),
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal :is(.sg-trial-secondary){
  display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 40px; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box;
  border: 1px solid transparent !important; border-radius: var(--r-full) !important; font: 500 14px/20px var(--f) !important; text-decoration: none; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-secondary { order: 6; grid-column: 2; background: transparent !important; color: var(--text-2) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-secondary:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-primary { order: 7; grid-column: 3; background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-primary:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal :is(.sg-trial-primary):focus-visible,
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal :is(.sg-trial-secondary):focus-visible,
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal :is(.sg-trial-close):focus-visible{ outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-close {
  position: absolute !important; top: 28px !important; right: 24px !important; display: grid !important; place-items: center; width: 32px !important; height: 32px !important; padding: 0 !important;
  border: 0 !important; border-radius: var(--r-full) !important; background: transparent !important; color: var(--text-2) !important; font-size: 16px; z-index: 2;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-close:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
@media (max-width: 480px) {
  html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-secondary { grid-column: 1; height: 44px; }
  html:is([data-skin="sg26"],#sg-skin) body .sg-trial-modal .sg-trial-primary { grid-column: 2; height: 44px; }
}

/* 1.14 Activity log with data (board AiLog). The client feed (smart-targets activity-feed.js: .st-clientlog-*) and the server log rows
        (.react-log-list-item) are rebuilt by JS every 10 s: CSS only. «Oggi» = neutral chips; feed rows = hairline rows with a 32 icon
        tile (warning tint for «warn»), text 14/22, time 12/16 --text-3; log rows = the same row with a tonal tile instead of the
        legacy 60px gradient circle, meta 12/16 --text-3. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-today { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-today-label { font: 500 13px/18px var(--f) !important; color: var(--text) !important; margin-right: 4px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-chip {
  display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  border: 1px solid var(--border-2) !important; background: var(--fill-3) !important; color: var(--text-2) !important; font: 400 13px/18px var(--f) !important; font-variant-numeric: tabular-nums;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-item {
  display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-icon {
  flex: none; display: grid !important; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); font-size: 16px !important; color: var(--sg-soft) !important;
  background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-item--warn .st-clientlog-icon { --t: var(--t-warning); color: var(--status-warning) !important; background: rgba(var(--t), .1); box-shadow: inset 0 0 0 1px rgba(var(--t), .3); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-text { flex: 1; min-width: 0; font: 400 14px/22px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .st-clientlog-time { flex: none; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item {
  position: relative; margin: 0 !important; padding: 12px 0 12px 44px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; min-height: 0 !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item > .clearfix { min-height: 32px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .circle {
  position: absolute !important; left: 0; top: 12px; float: none !important; width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: var(--r-md) !important;
  background: var(--surface-alt) !important; box-shadow: inset 0 0 0 1px var(--border) !important; overflow: hidden; color: var(--sg-soft);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .circle .img { width: 100%; height: 100%; border-radius: inherit; background-size: cover; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .circle .log-notice {
  position: absolute; inset: 0; margin: auto; width: 16px !important; height: 16px !important; font-size: 0 !important; background: currentColor !important;
  -webkit-mask: var(--sg-ic-eye) center/100% 100% no-repeat; mask: var(--sg-ic-eye) center/100% 100% no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .circle .log-notice::before,
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .circle .log-notice::after { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .inner { padding: 0 !important; min-height: 32px; display: flex; flex-direction: column; justify-content: center; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .inner .action { font: 400 14px/22px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .inner .meta { margin: 2px 0 0 !important; font: 400 12px/16px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .react-log-list-item .inner .meta .mdi { display: none; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .activity-data .react-log-list + * { font: 400 12px/16px var(--f); color: var(--text-3); }

/* 1.15 Messages: function picker as option cards (board AiMessages). Cards built by skin/js/pages/ai-support.js over the product
        <select name="function">, which stays in the DOM (hidden) as the source of truth. 2 columns (1 on phone), 40px rows, radio ring,
        selected = accent subtle + accent border (selection = accent, GL-003 §7.3), AI options carry the sparkle. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro select.ais-fnselect-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; white-space: nowrap;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 14px; box-sizing: border-box; text-align: left; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--r-inset); background: var(--input-bg); color: var(--text); font: 400 14px/20px var(--f); transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard:hover { border-color: var(--border-hover); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard:disabled { opacity: .5; cursor: not-allowed; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard__radio { flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard__label { flex: 1; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard__ai { flex: none; display: inline-flex; color: var(--sg-soft); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard.is-on { border-color: color-mix(in srgb, var(--brand-primary-text) 70%, transparent); background: var(--brand-primary-subtle); box-shadow: inset 0 1px 0 var(--hi); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard.is-on .ais-fncard__radio { border-color: var(--brand-primary); background: var(--brand-primary); }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard.is-on .ais-fncard__radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-on-primary); }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncards { grid-template-columns: minmax(0, 1fr); }
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .ais-fncard { min-height: 44px; }
}

/* 2.10 WaPreferences (board WaPreferences; /e/support-ticket/wa-preferences, standalone, logged-out, FIXED LIGHT, served CSS-only by the
        URL-scoped buffer A285.5). The controller includes the view directly, so no override: the product markup (.card .logo|.brand h1 p
        .state .banner form .btn-out|.btn-in .otp .foot) is restyled here. Scope: the only page with body > .card > p.otp.
        The page does not load core.css, so the platform «Timeable» faces are declared here with core.css A268's exact URLs and ?v
        (shared cache, no second download). */
@font-face { font-family: "Timeable"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/sf-pro/sf-pro-display-regular.woff2?v=22.0d5e4") format("woff2"); }
@font-face { font-family: "Timeable"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/sf-pro/sf-pro-display-medium.woff2?v=22.0d5e4") format("woff2"); }
@font-face { font-family: "Timeable"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/sf-pro/sf-pro-display-semibold.woff2?v=22.0d5e4") format("woff2"); }
html[data-skin="sg26"]:is(.sghas-98212862, sg-p0.sg-p0.sg-p0:not(sg-p0)) { background: var(--bg); }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) { margin: 0; padding: 48px 16px; box-sizing: border-box; min-height: 100vh; background: var(--bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) > .card {
  display: flex; flex-direction: column; gap: 14px; max-width: 430px; margin: 0 auto !important; padding: 32px 28px !important; box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) > .card > * { margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .logo { text-align: center; padding-bottom: 6px; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .logo img { max-height: 22px !important; max-width: 180px !important; filter: var(--logo-filter); }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .brand { text-align: center; font: 500 15px/20px var(--f) !important; color: var(--text) !important; letter-spacing: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) h1 { font: 500 19px/26px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .card > p { font: 400 13px/20px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .card > p.state { font: 600 13px/18px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .card > p:is(.otp, .foot) { font: 400 12px/18px var(--f) !important; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .banner {
  --t: var(--t-success); padding: 12px 14px !important; border-radius: var(--r-inset) !important; border: 1px solid rgba(var(--t), .3) !important; background: rgba(var(--t), .1) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .banner-h { font: 500 14px/20px var(--f) !important; color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) .banner-p { font: 400 13px/20px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn {
  display: flex !important; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 22px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  font: 500 15px/20px var(--f) !important; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn-out { --t: var(--t-danger); border: 1px solid rgba(var(--t), .3) !important; background: rgba(var(--t), .1) !important; color: var(--status-danger) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn-out:hover { background: rgba(var(--t), .16) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn-in { border: 1px solid transparent !important; background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest) !important; }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn-in:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) form .btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
@media (max-width: 480px) {
  html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) { padding: 20px 16px; }
  html:is([data-skin="sg26"],#sg-skin) body:is(.sghas-98212862, sg-p0.sg-p0.sg-p0) > .card { padding: 26px 20px !important; }
}
/* «Confronto metriche principali» bars (Vera LOW): every series on the brand palette; the own row = the board's «me» bar (accent gradient), never status green */
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-bar i { background: var(--text-3) !important; border-radius: var(--r-full) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 .srep-cmp-bar i.srep-cmp-bar--self { background: linear-gradient(90deg, var(--brand-primary), var(--sg-accent-2)) !important; }

/* [FIX 2026-10-11, Angelo «Reactions si vede malissimo»] leftovers found by the full Reactions matrix (both modes, groups open/closed,
   1920/1440/390, dark/light):
   - «Etichette» (selectize) kept the legacy dark field #111114 in light: the kit field on --input-bg + --border-strong in both themes;
   - stats chart: the legacy grey container and ApexCharts svg background #424242 (series colours stay with B4.3: only the canvas here);
   (group heads, switches and «Guida»: B4.15, global). */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-control .selectize-input {
  min-height: 40px; padding: 8px 12px !important; box-sizing: border-box; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important;
  background: var(--input-bg) !important; box-shadow: none !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-control .selectize-input input { color: var(--text) !important; font: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-control .selectize-input input::placeholder { color: var(--text-3) !important; opacity: 1; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-control .selectize-input.focus { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-dropdown { border: 1px solid var(--menu-line) !important; border-radius: var(--r-menu) !important; background: var(--surface-raised) !important; color: var(--text) !important; box-shadow: var(--shadow-lg) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .selectize-dropdown .active { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .chart-container { background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .apexcharts-svg { background: transparent !important; }
/* f1017srep:begin */
/* [SG-PATCH 2026-10-17 | Felix] Social Reports tab bar on the phone (Angelo 17/10, Android 412): tabs were 2px apart, so «Panoramica»
   touched the active pill, and the bar only scrolled on one page group (body.sghas-8dbfb918), elsewhere «Competitor» was cut off.
   Every page with the bar: one row, 8px between tabs, 12px side padding, sideways scroll with no scrollbar. Desktop untouched. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) div.srep-tabs:not(#sg-p0) { flex-wrap: nowrap !important; gap: 8px !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) div.srep-tabs:not(#sg-p0)::-webkit-scrollbar { display: none; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) div.srep-tabs > a.srep-tab:not(#sg-p0):not(.sg-p0) { flex: 0 0 auto !important; padding: 0 12px !important; margin: 0 !important; white-space: nowrap !important; }
}
/* f1017srep:end */
/* f1017rp:begin */
/* [SG-PATCH 2026-10-17 | Felix] Reactions account list (Angelo 17/10): «Inattivo» (a bare .status, no colour class) is not an error, so
   muted text and a grey dot (the ring takes currentColor); red stays on .color-red / .color-danger. «Re-login richiesto!» (.ac-status) is
   as wide as its content. Phone: the mass-action pills (Azioni di Massa / Filtri) are compact and several share a row. */
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > .status:not([class*="color-"]) { color: var(--text-muted) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.status),
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.ac-status){ display: inline-flex !important; width: fit-content !important; max-width: 100%; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all:not(.none):not(#sg-p0) { display: flex !important; flex-wrap: wrap; gap: 8px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all > .pos-r:not(#sg-p0) { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all .pos-r > :is(a, button).button:not(#sg-p0):not(.sg-p0) { display: inline-flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; height: 36px !important; min-height: 36px !important; padding: 8px 12px !important; margin: 0 !important; font: 500 14px/20px var(--f) !important; box-sizing: border-box; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all .pos-r > a.button:not(#sg-p0) :is(.icon),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all .pos-r > button.button:not(#sg-p0) :is(.icon),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all .pos-r > a.button:not(#sg-p0) :is(.mdi),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) .rp-task-actions-all .pos-r > button.button:not(#sg-p0) :is(.mdi){ font-size: 1em !important; }
}
/* f1017rp:end */
/* f1017rx:begin */
/* [SG-PATCH 2026-10-17 | Felix] Reactions on the phone (Angelo 17/10). One button size for the whole plugin, taken from the «Targeting»
   section toggle (.rp-targeting-toggler.rp-toggler-button at 375: 36px high, 14px/20px, 500, padding 7px 14px, full radius, 1px edge).
   Covered: every .button in the account page and the aside (Pausa, Salva, Continua, Scarica…, Copia/Inserisci impostazioni, Salva come
   preset, Svuota automazione, the mass actions), the section togglers (*-toggler-button), «Tutorial» and «Indietro». Icon-only
   buttons (.lbutton, .robi-learn-btn) keep their size. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.button):not(.lbutton):not(.robi-learn-btn):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(button.button):not(.lbutton):not(.robi-learn-btn):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.rx-tutorial-btn):not(.lbutton):not(.robi-learn-btn):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(.back-button-wh > a):not(.lbutton):not(.robi-learn-btn):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is([class*="-toggler-button"]):not(sg-p0):not(.lbutton):not(.robi-learn-btn):not(#sg-p0):not(.sg-p0){ height: 36px !important; min-height: 36px !important; padding-top: 7px !important; padding-bottom: 7px !important; padding-left: 14px !important; font: 500 14px/20px var(--f) !important; border-radius: var(--r-full) !important; box-sizing: border-box !important; white-space: nowrap; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.button):not(.lbutton):not(.robi-learn-btn):not([class*="-toggler-button"]):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(button.button):not(.lbutton):not(.robi-learn-btn):not([class*="-toggler-button"]):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.rx-tutorial-btn):not(.lbutton):not(.robi-learn-btn):not([class*="-toggler-button"]):not(#sg-p0):not(.sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(.back-button-wh > a):not(.lbutton):not(.robi-learn-btn):not([class*="-toggler-button"]):not(#sg-p0):not(.sg-p0){ padding-right: 14px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.button, button.button, a.rx-tutorial-btn, .back-button-wh > a):not(.lbutton):not(#sg-p0) :is(.icon),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro :is(a.button, button.button, a.rx-tutorial-btn, .back-button-wh > a):not(.lbutton):not(#sg-p0) :is(.mdi){ font-size: 16px !important; }
  /* «Tutorial» leaves the card head and sits right in the «Indietro» row (the form is the box both live in) */
  html:is([data-skin="sg26"],#sg-skin) body #reactions-pro form:has(> .back-button-wh) { position: relative; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro form:has(> .back-button-wh) a.rx-tutorial-btn:not(#sg-p0) { position: absolute !important; top: 16px; right: 16px; margin: 0 !important; z-index: 1; }
  /* small numeric fields (Rimuovi se uguale o inferiore a [8] %, limits): sized to the value, centred, «%» stays beside them */
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) #reactions-pro section.skeleton-content input[type="number"]:not(#sg-p0) { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 40px !important; min-height: 40px !important; padding: 0 8px !important; text-align: center; font: 400 15px/20px var(--f) !important; flex: 0 0 64px !important; box-sizing: border-box; }
}
/* «Inattivo» and «Re-login richiesto!» content-wide: the earlier f1017rp rule lost to app.css:1889 (5 ids) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) #reactions-pro .aside-list-item .sub > :is(.status):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4) #reactions-pro .aside-list-item .sub > :is(.ac-status):not(#sg-p0){ display: inline-flex !important; width: fit-content !important; max-width: 100% !important; }
/* f1017rx:end */
/* f1017rz:begin */
/* [SG-PATCH 2026-10-17 | Felix] Reactions account page /e/reactions/<id> (Angelo 17/10, measured on playboostnetwork at 1440/412/375).
   1. Switch rows: one rhythm. The view puts a <br> after every switch row (+16px line) and the label is an inline box around an
      inline-flex switch (+8px line box), so the rows were 61px apart. Now: the label is a flex box, the stray <br> next to a switch row
      is not rendered, rows are 36px (switch centred on the first text line, a wrapped label continues under its own text, top-aligned
      with the switch) and 8px apart = 44px pitch; a switch row after a field keeps at least 12px. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content label:has(> input.checkbox:not([name^="day_"])):not(#sg-p0) { display: flex !important; width: fit-content !important; max-width: 100% !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content label > input.checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span:not(.none):not(#sg-p0) { align-items: flex-start !important; min-height: 36px !important; height: auto !important; padding-top: 8px !important; padding-bottom: 5px !important; box-sizing: border-box !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content label > input.checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span .icon:is(.unchecked, .checked):not(#sg-p0) { margin-top: -3px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content label > input.checkbox:not([name^="day_"]) + span > .tooltip:not(#sg-p0) { align-self: flex-start; line-height: 20px !important; margin-top: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content :is(div:has(> label > input.checkbox:not([name^="day_"])), label:has(> input.checkbox:not([name^="day_"]))) + br,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content br:has(+ div > label > input.checkbox:not([name^="day_"])) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content div:has(> label:first-child > input.checkbox:not([name^="day_"])):not(#sg-p0) { margin-top: 0 !important; margin-bottom: 12px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content label.form-label:has(> input.checkbox:not([name^="day_"])):not(#sg-p0) { margin-bottom: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content ul.field-tips:not([class*="mb-"]) + :is(select.input):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content ul.field-tips:not([class*="mb-"]) + :is(input.input):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content ul.field-tips:not([class*="mb-"]) + :is(textarea):not(.sg-p0):not(#sg-p0){ margin-top: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content div:has(> label:first-child > input.checkbox:not([name^="day_"])):is(:has(+ div > label:first-child > input.checkbox), :has(+ br + div > label:first-child > input.checkbox)):not(#sg-p0) { margin-bottom: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content :is(select, .select2-container, input.input, textarea, .message-ai-field, ul.field-tips, div[class*="-settings"], div:has(> :is(input.input, select, textarea))) + :is(label):not(.sg-p0):not(sg-p0):has(> input.checkbox:not([name^="day_"]), > label > input.checkbox:not([name^="day_"])):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro section.skeleton-content :is(select, .select2-container, input.input, textarea, .message-ai-field, ul.field-tips, div[class*="-settings"], div:has(> :is(input.input, select, textarea))) + :is(div:has(> label:first-child)):has(> input.checkbox:not([name^="day_"]), > label > input.checkbox:not([name^="day_"])):not(#sg-p0){ margin-top: 12px !important; }
/* 2. Range sliders (noUiSlider: repost age, follower/following/post filters): the value bubbles sit above the track, the end handles and
      bubbles stay inside the column (the two-handle bubbles align to their handle's outer edge, the end tick labels to the track ends),
      the grid numbers sit above the help text below; on the phone only the first and last tick labels show. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider.noUi-horizontal:not(#sg-p0) { margin: 52px 18px 56px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro label.form-label > .np-slider-label:not(#sg-p0) { display: block !important; width: fit-content; max-width: 100%; margin-bottom: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro #FollowersSlider .noUi-pips > .noUi-value:has(~ .noUi-value:last-child):not(:has(~ .noUi-value ~ .noUi-value)):not(#sg-p0) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider.noUi-horizontal:has(.noUi-handle-upper) .noUi-handle-lower .noUi-tooltip:not(#sg-p0) { left: 0 !important; right: auto !important; transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider.noUi-horizontal .noUi-handle-upper .noUi-tooltip:not(#sg-p0) { left: auto !important; right: 0 !important; transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider .noUi-pips > .noUi-marker:first-child + .noUi-value:not(#sg-p0) { transform: translate(0, 50%) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider .noUi-pips > .noUi-value:last-child:not(#sg-p0) { transform: translate(-100%, 50%) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro input.js-speed-control-slider:not(#sg-p0) { margin: 8px 0 16px !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .reactions-pro-slider .noUi-pips > .noUi-value:not(:last-child):not(.noUi-marker:first-child + .noUi-value):not(#sg-p0) { display: none !important; }
}
/* 3. «✨ AI» over the message fields: the text never runs under it (desktop: room on the right = button + 12px); phone: under the field,
      right-aligned. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .message-ai-field > textarea:not(#sg-p0):is(.js-message-ai-open, .js-message-ai-open ~ *, :has(~ .js-message-ai-open)){ padding-right: 72px !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .message-ai-field:has(> .js-message-ai-open):not(#sg-p0) { display: flex !important; flex-direction: column; align-items: flex-end; gap: 8px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .message-ai-field > textarea:not(#sg-p0):is(.js-message-ai-open, .js-message-ai-open ~ *, :has(~ .js-message-ai-open)){ padding-right: 12px !important; width: 100% !important; align-self: stretch; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .message-ai-field > .js-message-ai-open:not(#sg-p0) { position: static !important; flex: 0 0 auto; }
}
/* 4. Small numeric fields: the same 64x40, centred, 15px on desktop for the inline ones (Rimuovi se uguale o inferiore a [8] %). */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-source-pruning-input > input[type="number"]:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-source-pruning-value > input[type="number"]:not(#sg-p0){ width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 40px !important; padding: 0 8px !important; text-align: center !important; font: 400 15px/20px var(--f) !important; flex: 0 0 64px !important; box-sizing: border-box; }
/* 7. Target chips (Angelo 17/10, rxbtn): «link» and «×» keep the product look and size on every width (reactions core.css: inline, 12px
      link, 10px ×). Phone only: each gets an invisible 44x44 tap area (::after) centred on the glyph; chips are 14px apart and the two
      glyphs are spaced so no two tap areas overlap and the «Verifica ER post» label keeps its own; a chip too long for the phone
      wraps instead of pushing the page sideways (the quality bar is pinned to the chip bottom, where it sits by default). Glyph size and colour unchanged. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag:has(> .remove):not(#sg-p0) { overflow: clip !important; overflow-clip-margin: 12px; margin: 0 14px 14px 0 !important; white-space: normal !important; height: auto !important; min-height: 20px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > :is(.remove):not(sg-p0):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > :is(a.mdi-link):not(#sg-p0){ position: relative !important; z-index: 1; top: auto !important; right: auto !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > a.mdi-link:not(#sg-p0) { margin-left: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > .remove:not(#sg-p0) { margin-left: 14px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > a.mdi-link + .remove:not(#sg-p0) { margin-left: 32px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > :is(.remove):not(sg-p0):not(#sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > :is(a.mdi-link):not(#sg-p0)::after{ content: ""; position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .tag > .target-highlighter:not(#sg-p0):is(.remove, .remove ~ *, :has(~ .remove)){ top: auto !important; bottom: 1px; }
}
/* 8. «Preset di Targeting» modal: header 18/14, 44px close; the scope tabs are one scrolling row, never broken mid-word, 14px, with the
      shared accent pill for the active one (f1017tabs); «Importa» / «Salva gli attuali» 14px, one line, 44px; the search field has no
      inner box; «Tutti i gruppi» is one field with the folder icon inside; empty states 16px/600 text + 14px muted. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-title-copy .section-title:not(#sg-p0) { font-size: 18px !important; font-weight: 600 !important; line-height: 24px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-title-copy p:not(#sg-p0) { display: block !important; font-size: 14px !important; line-height: 20px !important; color: var(--text-muted) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-header .close:not(#sg-p0) { width: 44px !important; height: 44px !important; min-width: 44px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; flex: 0 0 44px; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs:not(#sg-p0) { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 4px !important; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs:not(#sg-p0)::-webkit-scrollbar { display: none; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs .rp-tp-tab-indicator:not(#sg-p0) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs > button:not(#sg-p0) { flex: 0 0 auto !important; min-width: max-content !important; white-space: nowrap !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; padding: 8px 12px !important; gap: 6px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs > button > span:not(#sg-p0) { overflow-wrap: normal !important; word-break: normal !important; white-space: nowrap !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-tabs > button.active:not(#sg-p0) { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-toolbar-actions:not(#sg-p0) { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-toolbar-actions > .rp-tp-button:not(#sg-p0) { height: 44px !important; min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; line-height: 20px !important; white-space: nowrap !important; flex: 1 1 auto; box-sizing: border-box; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-search > input:not(#sg-p0) { flex: 1 1 auto !important; width: 100% !important; min-width: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0; -webkit-appearance: none !important; appearance: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-group-filter > select:not(#sg-p0) { flex: 1 1 auto !important; width: 100% !important; min-width: 0; height: 100% !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .rp-tp-group-filter:not(#sg-p0) { height: 44px !important; box-sizing: border-box !important; overflow: hidden; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .js-tp-list-state > strong:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .js-tp-empty > strong:not(#sg-p0){ font-size: 16px !important; font-weight: 600 !important; line-height: 22px !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .js-tp-list-state > small:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .rp-targeting-presets-modal .js-tp-empty > small:not(#sg-p0){ font-size: 14px !important; line-height: 20px !important; color: var(--text-muted) !important; }
/* 11. Weekly schedule grid (ORARIO / LUNEDÌ …): checked boxes carry a white tick; on the phone the whole week fits the column: a 44px
       time column, seven equal day columns, short day names (data-sg-short from app.js f1017grid, full name kept in the text and
       title), 36px rows with a 20px box and a 32px tap cell. Dense on purpose (Angelo 17/10). Desktop layout unchanged. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) table.activity-time-table input.checkbox:checked + span .icon .mdi-check:not(#sg-p0) { color: var(--brand-on-primary) !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .js-activity-time:has(> table.activity-time-table):not(#sg-p0) { overflow-x: hidden !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table:not(#sg-p0) { width: 100% !important; table-layout: fixed !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr > :is(th):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr > :is(td):not(#sg-p0){ padding: 0 !important; height: 36px !important; text-align: center !important; vertical-align: middle !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr > :first-child:not(#sg-p0) { width: 44px !important; min-width: 44px !important; font-size: 13px !important; letter-spacing: 0 !important; text-align: left !important; white-space: nowrap; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr:first-child > th:first-child:not(#sg-p0) { font-size: 11px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr:first-child > th[data-sg-short]:not(#sg-p0) { font-size: 0 !important; letter-spacing: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table tr:first-child > th[data-sg-short]:not(#sg-p0)::before { content: attr(data-sg-short) / ""; font-size: 12px; line-height: 16px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table label:has(> input.checkbox):not(#sg-p0) { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 32px; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table label > input.checkbox + span:not(#sg-p0) { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 32px; height: 32px !important; min-height: 32px !important; padding: 0 !important; position: relative !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table label > input.checkbox + span > .icon:not(#sg-p0) { position: relative !important; top: auto !important; left: auto !important; margin: 0 !important; width: 20px !important; height: 20px !important; flex: 0 0 20px; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro table.activity-time-table label > input.checkbox + span > .icon > .mdi-check:not(#sg-p0) { inset: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center; justify-content: center; font-size: 16px !important; line-height: 1 !important; }
}
/* 6. Reactions account list: «Inattivo» and the «Re-login Richiesto!» / «Re-login in sospeso» pills hug their content. The rule that
      won was ai-support.css:106 (every .sub > span gets flex-basis:100%); the login pills are .rp-login-required-state /
      .rp-automated-relogin-state, not .ac-status, so f1017rp/f1017rx never matched them. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .aside-list-item .sub > :is(.status):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .aside-list-item .sub > :is(.ac-status):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .aside-list-item .sub > :is(.rp-login-required-state):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .aside-list-item .sub > :is(.rp-automated-relogin-state):not(#sg-p0){ flex: 0 0 auto !important; width: fit-content !important; max-width: 100% !important; }
/* 13. Support ticket, agent view: «Salva nota interna» / «Rispondi al cliente» follow «Allega file» / «Riscrivi con AI» on the left
       (desktop: same row; phone: the next row, side by side when they fit, else stacked, 8px apart), all four at the shared 36px; the
       «Imposta» buttons are as tall as the select beside them. Not the reseller portal (its own rules). */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form > .actions:not(#sg-p0) { justify-content: flex-start !important; justify-self: start !important; gap: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form :is(.actions > .stav-btn):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form :is(.stav-polish-row > .stav-attach):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form :is(.stav-polish-row > .stav-polish):not(#sg-p0){ height: 36px !important; min-height: 36px !important; font-size: 14px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form > .stav-polish__msg:empty:not(#sg-p0) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-side:not(#reseller-portal *) .stav-card form > .stav-btn:not(#sg-p0):is(select, select ~ *, :has(~ select)){ height: auto !important; min-height: 0 !important; align-self: stretch !important; }
@media (max-width: 899.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) .stav-reply:not(#reseller-portal *) form > .actions:not(#sg-p0) { margin-top: 8px !important; }
}
/* f1017rz:end */
/* f1017fl:begin */
/* [SG-PATCH 2026-10-17 | Felix] Reactions account page /e/reactions/<id> (Angelo 17/10, measured on playboostnetwork at 375/412/1440).
   1. Load: the content (#reactions-pro.skeleton--full) stays hidden until core.js, parsed last in a 3.4 MB document; the loading veil
      now waits for it (loader.fragment.php f1017fl). Showing it by CSS while parsing was measured and dropped: 2.4x slower parse. */
@media (max-width: 767.98px) {
  /* 2. «Modalità impostazioni»: a compact control on the phone, as the Targeting toggle: 36px, 14px, sized to its labels (at most
        260px), left-aligned; the active segment keeps the shared accent pill; the hint is 13px muted. */
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .st-view-bar-row:not(#sg-p0) { align-items: flex-start !important; justify-content: flex-start !important; flex-direction: column !important; gap: 8px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .st-view-switch:not(#sg-p0) { display: inline-flex !important; flex: 0 0 auto !important; align-self: flex-start !important; width: fit-content !important; max-width: 260px !important; height: 36px !important; min-height: 0 !important; padding: 2px !important; gap: 2px !important; box-sizing: border-box !important; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .st-view-switch > .st-view-seg:not(#sg-p0) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 30px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 14px !important; line-height: 20px !important; white-space: nowrap !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .st-view-bar-hint:not(#sg-p0) { flex: 1 1 100% !important; max-width: none !important; font-size: 13px !important; line-height: 18px !important; color: var(--text-muted) !important; }
  /* 3. Floating save bar: it ends beside the chat button instead of lifting it (app.css b428 is desktop-only now): right = button
        right 28 + 52 + 12 gap; one 40px row (status select, «Pausa», «Salva»), 14px, 8px gaps and padding; the 56px bar is centred
        on the 52px button (bottom 28 - 2). The labels carry the meaning, the button icons go on the phone. */
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed:not(#sg-p0) { left: 16px !important; right: calc(28px + 52px + 12px) !important; width: auto !important; bottom: calc(28px - 2px) !important; padding: 8px !important; box-sizing: border-box !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-save-bar-content:not(#sg-p0) { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-status-control:not(#sg-p0) { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 40px !important; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-status-select:not(#sg-p0) { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 40px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-status-select select:not(#sg-p0) { width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding-left: 12px !important; font-size: 14px !important; line-height: 20px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed :is(.rp-schedule-pause-button):not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3):not(#sg-p4),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed :is(.rp-schedule-save-button):not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3):not(#sg-p4){ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; margin: 0 !important; font-size: 14px !important; line-height: 20px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-pause-button > .mdi:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5) #reactions-pro .rp-schedule-save-bar.is-fixed .rp-schedule-save-button > .mdi:not(#sg-p0){ display: none !important; }
}
/* f1017fl:end */
/* f1017tour:begin */
/* [SG-PATCH 2026-10-17 | Felix] Reactions guided tour on the phone (Angelo 17/10): the tutorial pins every popover to the bottom
   (tutorial-inject.fragment.php, max-width 700px), so a step placed above its target (data-pos="top": the floating save bar, its
   status select) was covered by its own popover. A "top" popover now sits at the top; the tour only picks "top" when the
   popover fits above the target, so it never overlaps it. */
@media (max-width: 700px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .rx-tour-tooltip[data-pos="top"]:not(#sg-p0) { top: 16px !important; bottom: auto !important; }
}
/* f1017tour:end */

/* a304:begin */
/* Group card = the Reactions 16 «disclosure card» (Angelo 18/10: «come reactions 16 ma evita bordi dentro bordi»). ONE border per group,
   the card's. Its head is a full-width row inside the card: icon tile, title over description, «Guida» cap, chevron; no pill, border or
   fill of its own. An open card shows its body under a hairline divider. A card inside another card's body loses its own border and
   becomes a row under a divider. A head without a card wrapper (older sections) draws the card itself; its open body continues the
   outline. Generated from one template for Reactions (ai-support.css) and Repost (pro-modules.css §20): only the scope and the product
   class names differ. Every selector list is expanded (no multi-argument :is() at the right, B4.27 perf rule). */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group:not(#sg-p0) { margin: 0 0 12px !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; background: var(--card-bg) !important; box-shadow: none !important; outline: 0 !important; min-width: 0; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure section.rp-settings-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.ai-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-group:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure section.rp-settings-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure details.ai-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure details.rp-action-block-group:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group section.rp-settings-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group details.ai-disclosure:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group details.rp-action-block-group:not(#sg-p0):not(#sg-p1) { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading:not(#sg-p0):not(#sg-p1) { display: block; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } /* A347 S3: display without !important, so the module can still hide a heading (Simple view .sr-adv, jQuery .hide(): SOP-005 §4) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1) { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 64px !important; height: auto !important; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box !important; border: 0 !important; border-radius: calc(var(--r-lg) - 1px) !important; background: transparent !important; box-shadow: none !important; outline-offset: -2px; text-align: start !important; white-space: normal !important; overflow: visible !important; font: 600 14px/20px var(--f) !important; color: var(--text) !important; text-decoration: none !important; list-style: none !important; cursor: pointer; transition: background-color .15s var(--ease) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):hover,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):hover,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):hover,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button.opened:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button[aria-expanded="true"]:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button.opened:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button[aria-expanded="true"]:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure[open] > summary:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group[open] > summary:not(#sg-p0):not(#sg-p1) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2) { border-radius: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary::-webkit-details-marker,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary::-webkit-details-marker { display: none; }
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .rp-toggler-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .ai-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .rp-toggler-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .ai-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .rp-toggler-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .ai-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .rp-toggler-icon:not(#sg-p0),
/* icon tile, title over description, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .ai-icon:not(#sg-p0) { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 36px !important; width: 36px !important; height: 36px !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--brand-primary-subtle) !important; color: var(--brand-primary-text) !important; font-size: 18px !important; line-height: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .rp-toggler-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .ai-heading:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .rp-toggler-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .ai-heading:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .rp-toggler-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .ai-heading:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .rp-toggler-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .ai-heading:not(#sg-p0) { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; overflow-wrap: anywhere; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button .rp-disclosure-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary .rp-disclosure-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary .rp-disclosure-title:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button .rp-disclosure-title:not(#sg-p0) { display: block !important; margin: 0 !important; font: 600 14px/20px var(--f) !important; color: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button .rp-disclosure-description:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary .rp-disclosure-description:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary .rp-disclosure-description:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button .rp-disclosure-description:not(#sg-p0) { display: block !important; margin: 2px 0 0 !important; font: 400 13px/18px var(--f) !important; color: var(--text-3) !important; white-space: normal !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .robi-learn-btn:not(#sg-p0) { flex: 0 0 auto !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .rp-toggler-chevron:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .rp-toggler-chevron:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .rp-toggler-chevron:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .rp-toggler-chevron:not(#sg-p0) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0)::after { flex: 0 0 auto !important; margin: 0 0 0 auto !important; width: 16px !important; height: 16px !important; transition: transform .15s var(--ease); }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .robi-learn-btn:not(#sg-p0) + .rp-toggler-chevron,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .robi-learn-btn:not(#sg-p0) + .rp-toggler-chevron,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .robi-learn-btn:not(#sg-p0) + .rp-toggler-chevron,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .robi-learn-btn:not(#sg-p0) + .rp-toggler-chevron,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .rp-toggler-title + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .ai-heading + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .rp-toggler-title + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .ai-heading + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .rp-toggler-title + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .ai-heading + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .rp-toggler-title + .robi-learn-btn:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .ai-heading + .robi-learn-btn:not(#sg-p0) { margin-left: auto !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure[open] > summary:not(#sg-p0)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group[open] > summary:not(#sg-p0)::after { transform: rotate(180deg); }
/* body under a hairline divider, inside the same card */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-body:not(.none):not(#sg-p0):not(#sg-p1) { margin: 0 !important; padding: 16px !important; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure[open] > summary:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group[open] > summary:not(#sg-p0):not(#sg-p1) { border-bottom: 1px solid var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure[open]:not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group[open]:not(#sg-p0) { padding-bottom: 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > :not(summary):not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > :not(summary):not(#sg-p0) { margin-left: 16px !important; margin-right: 16px !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary + :not(#sg-p0),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary + :not(#sg-p0) { margin-top: 16px !important; border-top: 0 !important; }
/* a head without a card wrapper draws the card itself; an open one continues the outline around its body */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh:not(#sg-p0):not(#sg-p1) { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; margin: 0 0 12px !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; background: var(--card-bg) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2) { flex: 1 1 auto !important; width: auto !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .robi-learn-btn:not(#sg-p0):not(#sg-p1) { flex: 0 0 auto !important; margin: 0 !important; }
/* there the cap sits outside the head: the chevron moves to the card so the order stays title, cap, chevron */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):is(.robi-learn-btn, .robi-learn-btn ~ *, :has(~ .robi-learn-btn))::after{ display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh:has(> .robi-learn-btn):not(#sg-p0)::after { content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin: 0 16px 0 4px; background: var(--text-muted); -webkit-mask: var(--sg-ic-chevron-down) center / 16px no-repeat; mask: var(--sg-ic-chevron-down) center / 16px no-repeat; pointer-events: none; transition: transform .2s var(--ease); }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:has(> .robi-learn-btn):not(#sg-p0)::after { transform: rotate(180deg); }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:not(#sg-p0):not(#sg-p1) { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:not(#sg-p0):not(#sg-p1) + .sg-gb:not(.none) { margin: 0 0 12px !important; padding: 16px !important; border: 1px solid var(--border) !important; border-top: 1px solid var(--border) !important; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; background: var(--card-bg) !important; box-shadow: none !important; }
/* inside a card body such heads are rows too (no own outline) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure :not(section.rp-settings-disclosure) > .sg-gh:not(#sg-p0):not(#sg-p1):not(#sg-p2),
/* inside a card body such heads are rows too (no own outline) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure :not(section.rp-settings-disclosure) > .sg-gh:not(#sg-p0):not(#sg-p1):not(#sg-p2),
/* inside a card body such heads are rows too (no own outline) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group :not(section.rp-settings-disclosure) > .sg-gh:not(#sg-p0):not(#sg-p1):not(#sg-p2) { border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:not(#sg-p0):not(#sg-p1):not(#sg-p2) + .sg-gb:not(.none),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:not(#sg-p0):not(#sg-p1):not(#sg-p2) + .sg-gb:not(.none),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group :not(section.rp-settings-disclosure) > .sg-gh.sg-gh-open:not(#sg-p0):not(#sg-p1):not(#sg-p2) + .sg-gb:not(.none) { border: 0 !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; }
/* phone: the same card with a tighter row; long titles wrap inside the row instead of running over the next card */
@media (max-width: 767.98px) {
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2) { min-height: 56px !important; height: auto !important; padding: 10px 12px !important; gap: 10px !important; width: 100% !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .rp-toggler-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button > .ai-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .rp-toggler-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary > .ai-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .rp-toggler-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary > .ai-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .rp-toggler-icon:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button > .ai-icon:not(#sg-p0):not(#sg-p1) { flex-basis: 32px !important; width: 32px !important; height: 32px !important; font-size: 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-body:not(.none):not(#sg-p0):not(#sg-p1):not(#sg-p2) { padding: 12px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > :not(summary):not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > :not(summary):not(#sg-p0):not(#sg-p1) { margin-left: 12px !important; margin-right: 12px !important; }
}
/* Save bar on the phone (A304): docked or floating it ends beside the chat button (f1017fl did it for the floating bar only; the docked
   bar scrolled through the button's row and «Salva» passed under it). Desktop: app.js b428js lifts the button for the docked bar too. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .rp-schedule-save-bar:not(.is-fixed):not(#sg-p0) { width: auto !important; margin-right: calc(28px + 52px + 12px - var(--pad-page, 16px)) !important; }
}
/* Inside a group card the product's own sub-panels lose their outline (Angelo: «evita bordi dentro bordi»): a panel = a quiet fill,
   a panel inside a panel = the card surface; the edge goes, the grouping stays. Form fields, buttons, chips and tables keep theirs. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-note:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure label.rp-filtration-enable:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-no-auth-proxy-preview:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-help-card:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-pause-group:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-intro:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-controls:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-recovery-note:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-action:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-openai-parameter-policy:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-history-section:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-diagnostics-notice:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-card:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-card:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1) { border-color: transparent !important; background: var(--fill-1) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-targeting-presets-launch .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-targeting-presets-launch .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-targeting-presets-launch .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-note .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-note .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-note .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure label.rp-filtration-enable .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure label.rp-filtration-enable .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure label.rp-filtration-enable .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-no-auth-proxy-preview .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-no-auth-proxy-preview .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-no-auth-proxy-preview .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-help-card .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-help-card .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-help-card .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-pause-group .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-pause-group .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-pause-group .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-intro .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-intro .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-intro .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-controls .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-controls .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-controls .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-recovery-note .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-recovery-note .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-safety-recovery-note .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-action .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-action .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-action-block-action .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-openai-parameter-policy .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-openai-parameter-policy .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-openai-parameter-policy .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-history-section .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-history-section .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-history-section .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-diagnostics-notice .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-diagnostics-notice .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-diagnostics-notice .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-card .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-source-pruning-card .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-card .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-action-pause-card .rp-no-auth-proxy-item:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-no-auth-proxy-item .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure .rp-no-auth-proxy-item .rp-action-pause-card:not(#sg-p0):not(#sg-p1):not(#sg-p2) { border-color: transparent !important; background: var(--card-bg) !important; box-shadow: none !important; }
/* a304:end */
/* a317:begin */
/* A317 (Felix, 18/10): Vera's gate on A295/A304 + Angelo 18/10 on control sizes. Generated by gen_a317.py from a317.tpl.css for
   Reactions (ai-support.css) and Repost (pro-modules.css); only the scope and the product class names differ. */
/* H1 (Angelo 18/10, decision 9 «evita bordi dentro bordi» and «b»: the launch tiles too): a boxed panel or a launch tile inside a
   group card is a row under a hairline divider: no own border, radius, fill, shadow or lift. */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2) { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):not(#sg-p2) { min-height: 64px !important; margin-bottom: 8px !important; padding: 12px 0 !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):hover,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):hover,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1):hover { color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.rp-targeting-presets-launch small:not(#sg-p0):not(#sg-p1) { color: var(--text-muted) !important; }
/* M2: the group card honours prefers-reduced-motion (the chevron turns and the row tints without animating) */
@media (prefers-reduced-motion: reduce) {
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3) { transition: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure > .rp-settings-disclosure-heading > .rp-toggler-button:not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.ai-disclosure > summary:not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro details.rp-action-block-group > summary:not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh > .rp-toggler-button:not(#sg-p0):not(#sg-p1)::after { transition: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro :not(section.rp-settings-disclosure) > .sg-gh:not(#sg-p0):not(#sg-p1)::after { transition: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.rp-targeting-presets-launch:not(#sg-p0):not(#sg-p1) { transition: none !important; }
}
/* H3 (WCAG 2.4.11): the page scrolls a focused control above the floating save bar (with app.js a317js for keyboard focus) */
html.sghas-a347sb01:is([data-skin="sg26"],#sg-skin) { scroll-padding-bottom: 96px; } /* A347 S3 perf: was html:has(#reactions-pro .rp-schedule-save-bar), a :has() anchor on <html> re-checked on every DOM change of the page; app.js HMAP sets the class */
/* Angelo 18/10 («troppo grandi, sia come font che come grandezza del tasto ... la dimensione del font originale dello sviluppatore»):
   the compact controls (filters, mass actions, the targets buttons, the mode switch) take the original's size class: 13/18 caption
   type (--fs-caption; the original is 12px on Reactions, 13px on Repost) and 30px on desktop (the original 30, and Angelo's 30px rule
   for the left column). Action buttons (Salva, Pausa, Svuota automazione, Scarica ...) stay 14/20 at 40px (the original 15px, 42-50px).
   Phone: the token gives 14/20, the visible height stays the 17/10 rule (36), the touch area is 44 (below). */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .skeleton-aside a.button--rp-filter:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .skeleton-aside div.reactions-background-btn:not(#sg-p0):not(#sg-p1):not(#sg-p2) { font: 500 var(--fs-caption)/var(--lh-caption) var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.target-list-button:not(#sg-p0):not(#sg-p1):not(#sg-p2),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.st-view-seg:not(#sg-p0):not(#sg-p1):not(#sg-p2) { font: 500 var(--fs-caption)/var(--lh-caption) var(--f) !important; }
@media (min-width: 768px) {
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .skeleton-aside a.button--rp-filter:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .skeleton-aside div.reactions-background-btn:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3) { height: auto !important; min-height: 30px !important; padding: 5px 10px !important; box-sizing: border-box !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.target-list-button:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.st-view-seg:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3) { height: auto !important; min-height: 30px !important; padding: 5px 12px !important; box-sizing: border-box !important; }
}
/* L4: «Apri in Instagram» is a 24px target (it was 18) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.rp-account-open-link:not(#sg-p0):not(#sg-p1) { display: inline-flex !important; align-items: center; min-height: 24px; }
/* M3: phone touch areas of 44px around the controls that stay visually smaller (36px buttons, 30px mode switch, check chips) */
@media (max-width: 767.98px) {
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.button:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.button:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .back-button-wh > a:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.st-view-seg:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .robi-learn-btn:not(#sg-p0):not(#sg-p1),
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro input.checkbox + span:not(#sg-p0):not(#sg-p1) { position: relative !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.button:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.button:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .back-button-wh > a:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro button.st-view-seg:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro .robi-learn-btn:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro input.checkbox + span:not(.none):not(#sg-p0):not(#sg-p1)::after,
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro a.rx-tutorial-btn:not(.none):not(#sg-p0):not(#sg-p1)::after { content: "" !important; position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important; width: max(100%, 44px) !important; height: max(100%, 44px) !important; transform: translate(-50%, -50%) !important; background: none !important; -webkit-mask: none !important; mask: none !important; }
}
/* a317:end */
/* a347s3:begin */
/* [SG-PATCH 2026-10-20 A347 S3 | Felix] Reactions 16 group cards: a group the module hides (Simple view: its head and body carry .sr-adv;
   or jQuery .hide() leaves an inline display:none on the head and the body closed) also hides its card, instead of leaving an empty
   bordered box. The heads now follow the module (display without !important, rule a304 above): before, they stayed on screen and did
   not open (regress: 17 «nothing opened or closed»). */
html:is([data-skin="sg26"],#sg-skin) body.rp-view-simple:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure:not(:has(> :not(.sr-adv))):not(#sg-p0):not(#sg-p1) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure:has(> .rp-settings-disclosure-heading[style*="none"]):not(:has(> .rp-settings-disclosure-body:not(.none):not([style*="none"]))):not(#sg-p0):not(#sg-p1) { display: none !important; }
/* a347s3:end */
/* a347s3-phone:begin */
/* [SG-PATCH 2026-10-20 A347 S3 | Felix] Phone: text fields at 16px (B4.28 type scale; under 16 iOS zooms the page on focus). The f1017rz
   numeric fields (15) and the f1017fl save-bar select (14) were under it. Weekly grid: the «Orario» head cell 13px (GL-001 §7.3 floor, was 11). */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not(#sg-p0):not(#sg-p1),
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro select:not(#sg-p0):not(#sg-p1),
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro textarea:not(#sg-p0):not(#sg-p1) { font-size: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro table.activity-time-table tr:first-child > th:first-child:not(#sg-p0):not(#sg-p1) { font-size: 13px !important; }
  /* depth 3 on the phone (GL rule «no card in a card in a card»; Angelo 18/10 «evita bordi dentro bordi»): the pruning rule cards inside
     an open group inside the group card lose their own box; the rows keep their spacing. */
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group .rp-source-pruning-card:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3),
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3):not(#sg-f4):not(#sg-f5):not(#sg-f6) #reactions-pro section.rp-settings-disclosure details.rp-source-pruning-group .rp-source-pruning-note:not(#sg-p0):not(#sg-p1):not(#sg-p2):not(#sg-p3) { border-color: transparent !important; background: none !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}
/* a347s3-phone:end */

/* [SG-PATCH 2026-10-20 A347 S3p | Felix] speed pass (Angelo 20/10): selectors rewritten by /root/felix-sg2026/s3p/tools/build.sh from the pre-pass file - non-subject :has() moved to the subject, multi-argument :is()/:where() split into bucketable branches, ancestor :is() lists expanded. Same matches, same specificity (padding :not(#sg-p0)/:not(.sg-p0)/:not(sg-p0)); nothing on screen changes. */

/* [SG-PATCH 2026-10-21 A347 | Felix] Reactions statistics, «Report dei target» (Angelo 21/10, Vera rc7 R1).
   (1) The «Azioni totali» footer lines up with the rows: each row is a flex line whose clearfix ::before/::after are flex items, so
   the module gap (12px, 6px up to 768px: reactions core.css .rp-stats-targets-shell .react-stats-line) insets the row content on both
   sides; the footer (label floated left, total chip floated right) gets the same inset as padding. (2) A metric keeps its icon and
   its value on one line when the row wraps (390px). */
html:is([data-skin="sg26"],#sg-skin) body .rp-stats-targets-shell .react-stats-row + .clearfix { display: block; padding-left: 12px; padding-right: 12px; }
@media (max-width: 768px) { html:is([data-skin="sg26"],#sg-skin) body .rp-stats-targets-shell .react-stats-row + .clearfix { padding-left: 6px; padding-right: 6px; } }
html:is([data-skin="sg26"],#sg-skin) body .rp-stats-targets-shell .react-stats-line .rp-stats-target-metric { white-space: nowrap; }

/* [SG-PATCH 2026-10-21 A347 rc9 | Felix] Reactions statistics, «Efficacia delle azioni» (Angelo 21/10: «testi ecc che non viene
   visualizzato bene»). The module lays the table out for the page width (820px minimum, card layout only under a 760px VIEWPORT), but in
   the sg2026 grid the card can be 380-800px wide at any viewport: the per-100 column ran off the card, its two chips sat side by side,
   «Ogni 100 azioni» broke one word per line and the note became a thin column. Now the card decides, by its own width (container
   query on the card body): from 700px the table fits the card and the two chips stack in their cell; under 700px the module's own
   phone card layout (same values as reactions core.css @media (max-width: 760px)) is used. No colour or font size changes. */
html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-shell .js-stats-effectiveness-body { container: sgeff / inline-size; }
@container sgeff (min-width: 700px) {
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table { min-width: 0; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table :is(th, td):last-child { width: 24%; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-rates { flex-direction: column; align-items: stretch; gap: 6px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-rates > span { min-width: 0; }
}
@container sgeff (max-width: 699.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-meta { display: block; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-note { margin-bottom: 10px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-base { width: 100%; justify-content: space-between; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table-wrap { overflow: visible; border: 0; background: transparent; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table { display: block; min-width: 0; background: transparent !important; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table thead { display: none; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody { display: grid; gap: 10px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody tr,
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody tr:hover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e3e9f1; border-radius: 12px; background: #fff; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td { display: flex; width: auto !important; min-width: 0; min-height: 64px; padding: 10px 7px !important; align-items: center; justify-content: center; border-bottom: 0; border-right: 1px solid #e9eef5; text-align: center; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:nth-child(n+2):nth-child(-n+4)::before { display: block; margin-bottom: 5px; content: attr(data-label); color: #7a8799; font-size: 9px; font-weight: 700; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:first-child { grid-column: 1 / -1; min-height: 0; padding: 12px !important; justify-content: flex-start; border-right: 0; border-bottom: 1px solid #e9eef5; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:nth-child(2),
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:nth-child(3),
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:nth-child(4) { display: flex; flex-direction: column; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:nth-child(4) { border-right: 0; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-table tbody td:last-child { display: block; grid-column: 1 / -1; min-height: 0; padding: 10px 12px 12px !important; border-top: 1px solid #e9eef5; border-right: 0; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-action { width: 100%; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-action > .mdi { width: 36px; height: 36px; flex-basis: 36px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-completed { min-width: 0; padding: 5px 10px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-outcome { gap: 5px; font-size: 13px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-mobile-label { display: block; margin-bottom: 7px; color: #7a8799; font-size: 9px; font-weight: 700; letter-spacing: .035em; line-height: 1.2; text-align: left; text-transform: uppercase; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html:is([data-skin="sg26"],#sg-skin) body .rp-stats-effectiveness-rates > span { box-sizing: border-box; min-width: 0; padding: 8px 9px; }
  html:is([data-skin="sg26"],#sg-skin) body.darkside .rp-stats-effectiveness-table tbody tr,
  html:is([data-skin="sg26"],#sg-skin) body.darkside .rp-stats-effectiveness-table tbody tr:hover { border-color: #30343b; background: #18191c; }
  html:is([data-skin="sg26"],#sg-skin) body.darkside .rp-stats-effectiveness-table tbody td { border-color: #30343b; }
}