/* 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, .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, .search-icon, .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, 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, .slave-status, .ac-rate-limit-status, .ac-status, .reuser-owner, .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, .color-warning) { color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub :is(.color-red, .color-danger, .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, .like-speed, .comment-speed, .dm-speed, .welcome-dm-speed, .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 > :is(.follow-speed, .like-speed, .comment-speed, .dm-speed, .welcome-dm-speed, .unfollow-speed) > :is(.mdi, .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 > :is(.follow-speed, .like-speed, .comment-speed, .dm-speed, .welcome-dm-speed, .unfollow-speed) > :is(.mdi, .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, .count, .ra-page, .sdf-info, .dm-complete-procentage) { color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body #reactions-pro .aside-list-item .sub > :is(.login-flow-timestamp, .count, .ra-page, .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), .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), .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), .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 :is(i, .mdi, .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(--surface-raised) !important; color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !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, .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; }
@media (min-width: 768px) {
  html:is([data-skin="sg26"],#sg-skin) body.sghas-0796688e #reactions-pro .rp-schedule-save-bar.is-fixed { width: auto !important; right: 96px !important; }
}
/* 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). */
html:is([data-skin="sg26"],#sg-skin) body.sghas-0796688e #reactions-pro .rp-schedule-save-bar:not(.is-fixed) { width: auto !important; max-width: none !important; margin-right: 64px !important; }
/* 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). */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body.sghas-0796688e #reactions-pro .rp-schedule-save-bar.is-fixed { width: auto !important; right: 76px !important; }
}
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, 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, .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, .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, .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, .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, .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 :is(.rp-accelerator-metrics-dropdown-icon, .rp-action-block-group-icon) :is(.mdi, svg) { 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, button), .rp-action-block-group-chevron) {
  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, button), .rp-action-block-group-chevron):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, .rp-activity-report-section, .rp-task-metrics-panel, .rp-activity-summary > *, .rp-stats-autorefresh, .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"], button.active, 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 :is(.rp-activity-empty, .rp-activity-empty-state) :is(strong, h3, h4, .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, .col.s12.m12.l8, .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, 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, .trigger, .keyword, .frequency, .message-type, .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, 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, .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, 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 :is(a, .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 :is(.st-feat, .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, .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, .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"], select, textarea) {
  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, select, textarea):hover { border-color: var(--border-strong-hover) !important; }
html[data-skin="sg26"] body .stn-page .stn-field :is(input, select, 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, 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, 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"], select) { 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, .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, .stka-back, .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, .stka-back, .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, 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, .stkb-cta a, .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, .stkb-cta a, .stka-cta a):hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html[data-skin="sg26"] body :is(.stkb-search button, .stkb-cta a, .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 :is(.stkb-featured, .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 :is(.stkb-featured, .stkb-cats) > a:hover { background: var(--surface-raised) !important; border-color: var(--border-2) !important; }
html[data-skin="sg26"] body :is(.stkb-featured, .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, h3, h4, 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, 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, ul, ol) { margin: 0 0 16px !important; }
html[data-skin="sg26"] body .stka-body :is(b, 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, h3, h4, 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, .st-form-banner, .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, h2), html[data-skin="sg26"] body .stka-card :is(h1, 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, .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, .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 > :is(.section-content, .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, .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(--surface-raised) !important; color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !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, .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:has(> .srep-growth) > .srep-chart-box__title { 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:has(> .srep-growth) > .srep-chart-box__sub { 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:has(> .srep-growth) > .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:has(> .srep-growth) > .srep-impact {
  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, .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:has(> .srep-growth) > .srep-impact { 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, .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(--surface-raised) !important; color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !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, .srep-rank--2, .srep-hash-rank--1, .srep-hash-rank--2, .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, .srep-hash-uses, .srep-hash-pct, .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, .srep-hash-bar, .srep-compare-track, .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, .srep-hash-bar i, .srep-compare-fill) { 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, .srep-cmp-row) { border-color: var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sghas-8dbfb918 :is(.srep-comp-card, .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, .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, .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, .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 :is(.rpt-kpis, .rpt-stat3) > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
html[data-skin="sg26"] body .rpt-root :is(.rpt-kpis, .rpt-stat3) dt { font: 400 12px/16px var(--f); color: var(--text-2); }
html[data-skin="sg26"] body .rpt-root :is(.rpt-kpis, .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 :is(.rpt-kpis, .rpt-stat3) dd.up { color: var(--status-success); }
html[data-skin="sg26"] body .rpt-root :is(.rpt-kpis, .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 .rpt-bar-track:is(.acc, .me) > 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 :is(.rpt-kpis, .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, .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), .srep-chart-box:has(> .srep-hash)) { 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), .srep-chart-box:has(+ .srep-section + .srep-chart-box > .srep-compare)) { 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), .srep-chart-box:has(> .srep-compare)) { 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, .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, .sg-trial-secondary, .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"]:has(> body > .card > p.otp) { background: var(--bg); }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) { 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:has(> .card > p.otp) > .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:has(> .card > p.otp) > .card > * { margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .logo { text-align: center; padding-bottom: 6px; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .logo img { max-height: 22px !important; max-width: 180px !important; filter: var(--logo-filter); }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .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:has(> .card > p.otp) h1 { font: 500 19px/26px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .card > p { font: 400 13px/20px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .card > p.state { font: 600 13px/18px var(--f) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .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:has(> .card > p.otp) .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:has(> .card > p.otp) .banner-h { font: 500 14px/20px var(--f) !important; color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) .banner-p { font: 400 13px/20px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) 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:has(> .card > p.otp) 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:has(> .card > p.otp) form .btn-out:hover { background: rgba(var(--t), .16) !important; }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) 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:has(> .card > p.otp) form .btn-in:hover { box-shadow: var(--sg-glow-hover) !important; transform: translateY(-1px); }
html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) 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:has(> .card > p.otp) { padding: 20px 16px; }
  html:is([data-skin="sg26"],#sg-skin) body:has(> .card > p.otp) > .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; }