/* [SG-PATCH 2026-10-10 A282 | Felix] sg2026 skin, batch B2: tokens, both themes, «Timeable», base type, page background.
   Plan: Deliverables/2026-10-10-socialgrow-sg2026-dev-install-plan.md §3.3, §3.7. Canon: GL-003 §7.3, §7.7.1-§7.7.9.
   Values: kit tokens-v5.json + kit-v5.css §1-§3 (sha256 7a7f5dc5… at B2), ported as-is; where kit and GL-003 differ, GL-003.
   This file loads only when sg2026 is the active theme (global or admin preview): the B1 buffer adds data-skin="sg26" on <html>
   and this <link> before </head>. With the default theme nothing here is requested.

   THEME HOOKS, as in the code (GL-003 §7.7.9): dark = body.darkside; light = body without it; a dark container in a light page =
   [data-theme="dark"]. Fixed-dark pages declare it on <body> (auth and support «darkside», /renew data-theme="dark"); pages
   with a bare <body> and no app topbar are never repainted (§9, A282.1). The topbar switch toggles body.darkside; tokens follow.

   BRAND (GL-003 §7.7.7): on a tenant the server injects the 8 --brand-* per theme (:root light, body.darkside dark,
   BrandTokens.php) and adds body.np-reseller. This file never writes --brand-* on a tenant that has a colour: platform values
   are scoped to body:not(.np-reseller). --sg-* are derived here from --brand-primary and never come from the server.
   Section 6 removes the A273 1-bis freeze of --pf-* on tenants (D15 d): every accent role reads --brand-*.

   Not here (later batches): shell and page gap (B3), component rules and link colours (B4), the kit's type utility classes
   and h1-p margin reset (B4: class names collide with product classes such as .label, .caption, .list, .muted). */
/* stylelint-disable no-descending-specificity -- the token blocks set disjoint custom properties per theme/brand; the only
   overlapping properties (background and colour on body/html) are ordered and commented in §9. */

/* 1. DARK (default) + theme-neutral tokens. On body, on every container that declares a theme, and on <html> (page canvas). */
html[data-skin="sg26"],
html[data-skin="sg26"] body,
html[data-skin="sg26"] body [data-theme] {
  color-scheme: dark;
  --sg-accent-2: oklch(from var(--brand-primary) min(calc(l + .16), .9) calc(c * .75) h);
  --sg-deep: oklch(from var(--brand-primary) calc(l - .09) c h);
  --sg-fill-1: oklch(from var(--brand-primary) clamp(.2, calc(l - .05 * var(--sg-dir)), .97) c h);
  --sg-fill-2: oklch(from var(--brand-primary) clamp(.2, calc(l - .09 * var(--sg-dir)), .97) c h);
  --sg-fill-3: oklch(from var(--brand-primary) clamp(.2, calc(l - .16 * var(--sg-dir)), .97) c h);
  --sg-soft: oklch(from var(--sg-accent-2) max(l, .86) min(c, .075) h);
  --sg-ink-2: oklch(from var(--sg-accent-2) max(l, .72) c h);
  --sg-save: oklch(from var(--sg-accent-2) max(l, .9) min(c, .06) h);
  --sg-gradient: linear-gradient(135deg, var(--sg-accent-2) 0%, var(--brand-primary) 55%, var(--sg-deep) 100%);
  --sg-gradient-fill: linear-gradient(135deg, var(--sg-fill-1) 0%, var(--sg-fill-2) 55%, var(--sg-fill-3) 100%);
  --sg-glow-rest: inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 55%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--brand-primary) 60%, transparent);
  --sg-glow-hover: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px color-mix(in srgb, var(--sg-accent-2) 55%, transparent), 0 0 24px color-mix(in srgb, var(--sg-accent-2) 30%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--brand-primary) 80%, transparent);
  --sg-grad-text: linear-gradient(92deg, #fff, oklch(from var(--sg-accent-2) .96 .03 h) 30%, oklch(from var(--sg-accent-2) .85 .09 h) 64%, var(--brand-primary-text));
  --hl-a1: 20%; --hl-a2: 6%; --glow-a1: 30%; --glow-a2: 10%; --tile-a1: 18%; --tile-a2: 22%;
  --bg: #000; --topbar-bg: #000; --surface: #0e0e10; --surface-hi: #161618; --surface-alt: #1c1c1e; --surface-raised: #2c2c2e;
  --row-bg: #2c2c2e; --tonal-bg: #2c2c2e; --input-bg: #1c1c1e; --switch-off: #2c2c2e; --switch-knob: #d1d1d6;
  --knob-shadow: 0 2px 4px rgba(0,0,0,.4); --modal-bg: linear-gradient(180deg, #1c1c1e, #141416);
  --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.12); --border-hover: rgba(255,255,255,.24); --border-dash: rgba(255,255,255,.14);
  --inset-border: rgba(255,255,255,.09); --hi: rgba(255,255,255,.06); --hover-fill: rgba(255,255,255,.06);
  --fill-1: rgba(255,255,255,.025); --fill-2: rgba(255,255,255,.035); --fill-3: rgba(255,255,255,.04);
  --card-bg: linear-gradient(180deg, var(--surface-hi), var(--surface));
  --card-edge: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06) 34%, rgba(255,255,255,.08));
  --card-shadow: inset 0 1px 0 var(--hi);
  --grad-card-bg: linear-gradient(180deg, #1c1c1e, #111113); --grad-card-mid: rgba(255,255,255,.1);
  --grad-card-shadow: inset 0 1px 0 var(--border), 0 40px 100px -40px color-mix(in srgb, var(--brand-primary) 50%, transparent);
  --sidebar-line: var(--border); --sidebar-shadow: none; --topbar-line: var(--border); --topbar-avatar: 36px; --menu-line: var(--border-2); --r-menu: 14px;
  --border-strong: #7e7e7e; --border-strong-hover: #8e8e93;
  --text: #f5f5f7; --text-2: #d1d1d6; --text-muted: #c7c7cc; --text-3: #aeaeb2; --text-subtle: #aeaeb2; --text-max: #fff;
  --btn2-bg: #f5f5f7; --btn2-bg-hover: #fff; --btn2-fg: #000; --outline-fg: #fff;
  --outline-border: color-mix(in srgb, var(--sg-accent-2) 60%, transparent); --danger-hover-fg: #ff8a82;
  --status-success: #30d158; --status-danger: #ff6961; --status-danger-line: #ff453a; --status-warning: #ffd60a; --status-info: #64d2ff; --live: #30d158;
  --t-success: 48,209,88; --t-danger: 255,69,58; --t-warning: 255,214,10; --t-info: 100,210,255; --t-neutral: 255,255,255;
  --scrim: rgba(0,0,0,.66); --shadow-c: rgba(0,0,0,.9); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-lg: 0 40px 100px -30px rgba(0,0,0,.95); --logo-filter: none;
  --f: "Timeable", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: var(--f); --font-sans: var(--f); --font-mono: var(--f);
  --r-sm: 6px; --r-md: 10px; --r-inset: 14px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;
  --ease: cubic-bezier(.2,.7,.2,1); --tr: opacity .2s, transform .2s var(--ease); /* [A285.18] compositor-only (was colours + box-shadow: repaint per frame on hover) */
  --sidebar-w: 248px; --rail-w: 76px; --topbar-h: 61px; --pad-page: 32px; --gap-block: 24px; --pad-card: 24px;
}

/* 2. LIGHT (code skin A261/A273/A274). Body without .darkside / data-theme="dark", a light container, or <html> over such a body. */
html[data-skin="sg26"]:not(:has(> body.darkside)):not(:has(> body[data-theme="dark"])),
html[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]),
html[data-skin="sg26"] body [data-theme="light"] {
  color-scheme: light;
  --sg-soft: var(--brand-primary-text);
  --sg-ink-2: oklch(from var(--sg-accent-2) min(l, .55) min(c, .12) h);
  --sg-save: var(--brand-primary-text);
  --sg-glow-rest: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12), 0 8px 22px -10px color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --sg-glow-hover: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 3px color-mix(in srgb, var(--sg-accent-2) 30%, transparent), 0 0 22px color-mix(in srgb, var(--sg-accent-2) 24%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--brand-primary) 60%, transparent);
  --sg-grad-text: linear-gradient(92deg, var(--text), var(--brand-primary-text) 75%);
  --hl-a1: 12%; --hl-a2: 4%; --glow-a1: 16%; --glow-a2: 6%; --tile-a1: 12%; --tile-a2: 14%;
  --bg: #f8f8f8; --topbar-bg: #f8f8f8; --surface: #fff; --surface-hi: #fff; --surface-alt: #f5f5f5; --surface-raised: #fff;
  --row-bg: #f5f5f5; --tonal-bg: #eee; --input-bg: #eee; --switch-off: #e9e9eb; --switch-knob: #fff;
  --knob-shadow: 0 1px 3px rgba(0,0,0,.25); --modal-bg: #fff;
  --border: rgba(0,0,0,.08); --border-2: rgba(0,0,0,.12); --border-hover: rgba(0,0,0,.24); --border-dash: rgba(0,0,0,.18);
  --inset-border: rgba(0,0,0,.08); --hi: rgba(255,255,255,.7); --hover-fill: rgba(0,0,0,.05);
  --fill-1: rgba(0,0,0,.02); --fill-2: rgba(0,0,0,.035); --fill-3: rgba(0,0,0,.04);
  --card-bg: linear-gradient(#fff, #fff); --card-edge: linear-gradient(#fff, #fff);
  --card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.06);
  --grad-card-bg: linear-gradient(180deg, #fff, #f9f9fb); --grad-card-mid: rgba(0,0,0,.08);
  --grad-card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 30px 80px -40px color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --sidebar-line: transparent; --sidebar-shadow: 1px 0 0 rgba(0,0,0,.04), 4px 0 16px rgba(0,0,0,.05); --topbar-line: rgba(0,0,0,.06);
  --topbar-avatar: 36px; --menu-line: transparent; --r-menu: 8px;
  --border-strong: #7c7c80; --border-strong-hover: #636366;
  --text: #1d1d1f; --text-2: #424245; --text-muted: #515154; --text-3: #636366; --text-subtle: #636366; --text-max: #000;
  --btn2-bg: #1d1d1f; --btn2-bg-hover: #000; --btn2-fg: #fff; --outline-fg: var(--brand-primary-text); --outline-border: var(--brand-primary-border); --danger-hover-fg: #8c1d18;
  --status-success: #13702c; --status-danger: #b3261e; --status-danger-line: #d70015; --status-warning: #8a5a00; --status-info: #006a9e; --live: #16a34a;
  --t-success: 19,112,44; --t-danger: 215,0,21; --t-warning: 138,90,0; --t-info: 0,106,158; --t-neutral: 0,0,0;
  --scrim: rgba(0,0,0,.32); --shadow-c: rgba(0,0,0,.16); --shadow-sm: 0 1px 2px rgba(0,0,0,.12); --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.28); --logo-filter: brightness(0);
}

/* 3. PLATFORM accent (GL-003 §7.3, «Accento di piattaforma»): the code's --pf-* values, as the kit's --brand-* defaults.
      Never on a tenant (body.np-reseller): there the server's --brand-* rule. --sg-dir 1 and the azure #5ac8fa as renderVals().
      [A282.1] The derived rows (primary, text, border, subtle) are BrandTokens.php's output for #2b69e9 (Iris 10/10, D15 j:
      #739cf0 -> #729cf0, #427aeb -> #447aec, #255bcb -> #255bc9). Decided values, not derived: on-primary #fff, hover/active
      #003569, focus ring #fff / #162f61. skin/tools/drift-check.php compares the rows between the markers with
      BrandTokens::buildTokenCss('#2b69e9'); keep one declaration per line there. */
/* drift:platform-brand:begin */
html[data-skin="sg26"] body:not(.np-reseller),
html[data-skin="sg26"] body:not(.np-reseller) [data-theme] {
  --brand-primary: #2b69e9;
  --brand-on-primary: #fff;
  --brand-primary-hover: #003569;
  --brand-primary-active: #003569;
  --brand-primary-text: #729cf0;
  --brand-focus-ring: #fff;
  --brand-primary-border: #447aec;
  --brand-primary-subtle: rgba(43,105,233,.18);
  --sg-dir: 1; --sg-accent-2: #5ac8fa;
}
html[data-skin="sg26"] body:not(.np-reseller):not(.darkside):not([data-theme="dark"]),
html[data-skin="sg26"] body:not(.np-reseller) [data-theme="light"] {
  --brand-primary-text: #255bc9;
  --brand-focus-ring: #162f61;
  --brand-primary-border: #2b69e9;
  --brand-primary-subtle: rgba(43,105,233,.12);
}
/* drift:platform-brand:end */

/* 4. TENANT --sg-dir: 1 = white label on --brand-primary, -1 = black label. The kit sets it in renderVals(); the server never
      emits --sg-*. Here it is computed from the same colour with the WCAG luminance that BrandTokens::flip() uses
      (white iff L <= 0.17913): OKLCH -> OKLab -> LMS -> Y, inside the oklch(from var(--brand-primary) …) of --sg-fill-*, where
      var(--sg-dir) is substituted and l, c, h are the primary's channels. Used nowhere else (kit: the three fills only). */
html[data-skin="sg26"] body.np-reseller,
html[data-skin="sg26"] body.np-reseller [data-theme] {
  --sg-dir: clamp(-1, calc((0.1791287847 - (
      -0.040774541 * pow(calc(l + 0.3963377774 * c * cos(calc(h * 1deg)) + 0.2158037573 * c * sin(calc(h * 1deg))), 3)
      + 1.112492185 * pow(calc(l - 0.1055613458 * c * cos(calc(h * 1deg)) - 0.0638541728 * c * sin(calc(h * 1deg))), 3)
      - 0.071717644 * pow(calc(l - 0.0894841775 * c * cos(calc(h * 1deg)) - 1.291485548 * c * sin(calc(h * 1deg))), 3)
    )) * 100000), 1);
}

/* 5. TENANT WITHOUT A COLOUR (the server emits no :root): the neutral family of GL-003 §7.3 «Fallback dei token --brand-*»,
      v5 values per role (riempimento, primo piano, linea, superficie tenue). Zero specificity, so the server's :root{} and
      body.darkside{} win whenever they exist. Never a platform colour (Regola 1). */
:where(html[data-skin="sg26"]:has(> body.np-reseller)) {
  --brand-primary: #1d1d1f; --brand-on-primary: #f5f5f7; --brand-primary-hover: #1d1d1f; --brand-primary-active: #1d1d1f;
  --brand-primary-text: #1d1d1f; --brand-focus-ring: #1d1d1f; --brand-primary-border: #1d1d1f; --brand-primary-subtle: #f5f5f5;
}
:where(html[data-skin="sg26"] body.np-reseller.darkside) {
  --brand-primary: #f5f5f7; --brand-on-primary: #1d1d1f; --brand-primary-hover: #f5f5f7; --brand-primary-active: #f5f5f7;
  --brand-primary-text: #f5f5f7; --brand-focus-ring: #f5f5f7; --brand-primary-border: #f5f5f7; --brand-primary-subtle: #1c1c1e;
}

/* 6. LEGACY ALIASES. The kit's --pf-* point at --brand-*, so v4 inline styles and core rules that read --pf-* follow the active
      brand (D15 d: the A273 1-bis freeze of --pf-* at #3b7cff on tenants goes). --pf-accent-gradient was #2b69e9 -> #8558ec (violet,
      D15 b); it carries white text (.gr-service-icon), so it becomes the text-bearing --sg-gradient-fill (GL-003 §7.7.6).
      --sg-acc-* are the code's private aliases for the old #3b7cff literals (A273 §1), undefined on tenants: defined here for both
      (D15 k). --pf-accent-hover / -active keep the code value (#003569, the pressed; hover is a glow, B4).
      [data-skin][data-skin] = specificity (0,2,2) on body: it must beat body.np-reseller.darkside (0,2,1) of the freeze. */
html[data-skin="sg26"][data-skin] body,
html[data-skin="sg26"][data-skin] body [data-theme] {
  --pf-accent: var(--brand-primary); --pf-on-accent: var(--brand-on-primary); --pf-accent-2: var(--sg-accent-2); --pf-accent-deep: var(--sg-deep);
  --pf-accent-text: var(--brand-primary-text); --pf-accent-soft: var(--sg-soft); --pf-accent-border: var(--brand-primary-border);
  --pf-focus-ring: var(--brand-focus-ring); --pf-accent-subtle: var(--brand-primary-subtle);
  --pf-gradient: var(--sg-gradient); --pf-gradient-fill: var(--sg-gradient-fill); --pf-accent-gradient: var(--sg-gradient-fill);
  --sg-acc-fill: var(--brand-primary); --sg-acc-text: var(--brand-primary-text); --sg-acc-line: var(--brand-primary-border);
}

/* 7. Browsers without relative colours: the kit's platform literals (decorations only; the 8 --brand-* never depend on this).
      On a tenant the platform azure would be an identity leak (GL-003 §7.0.1), so there the decorations fall back to the brand. */
@supports not (color: oklch(from red l c h)) {
  html[data-skin="sg26"] body,
  html[data-skin="sg26"] body [data-theme] {
    --sg-accent-2: #5ac8fa; --sg-deep: #2052c0; --sg-fill-1: #275fd2; --sg-fill-2: #2356bf; --sg-fill-3: #1d479e;
    --sg-soft: #a7d8ff; --sg-ink-2: #5ac8fa; --sg-save: #bfe3ff;
    --sg-grad-text: linear-gradient(92deg, #fff, #e3f5ff 30%, #8fd8fb 64%, var(--brand-primary-text));
  }
  html[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]),
  html[data-skin="sg26"] body [data-theme="light"] {
    --sg-ink-2: #0071a4; --sg-grad-text: linear-gradient(92deg, #1d1d1f, var(--brand-primary-text) 75%);
  }
  html[data-skin="sg26"] body.np-reseller,
  html[data-skin="sg26"] body.np-reseller [data-theme] {
    --sg-accent-2: var(--brand-primary); --sg-deep: var(--brand-primary);
    --sg-fill-1: var(--brand-primary); --sg-fill-2: var(--brand-primary); --sg-fill-3: var(--brand-primary);
    --sg-soft: var(--brand-primary-text); --sg-ink-2: var(--brand-primary-text); --sg-save: var(--brand-primary-text);
    --sg-grad-text: linear-gradient(92deg, var(--text), var(--brand-primary-text) 75%);
  }
}

/* 8. Page rhythm per width (GL-003 §7.7.8). The kit uses container queries on .app; the product cannot put a container on
      body (plan §3.3), so the same thresholds as media queries. */
@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body { --pad-page: 24px; --gap-block: 20px; --pad-card: 20px; }
}
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body { --pad-page: 16px; --gap-block: 16px; --pad-card: 16px; }
}

/* 9. Base type and page background (kit §4; GL-003 §7.7.1, §7.7.8: body 400 14/22, tabular figures). «Timeable» is the
      platform's own @font-face (core.css A268, weights 300-800, preloaded by Controller::view()): nothing is uploaded here.
      Background and colour need !important: topbar.fragment.php's global <style> paints
      body.darkside {background:#0a0a0b !important; color:#e5e7eb !important} (line 17), and some views paint the body inline
      (renew.fragment.php, the reseller shells). !important on a more specific selector beats both.
      [A282.1] PAINT ONLY WHERE THE THEME IS KNOWN (Vera B2 gate, C1/H1). The absence of .darkside is not a theme: standalone
      pages (lead-mailer unsubscribe, PMP ig-auth, wa-preferences, vendor views) paint themselves, dark or light, with a bare
      <body>. The theme is known when the body declares dark (.darkside, data-theme="dark") or when the page carries the app
      topbar (#topbar, core and PMP), whose switch makes «no class» mean «light by the user's choice». Anywhere else the page
      keeps its own background, colour and type. The tokens above still resolve everywhere; a later batch that restyles a
      standalone page declares its theme on <body> first. */
html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"], :has(> #topbar)) {
  background: var(--bg) !important;
  color: var(--text) !important;
  font: 400 14px/22px var(--f);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
/* The canvas around a short page, and the splash (D15 g): the loader paints html and #npr-loader #0a0a0b / #fafafa, partly with
   !important (loader.fragment.php, core.css A193/A261). The html selector beats html.npr-light.npr-loading and
   html:has(> body.darkside). Same «theme known» gate (:has() cannot nest, hence three branches). Ring and bar keep their colours. */
html:root[data-skin="sg26"]:is(:has(> body.darkside), :has(> body[data-theme="dark"]), :has(> body > #topbar)) {
  background: var(--bg) !important; background-color: var(--bg) !important;
}
html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"], :has(> #topbar)) #npr-loader { background: var(--bg); }

/* 10. SHELL (B3, A283): sidebar, rail, drawer, topbar, page gap. GL-003 §7.7.8, §7.7.10; kit §7, §9, the 2026-10-09/10d/10e
      blocks and §12 (kit sha d88b5268… at B3); measured facts: 2026-10-10-socialgrow-original-shell-facts.
      HOW: the sidebar is the skin's override of navigation.fragment.php (only its brand block differs from the original). The
      topbar is the ORIGINAL markup of the core and PMP topbar fragments, restyled here: since Angelo's 10/10 decision the canon's
      bar holds the original's items in the original's order (hamburger, title, page buttons; Ricarica cache, gear, bell, moon,
      greeting, avatar), so no markup is forked and every hook stays (bypassing-toolkit's button class, Headway, the switch's
      data-url/data-fixed, the context menu, the renew pill).
      The legacy shell rules carry !important at (0,1,1)-(0,3,2) (topbar.fragment.php's <style>, core.css, PMP css, inline
      styles of plugin menu tiles): the rules below repeat the html[data-skin] body prefix and use !important where they meet them.
      The bar is IN FLOW (the original is fixed > 992, absolute <= 992): a row that wraps pushes the content down, never covers it.
      Breakpoints are the kit's container widths as media queries (plan §3.3). */

/* 10.1 Column geometry: the content starts after the sidebar (248) / rail (76) / nothing (phone). */
html[data-skin="sg26"] body:has(> nav .nav-menu) { --sg-shell-left: var(--sidebar-w); padding-left: var(--sg-shell-left) !important; margin-left: 0 !important; width: auto !important; }
@media (max-width: 1023.98px) { html[data-skin="sg26"] body:has(> nav .nav-menu) { --sg-shell-left: var(--rail-w); } }
@media (max-width: 767.98px) { html[data-skin="sg26"] body:has(> nav .nav-menu) { --sg-shell-left: 0px; } }
html[data-skin="sg26"] body #inbox-chat-frame { left: var(--sg-shell-left, 0px) !important; } /* direct-basic / ai-dm: was left:70px (the old rail) */

/* 10.2 Sidebar: 248, full height, logo on top, the menu scrolls inside, nothing at the bottom. */
html[data-skin="sg26"] body > nav {
  position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 501;
  width: var(--sidebar-w) !important; height: 100vh !important; height: 100dvh !important; box-sizing: border-box;
  display: flex !important; flex-direction: column; gap: 2px; padding: 20px 14px !important; overflow: visible !important;
  background: var(--surface) !important; border-right: 1px solid var(--sidebar-line) !important; box-shadow: var(--sidebar-shadow) !important;
  visibility: visible !important; transform: none !important; transition: transform .3s var(--ease), visibility .3s;
  font: 500 14px/20px var(--f); color: var(--text-2);
}
html[data-skin="sg26"] body > nav .sg-nav-close { display: none; }
html[data-skin="sg26"] body > nav .nav-logo-wrapper.sg-brand {
  position: static !important; flex-shrink: 0; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important;
  background: transparent !important; text-align: left !important;
}
html[data-skin="sg26"] body > nav .sg-brand-link {
  position: static !important; display: flex !important; flex-direction: column; align-items: flex-start; width: auto !important; height: auto !important;
  margin: 0 !important; border-radius: var(--r-md); text-decoration: none;
}
html[data-skin="sg26"] body > nav .sg-brand .sg-logo {
  position: static !important; display: block; height: 24px !important; width: auto !important; max-width: 200px !important; max-height: none !important;
  margin: 2px 0 22px 10px !important; object-fit: contain; object-position: left center; inset: auto;
}
html[data-skin="sg26"] body > nav .sg-brand .sg-wordmark { font: 700 17px/24px var(--f); letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="sg26"] body > nav .sg-brand .sidebar-mark { display: none !important; }
/* theme variant of a logo pair (only printed when both files exist) */
html[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]) > nav .sg-brand .is-dk,
html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"]) > nav .sg-brand .is-lt { display: none !important; }

/* menu: scrolls inside the sidebar (the -4px/4px pair keeps focus rings unclipped) */
html[data-skin="sg26"] body > nav .nav-menu {
  position: static !important; flex: 1 1 auto; min-height: 0; width: auto !important; height: auto !important; margin: -4px !important; padding: 4px !important;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; scroll-padding-block: 4px;
  background: transparent !important; border: 0 !important; box-shadow: none !important; font: inherit; line-height: inherit;
}
html[data-skin="sg26"] body > nav .nav-menu > div { max-height: none !important; overflow: visible !important; display: flex; flex-direction: column; }
html[data-skin="sg26"] body > nav .nav-menu ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0 !important; }
html[data-skin="sg26"] body > nav .nav-menu ul + ul::before { content: ""; display: block; height: 1px; margin: 6px 12px; background: var(--border); }
html[data-skin="sg26"] body > nav .nav-menu li { position: relative; overflow: visible; border: 0 !important; margin: 0; padding: 0; }
html[data-skin="sg26"] body > nav .nav-menu li > a {
  position: relative; display: flex !important; align-items: center; gap: 12px; width: auto !important; height: auto !important; min-height: 36px; padding: 8px 12px !important;
  box-sizing: border-box; border-radius: var(--r-md); color: var(--text-2) !important; background: transparent !important; text-align: left !important;
  font: 500 14px/20px var(--f) !important; text-decoration: none; transition: var(--tr);
}
html[data-skin="sg26"] body > nav .nav-menu li > a:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html[data-skin="sg26"] body > nav .nav-menu li.active > a {
  background: var(--brand-primary-subtle) !important; color: var(--sg-soft) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sg-accent-2) 20%, transparent);
}
html[data-skin="sg26"] body > nav .nav-menu li > a::after { content: none !important; }
html[data-skin="sg26"] body > nav .nav-menu li > a:focus-visible,
html[data-skin="sg26"] body > nav .sg-brand-link:focus-visible,
html[data-skin="sg26"] body > nav .sg-nav-close:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body > nav .nav-menu .label {
  position: static !important; flex: 1 1 auto; min-width: 0; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  overflow: hidden !important; clip: auto !important; clip-path: none !important; white-space: normal !important; text-overflow: clip;
  font: inherit !important; vertical-align: baseline !important; display: block !important;
}
html[data-skin="sg26"] body > nav .nav-menu :is(.tooltip, a > .tippy) { display: none !important; }
/* icons: 18px in --text-3; plugin «special» tiles lose their painted tile (inline colours, violet gradients) and become a glyph */
html[data-skin="sg26"] body > nav .nav-menu :is(.menu-icon, .special-menu-icon) {
  display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; width: 18px !important; height: 18px !important;
  margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 18px !important; color: var(--text-3) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important;
  text-transform: none; overflow: visible; vertical-align: middle;
}
html[data-skin="sg26"] body > nav .nav-menu .special-menu-icon > * { font-size: 18px !important; line-height: 18px !important; color: inherit !important; }
html[data-skin="sg26"] body > nav .nav-menu li > a:hover :is(.menu-icon, .special-menu-icon) { color: var(--text-max) !important; }
html[data-skin="sg26"] body > nav .nav-menu li.active > a :is(.menu-icon, .special-menu-icon) { color: var(--sg-soft) !important; }
/* «Torna all'amministratore» (impersonation exit): the orange row of the boards (G-04), not a tile */
html[data-skin="sg26"] body > nav .nav-menu a[onclick*="sg-imp-exit-form"] { background: #ff9900 !important; color: #000 !important; }
html[data-skin="sg26"] body > nav .nav-menu a[onclick*="sg-imp-exit-form"] .special-menu-icon { color: #000 !important; }

/* 10.3 Rail, 768-1023: 76px of icons, the mark on top; the hamburger opens it over the page (248, scrim). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav { width: var(--rail-w) !important; padding: 16px 12px !important; align-items: center; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand { align-items: center; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand-link { align-items: center; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand .sg-logo { display: none !important; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand .sidebar-mark {
    display: block !important; flex-shrink: 0; box-sizing: border-box; height: 30px !important; width: auto; max-width: 52px; margin: 0 0 14px !important;
    object-fit: contain; position: static !important;
  }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand .sidebar-mark.is-mono {
    display: grid !important; place-items: center; width: 30px; border-radius: var(--r-md); background: var(--brand-primary); color: var(--brand-on-primary); font: 700 13px/1 var(--f);
  }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .sg-brand .sidebar-mark.is-mono::before { content: attr(data-mono); }
  html[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]):not(.mobile-menu-open) > nav .sg-brand .sidebar-mark.is-dk,
  html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"]):not(.mobile-menu-open) > nav .sg-brand .sidebar-mark.is-lt { display: none !important; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu { align-self: stretch; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu ul { align-items: center; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu ul + ul::before { width: 32px; margin: 6px auto; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu li > a { width: 48px !important; height: 44px !important; padding: 0 !important; gap: 0; justify-content: center; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu :is(.menu-icon, .special-menu-icon) { width: 20px !important; height: 20px !important; font-size: 20px !important; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu .special-menu-icon > * { font-size: 20px !important; }
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu .label {
    position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  }
  /* rail closed: the original's tippy tooltips name the icons on hover */
  html[data-skin="sg26"] body:not(.mobile-menu-open) > nav .nav-menu .tooltip { display: block !important; position: absolute; inset: 0; }
}
/* 10.4 Phone, < 768: off-canvas drawer, same items and order, full height. */
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body > nav { width: min(300px, 86%) !important; padding: 16px 12px !important; visibility: hidden !important; transform: translateX(-104%) !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav { visibility: visible !important; transform: none !important; }
  html[data-skin="sg26"] body > nav .nav-menu li > a { min-height: 44px; padding-block: 12px !important; font-size: 15px !important; }
}
/* open state below 1024 (the class core.js toggles from the hamburger): scrim, shadow, close button */
@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body.mobile-menu-open { overflow: hidden; }
  html[data-skin="sg26"] body.mobile-menu-open::after { content: ""; position: fixed; inset: 0; z-index: 500; background: var(--scrim); }
  html[data-skin="sg26"] body.mobile-menu-open > nav { box-shadow: var(--shadow-lg) !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-nav-close {
    display: inline-flex; align-self: flex-end; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: -4px 0 4px;
    padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-2); cursor: pointer;
  }
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-nav-close:hover { background: var(--hover-fill); color: var(--text-max); }
}

/* 10.5 Topbar: 61px first row (60 + 1px line), padding 0 30 (<=992: 0 10 0 20), wraps like the original and grows. */
html[data-skin="sg26"] body #topbar {
  position: relative !important; top: auto !important; left: auto !important; z-index: 20; width: auto !important; transform: none !important;
  box-sizing: border-box; background: var(--topbar-bg) !important; border-bottom: 1px solid var(--topbar-line) !important; transition: none !important;
}
html[data-skin="sg26"] body #topbar > div {
  display: flex !important; flex-wrap: wrap; align-items: center; align-content: center; column-gap: 12px; row-gap: 0;
  min-height: 60px; box-sizing: border-box; padding: 8px 30px !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html[data-skin="sg26"] body #topbar > div::before,
html[data-skin="sg26"] body #topbar > div::after { content: none !important; display: none !important; }
/* the legacy .clearfix helpers: inside a flex row their ::before/::after would be empty items, each costing a gap */
html[data-skin="sg26"] body #topbar .clearfix::before,
html[data-skin="sg26"] body #topbar .clearfix::after { content: none !important; display: none !important; }
@media (max-width: 992px) { html[data-skin="sg26"] body #topbar > div { padding: 8px 10px 8px 20px !important; } }
/* hamburger: shown below 1024 (rail and phone), 40px target (44 on the phone), 24px glyph */
html[data-skin="sg26"] body #topbar .topbar-mobile-menu-icon {
  display: none !important; float: none !important; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important;
  border-radius: var(--r-full); color: var(--text-2) !important; font-size: 24px !important; line-height: 1 !important; text-decoration: none; transition: var(--tr);
}
@media (max-width: 1023.98px) { html[data-skin="sg26"] body #topbar .topbar-mobile-menu-icon { display: inline-flex !important; } }
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .topbar-mobile-menu-icon { width: 44px; height: 44px; } }
/* title: the page's <h1>, never truncated */
html[data-skin="sg26"] body #topbar .topbar-title {
  float: none !important; min-width: 0; margin: 0 !important; font: 500 18px/22px var(--f) !important; letter-spacing: -.02em; color: var(--text) !important;
}
html[data-skin="sg26"] body #topbar .topbar-subtitle { float: none !important; margin: 0 !important; font: 400 13px/18px var(--f) !important; color: var(--text-3) !important; }
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body #topbar > div { column-gap: 4px; }
  html[data-skin="sg26"] body #topbar .topbar-title { font-size: 12px !important; line-height: 18px !important; }
  html[data-skin="sg26"] body #topbar .topbar-subtitle { font-size: 12px !important; line-height: 16px !important; }
}
@media (max-width: 425px) {
  html[data-skin="sg26"] body #topbar .topbar-title {
    position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  }
  html[data-skin="sg26"] body #topbar .topbar-subtitle { display: none !important; }
}
/* core page buttons: icon + text at every width; the first is the primary, the others tonal (boards: AdminProxies) */
html[data-skin="sg26"] body #topbar .topbar-special-link {
  float: none !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; height: 32px; margin: 0 !important;
  padding: 0 14px; box-sizing: border-box; border-radius: var(--r-full); border: 1px solid var(--border-2); background: var(--tonal-bg);
  box-shadow: inset 0 1px 0 var(--hi); color: var(--text) !important; font: 500 13px/18px var(--f) !important; white-space: nowrap; text-decoration: none; transition: var(--tr);
}
html[data-skin="sg26"] body #topbar .topbar-special-link:hover { color: var(--text-max) !important; border-color: var(--border-hover); }
html[data-skin="sg26"] body #topbar .topbar-special-link:not(.topbar-special-link ~ .topbar-special-link) {
  background: var(--brand-primary); border-color: transparent; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest);
}
html[data-skin="sg26"] body #topbar .topbar-special-link:not(.topbar-special-link ~ .topbar-special-link):hover { transform: translateY(-1px); box-shadow: var(--sg-glow-hover); }
html[data-skin="sg26"] body #topbar .topbar-special-link .icon { display: inline-flex !important; margin: 0 !important; font-size: 16px !important; line-height: 1 !important; transform: none !important; vertical-align: 0 !important; }
@media (max-width: 768px) {
  html[data-skin="sg26"] body #topbar .topbar-special-link { font-size: 12px !important; }
  html[data-skin="sg26"] body #topbar .topbar-special-link .icon { font-size: 14px !important; }
}
/* right cluster, original order: [renew pill (client)] [Ricarica cache] [gear] [bell] [moon + switch] [Ciao, Nome!] [avatar + chevron] */
html[data-skin="sg26"] body #topbar .topbar-actions {
  float: none !important; display: flex !important; align-items: center; gap: 12px; margin-left: auto !important; flex-shrink: 0;
  color: var(--text-2) !important; font: 500 14px/20px var(--f) !important;
}
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .topbar-actions { gap: 4px; } }
html[data-skin="sg26"] body #topbar .topbar-actions > .item {
  float: none !important; display: flex !important; align-items: center; height: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
}
html[data-skin="sg26"] body #topbar .topbar-actions > .item:not(:has(a, input, .greeting, .icon)) { display: none !important; } /* the empty renew cell (client with a package): hidden span only */
html[data-skin="sg26"] body #topbar .topbar-actions .link {
  display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; border-radius: var(--r-full);
  color: var(--text-2) !important; text-decoration: none; transition: var(--tr); cursor: pointer;
}
html[data-skin="sg26"] body #topbar .topbar-actions .link:hover { background: var(--hover-fill); color: var(--text-max) !important; }
html[data-skin="sg26"] body #topbar .topbar-actions .icon { display: block !important; width: 24px; height: 24px; margin: 0 !important; font-size: 24px !important; line-height: 24px !important; color: inherit !important; }
/* theme toggle: moon 24 in --text-3 + the kit switch 42x26; hidden <= 767 (original switcher.css) */
html[data-skin="sg26"] body #topbar .topbar-actions > .item.dark-side-switcher-icon { margin-right: -4px !important; }
html[data-skin="sg26"] body #topbar .dark-side-switcher-icon .icon { margin: 0 !important; color: var(--text-3) !important; cursor: pointer; }
html[data-skin="sg26"] body #topbar .form-switcher-ios.dark-side-switcher { margin: 0 !important; }
html[data-skin="sg26"] body #topbar .form-switcher-ios .switcher {
  width: 42px !important; height: 26px !important; box-sizing: border-box; border: 1px solid var(--border-strong) !important; border-radius: var(--r-full);
  background: var(--switch-off) !important; box-shadow: none !important; transition: var(--tr);
}
html[data-skin="sg26"] body #topbar .form-switcher-ios .switcher::after {
  top: 2px !important; left: 2px !important; width: 20px !important; height: 20px !important; background: var(--switch-knob) !important;
  box-shadow: var(--knob-shadow) !important; transition: transform .35s var(--ease) !important;
}
html[data-skin="sg26"] body #topbar .form-switcher-ios input[type="checkbox"]:checked + .switcher {
  background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; box-shadow: none !important;
}
html[data-skin="sg26"] body #topbar .form-switcher-ios input[type="checkbox"]:checked + .switcher::after { transform: translateX(16px) !important; background: #fff !important; }
html[data-skin="sg26"] body #topbar .form-switcher-ios input[type="checkbox"]:focus-visible + .switcher { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
@media (max-width: 767px) { html[data-skin="sg26"] body #topbar .topbar-actions > .item:is(.dark-side-switcher, .dark-side-switcher-icon) { display: none !important; } }
@media (max-width: 600px) { html[data-skin="sg26"] body #topbar .topbar-actions > .item.hide-on-small-only { display: none !important; } }
/* greeting + account pill: avatar 36 (initials, gradient fill) on core pages, 32 (picture) on Proxy Manager Pro */
html[data-skin="sg26"] body #topbar .topbar-profile { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; }
html[data-skin="sg26"] body #topbar .topbar-profile .greeting { float: none !important; margin: 0 !important; font: 500 14px/20px var(--f) !important; color: var(--text) !important; white-space: nowrap; }
@media (max-width: 600px) { html[data-skin="sg26"] body #topbar .topbar-profile .greeting { display: none !important; } }
html[data-skin="sg26"] body #topbar .context-menu-wrapper {
  float: none !important; position: relative; display: inline-flex !important; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 3px; box-sizing: border-box;
  border-radius: var(--r-full); border: 1px solid var(--border); background: var(--fill-2); cursor: pointer; transition: var(--tr);
}
html[data-skin="sg26"] body #topbar .context-menu-wrapper:hover { background: var(--hover-fill); border-color: var(--border-2); }
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .context-menu-wrapper { gap: 2px; padding-right: 6px; } }
html[data-skin="sg26"] body #topbar .topbar-profile a.circle {
  float: none !important; display: grid !important; place-items: center; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 50%;
  background: var(--sg-gradient-fill); color: var(--brand-on-primary); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-accent-2) 50%, transparent); overflow: hidden; text-decoration: none;
}
html[data-skin="sg26"] body #topbar .topbar-profile a.circle > span {
  display: block !important; width: auto !important; height: auto !important; padding: 0 !important; background: none !important; color: inherit !important;
  font: 700 13px/1 var(--f) !important; letter-spacing: .02em; text-align: center;
}
html[data-skin="sg26"] body #topbar .topbar-profile a.circle:has(> img) { width: 32px; height: 32px; background: var(--surface-raised); }
html[data-skin="sg26"] body #topbar .topbar-profile a.circle > img { display: block; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50%; object-fit: cover; }
html[data-skin="sg26"] body #topbar .topbar-profile .arrow {
  float: none !important; display: block !important; width: 16px; height: 16px; margin: 0 !important; font-size: 16px !important; line-height: 1 !important; color: var(--text-3) !important;
}
/* account menu = the kit .menu with .menu-item rows (14px radius in dark, 8 in light) */
html[data-skin="sg26"] body #topbar .context-menu { top: calc(100% + 6px) !important; right: 0 !important; left: auto !important; margin: 0 !important; }
html[data-skin="sg26"] body #topbar .context-menu > ul {
  min-width: 200px; padding: 6px !important; box-sizing: border-box; border-radius: var(--r-menu) !important; background: var(--surface-raised) !important;
  border: 1px solid var(--menu-line) !important; box-shadow: 0 24px 60px -20px var(--shadow-c) !important; color: var(--text-2) !important;
}
html[data-skin="sg26"] body #topbar .context-menu > ul li { margin: 0; padding: 0; border: 0 !important; list-style: none; }
html[data-skin="sg26"] body #topbar .context-menu > ul li a {
  display: flex !important; align-items: center; width: 100%; height: 36px; padding: 0 10px !important; box-sizing: border-box; border-radius: var(--r-md);
  color: var(--text-2) !important; background: transparent !important; font: 500 14px/20px var(--f) !important; text-decoration: none !important; white-space: nowrap;
}
html[data-skin="sg26"] body #topbar .context-menu > ul li a:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html[data-skin="sg26"] body #topbar .context-menu > ul [class^="menu-separator"] {
  display: block; padding: 10px 10px 4px; font: 500 12px/16px var(--f) !important; letter-spacing: .02em; color: var(--text-3) !important; background: none !important; border: 0 !important;
}
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .context-menu > ul li a { height: 44px; } }
/* focus: the kit ring on every topbar control (§7.7.8) */
html[data-skin="sg26"] body #topbar :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
/* bell badge (Headway's own element): the accent gradient, never red */
html[data-skin="sg26"] body #topbar #HW_badge_cont #HW_badge { background: var(--sg-gradient-fill) !important; color: var(--brand-on-primary) !important; font: 700 12px/18px var(--f) !important; }

/* 10.6 Proxy Manager Pro topbar (its own fragment; recognised by its labels): links .tb-link, «Aggiungi nuovo» primary, icon-only <= 1100 */
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link {
  position: relative; gap: 7px; height: 32px; padding: 0 12px; border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2) !important; font: 500 13px/18px var(--f) !important;
}
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link:hover { background: var(--hover-fill); color: var(--text-max) !important; }
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link .icon { font-size: 15px !important; }
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[aria-current="page"] {
  background: var(--surface-raised); border-color: var(--border-2); color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--hi), var(--shadow-sm);
}
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[href$="/new"] {
  padding: 0 14px; background: var(--brand-primary); border-color: transparent; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-rest);
}
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[href$="/new"]:hover { transform: translateY(-1px); box-shadow: var(--sg-glow-hover); }
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-title-text { display: inline !important; }
@media (max-width: 1100px) {
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) > div { column-gap: 10px; }
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link {
    width: 21px; height: 21px; padding: 0 !important; gap: 0; border: 1px solid transparent; background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; transform: none !important;
  }
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link .icon { font-size: 18px !important; }
  /* Vera B3 gate HIGH: the «/new» primary rule above is more specific than the icon-only reset; reset it too (kit 10d: every PMP link is
     icon-only, transparent, --text-2, at <= 1100; otherwise its white glyph sits on the light bar at 1.06:1). */
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[href$="/new"] {
    padding: 0 !important; background: transparent !important; border-color: transparent; color: var(--text-2) !important; box-shadow: none !important; transform: none !important;
  }
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[href$="/new"]:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; box-shadow: none !important; transform: none !important; }
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link[aria-current="page"] {
    background: var(--surface-raised) !important; border-color: var(--border-2); color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--hi), var(--shadow-sm) !important;
  }
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link::before { content: ""; position: absolute; inset: -11px -5px; }
  /* the name stays the accessible name (the original hid it with display:none) */
  html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-title-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* 10.7 Topbar -> first content, by the original page type (GL-003 §7.7.8; kit --gap-topbar). The bar is in flow, so the legacy
      paddings that cleared a fixed 61px bar become the gap itself: .skeleton 29 (<=992: 18), .skeleton--full 0, PMP lists 0
      (<=1250: 39), PMP Re-login 29 (<=1250: 59). Horizontal: --pad-page; the aside layouts stay flush with the sidebar. */
html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton { padding: 29px var(--pad-page) 30px !important; }
html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton.skeleton--full { padding: 0 !important; }
@media (max-width: 1250px) {
  html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton.skeleton-pmp { padding-top: 39px !important; }
  html[data-skin="sg26"] body:has(> nav .nav-menu) #relogin { padding-top: 59px !important; } /* #relogin IS the .skeleton.skeleton-pmp of Re-login */
}
@media (max-width: 992px) {
  html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton { padding-top: 18px !important; padding-bottom: 20px !important; }
  html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton.skeleton--full { padding-top: 0 !important; }
  html[data-skin="sg26"] body:has(> nav .nav-menu) .skeleton.skeleton-pmp { padding-top: 39px !important; }
}
/* 10.8 Motion: the drawer and the bar never animate under prefers-reduced-motion (GL-003 §7.7.8). */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="sg26"] body > nav,
  html[data-skin="sg26"] body > nav .nav-menu li > a,
  html[data-skin="sg26"] body #topbar :is(.topbar-special-link, .link, .context-menu-wrapper, .switcher, .switcher::after) { transition: none !important; }
  html[data-skin="sg26"] body #topbar .topbar-special-link:hover { transform: none !important; }
}
/* icons:begin (generated by gen-icons.js from the boards' SVGs; do not edit by hand) */
html[data-skin="sg26"] body > nav .nav-menu a[href$="/post"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/calendar"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/captions"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/accounts"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/helpcenter"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/growth"]{--sg-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='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.35 22.35 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")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/support-ticket"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m4.93 4.93 4.24 4.24M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/social-reports"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/reseller-signup"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/reactions"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M2 14h2M20 14h2M15 13v2M9 13v2'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/parser"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h12M3 12h12M3 18h7'/%3E%3Cpath d='m15 18 2 2 4-4'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/parser/webhooks"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2'/%3E%3Cpath d='m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06'/%3E%3Cpath d='m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/affiliate"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/admin/resellers"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.2 13.2 7 22l5-3 5 3-1.2-8.8'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/pod/admin"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5a3.5 3.5 0 0 1 5 5L14 16l-2.2-2.2'/%3E%3Cpath d='M3.5 9.5a3.5 3.5 0 0 1 5-5L10 6l1.5-1.5a3.5 3.5 0 0 1 5 5L10 16z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/slave-manager"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4-4h4'/%3E%3Ccircle cx='18' cy='17' r='2.5'/%3E%3Cpath d='M18 13v1.5M18 19.5V21M14 17h1.5M20.5 17H22'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bypassing-toolkit/integrations"]{--sg-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='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 9.9-1'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/plugins"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6M15 2v6M6 8h12v4a6 6 0 0 1-12 0zM12 18v4'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/services"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/packages"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/users"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/settings/paypal"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/settings"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/lead-mailer"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='m6 7 8 6 8-6M2 10h2M1 14h3'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/email-pro-module"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/slave-dm"]{--sg-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='1.75' 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[data-skin="sg26"] body > nav .nav-menu a[href$="/e/proxy-manager-pro"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/ig/connect"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/ig/connect/domains"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/whatsapp"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/direct-basic"]{--sg-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='1.75' 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[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bulk-accounts"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4-4h4M16 11l3 3-3 3M22 14h-6'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bio"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/repost-pro"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/management"]{--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='5' rx='1'/%3E%3Crect x='2' y='17' width='6' height='5' rx='1'/%3E%3Crect x='16' y='17' width='6' height='5' rx='1'/%3E%3Cpath d='M12 7v5M5 17v-2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.topbar-mobile-menu-icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.js-cache-refresh .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.hide-on-small-only .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.toggleHeadway .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.dark-side-switcher-icon .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(.topbar-profile .arrow){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.link[href$="/post"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/new"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2'/%3E%3Cpath d='M6 6h.01'/%3E%3Cpath d='M11 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h7'/%3E%3Cpath d='M18 13.5l4 1.5v2.8c0 2.3-1.7 3.6-4 4.2-2.3-.6-4-1.9-4-4.2V15z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/users"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/upload"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/relogin"] .icon){--sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body > nav .nav-menu a[href$="/post"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/calendar"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/captions"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/accounts"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/helpcenter"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/growth"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/support-ticket"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/social-reports"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/reseller-signup"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/reactions"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/parser"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/parser/webhooks"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/affiliate"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/admin/resellers"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/pod/admin"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/slave-manager"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bypassing-toolkit/integrations"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/plugins"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/services"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/packages"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/users"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/settings/paypal"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/settings"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/lead-mailer"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/email-pro-module"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/slave-dm"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/proxy-manager-pro"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/ig/connect"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/ig/connect/domains"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/whatsapp"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/direct-basic"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bulk-accounts"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/bio"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/repost-pro"] :is(.sli,.mdi)::before,
html[data-skin="sg26"] body > nav .nav-menu a[href$="/e/management"] :is(.sli,.mdi)::before{content:""!important;display:block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--sg-i) center/100% 100% no-repeat;mask:var(--sg-i) center/100% 100% no-repeat}
html[data-skin="sg26"] body #topbar :is(.topbar-mobile-menu-icon)::before,
html[data-skin="sg26"] body #topbar :is(.js-cache-refresh .icon)::before,
html[data-skin="sg26"] body #topbar :is(.hide-on-small-only .icon)::before,
html[data-skin="sg26"] body #topbar :is(.toggleHeadway .icon)::before,
html[data-skin="sg26"] body #topbar :is(.dark-side-switcher-icon .icon)::before,
html[data-skin="sg26"] body #topbar :is(.topbar-profile .arrow)::before,
html[data-skin="sg26"] body #topbar :is(a.link[href$="/post"] .icon)::before,
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro"] .icon)::before,
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/new"] .icon)::before,
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/users"] .icon)::before,
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/upload"] .icon)::before,
html[data-skin="sg26"] body #topbar :is(a.topbar-special-link[href$="/proxy-manager-pro/relogin"] .icon)::before{content:""!important;display:block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--sg-i) center/100% 100% no-repeat;mask:var(--sg-i) center/100% 100% no-repeat}
/* icons:end */

/* 11. COMPONENTS (B4, A285). Two layers:
      11.A the PRODUCT's own widgets restyled to the kit (L1): every page, overridden or not, and the third-party widgets.
      11.B the kit's component classes for NEW markup (group overrides), scoped under .sg-root (kit-port, generated).
      Kit: kit-v5.css 1010e + 1010f (§13 .kpi-row). GL-003 §7.7.4-§7.7.8. Existing tokens only. Legacy dark rules carry !important
      up to (0,4,1) and are printed AFTER app.css (topbar.fragment.php's <style>). So every 11.A rule starts with
      html:is([data-skin="sg26"],#sg-skin) body: the :is() counts as an id (1,0,1) and still matches only when the skin is on (no element
      has id sg-skin). Group page rules outrank 11.A by including their page id or one more class. */
html[data-skin="sg26"] body, html[data-skin="sg26"] body [data-theme] { --chip-under: transparent; }
html[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]), html[data-skin="sg26"] body [data-theme="light"] { --chip-under: var(--surface); }

/* 11.A.1 Buttons (Nextpost .button): kit .btn, 40px (44 on the phone), pill, 500 14/20, no uppercase.
   .button = primary: fill unchanged on hover, glow + 1px lift (GL-003 §7.7.5); pressed = --brand-primary-active.
   --dark = secondary («white» in dark, near-black in light); --light-outline = tonal; --simple = ghost text; --danger = tinted red pill;
   .small = btn-sm 32px; .large = btn-lg 44px. */
html:is([data-skin="sg26"],#sg-skin) body .button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px !important; padding: 0 18px !important;
  box-sizing: border-box; border-radius: var(--r-full) !important; border: 1px solid transparent !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; white-space: nowrap; text-decoration: none !important;
  transition: var(--tr) !important; vertical-align: middle; cursor: pointer;
}
html:is([data-skin="sg26"],#sg-skin) body .button:hover { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; transform: translateY(-1px); box-shadow: var(--sg-glow-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body .button:active { background: var(--brand-primary-active) !important; transform: none; }
html:is([data-skin="sg26"],#sg-skin) body .button.small { height: 32px !important; padding: 0 14px !important; font-size: 13px !important; line-height: 18px !important; }
html:is([data-skin="sg26"],#sg-skin) body .button.large { height: 44px !important; padding: 0 22px !important; font-size: 15px !important; }
html:is([data-skin="sg26"],#sg-skin) body .button--dark { background: var(--btn2-bg) !important; color: var(--btn2-fg) !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12) !important; }
html:is([data-skin="sg26"],#sg-skin) body .button--dark:hover { background: var(--btn2-bg-hover) !important; color: var(--btn2-fg) !important; 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 :is(.button--light-outline, .button--footer) {
  background: var(--tonal-bg) !important; color: var(--text) !important; border-color: var(--border-2) !important; box-shadow: inset 0 1px 0 var(--hi) !important; font-weight: 500 !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.button--light-outline, .button--footer):hover { color: var(--text-max) !important; border-color: var(--border-hover) !important; background: var(--tonal-bg) !important; box-shadow: inset 0 1px 0 var(--hi) !important; transform: none; }
html:is([data-skin="sg26"],#sg-skin) body .button--simple { background: transparent !important; color: var(--brand-primary-text) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .button--simple:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; box-shadow: none !important; transform: none; }
html:is([data-skin="sg26"],#sg-skin) body :is(.button--danger, .button--simple-danger) {
  --t: var(--t-danger); background: rgba(var(--t), .1) !important; border-color: rgba(var(--t), .3) !important; color: var(--status-danger) !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.button--danger, .button--simple-danger):hover { background: rgba(var(--t), .22) !important; color: var(--danger-hover-fg) !important; transform: none; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .button:is(.disabled, :disabled, [aria-disabled="true"]) {
  opacity: .4; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
  background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; border-color: transparent !important;
}
html:is([data-skin="sg26"],#sg-skin) body .button .icon, html:is([data-skin="sg26"],#sg-skin) body .button > [class*="sli-"], html:is([data-skin="sg26"],#sg-skin) body .button > [class*="mdi-"] { font-size: 16px; line-height: 1; margin: 0 !important; vertical-align: 0; }
html:is([data-skin="sg26"],#sg-skin) body :is(.button, .input, .checkbox + span, .radio + span, a, button, [tabindex]):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .button:not(.small) { height: 44px !important; }
  html:is([data-skin="sg26"],#sg-skin) body .button.small { height: 40px !important; }
}

/* 11.A.2 Fields (Nextpost .input, .fileinp + div): 40px (44 phone, text 16), radius 10, --input-bg, 1px --border-strong in BOTH themes
   (the light #eee field carries its border: GL-003 §7.7.4, D15 f). Focus: --brand-primary-border + the kit ring. */
html:is([data-skin="sg26"],#sg-skin) body :is(.input, .fileinp + div) {
  height: 40px; padding: 0 12px !important; box-sizing: border-box; border-radius: var(--r-md) !important; border: 1px solid var(--border-strong) !important;
  background-color: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; box-shadow: none !important; transition: border-color .2s;
}
html:is([data-skin="sg26"],#sg-skin) body .input::placeholder { color: var(--text-3) !important; opacity: 1; }
html:is([data-skin="sg26"],#sg-skin) body .input:hover { border-color: var(--border-strong-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body .input:focus { border-color: var(--brand-primary-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .input:is(.error, .is-error) { border-color: var(--status-danger-line) !important; }
html:is([data-skin="sg26"],#sg-skin) body .input:disabled { opacity: .4; cursor: not-allowed; }
html:is([data-skin="sg26"],#sg-skin) body .input.leftpad { padding-left: 44px !important; }
html:is([data-skin="sg26"],#sg-skin) body .input.rightpad { padding-right: 44px !important; }
html:is([data-skin="sg26"],#sg-skin) body textarea.input { height: auto; min-height: 96px; padding: 9px 12px !important; resize: vertical; }
html:is([data-skin="sg26"],#sg-skin) body select.input { padding-right: 36px !important; }
html:is([data-skin="sg26"],#sg-skin) body .fileinp + div:not(.none, [style*="display: none"], [style*="display:none"]) { display: flex !important; align-items: center; cursor: pointer; }
html:is([data-skin="sg26"],#sg-skin) body :is(.field-icon--left, .field-icon--right) { color: var(--text-3) !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.input, .fileinp + div) { height: 44px; font-size: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body textarea.input { height: auto; }
}

/* 11.A.3 Check, radio, switch (Nextpost markup: hidden input + span.icon). Check 18px radius 6, radio 18px, switch 42x26. */
html:is([data-skin="sg26"],#sg-skin) body .checkbox + span { color: var(--text-2) !important; font: 400 14px/20px var(--f) !important; padding-left: 28px !important; }
html:is([data-skin="sg26"],#sg-skin) body .checkbox:checked + span { color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body .checkbox + span .icon {
  top: 1px !important; width: 18px !important; height: 18px !important; box-sizing: border-box; border: 1.5px solid var(--border-strong) !important; border-radius: var(--r-sm) !important;
  background: transparent !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .checkbox:checked + span .icon { background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .checkbox + span .icon span { top: 0 !important; font-size: 14px !important; line-height: 15px !important; color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .radio + span { color: var(--text-2) !important; font: 400 14px/20px var(--f) !important; padding-left: 28px !important; }
html:is([data-skin="sg26"],#sg-skin) body .radio + span .icon { top: 1px !important; width: 18px !important; height: 18px !important; box-sizing: border-box; border: 1.5px solid var(--border-strong) !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body .radio + span .icon::after { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .radio:checked + span .icon { border: 5px solid var(--brand-primary) !important; background: #fff !important; }
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios .switcher {
  width: 42px !important; height: 26px !important; box-sizing: border-box; border: 1px solid var(--border-strong) !important; border-radius: var(--r-full) !important;
  background: var(--switch-off) !important; box-shadow: none !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios .switcher::after {
  top: 2px !important; left: 2px !important; width: 20px !important; height: 20px !important; background: var(--switch-knob) !important; box-shadow: var(--knob-shadow) !important;
  transition: transform .35s var(--ease) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios input[type="checkbox"]:checked + .switcher { background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios input[type="checkbox"]:checked + .switcher::after { transform: translateX(16px) !important; background: #fff !important; }
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios input[type="checkbox"]:focus-visible + .switcher { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .form-switcher-ios input[type="checkbox"]:disabled + .switcher { opacity: .4; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.checkbox + span, .radio + span):not(.none, [style*="display: none"], [style*="display:none"]) { min-height: 44px; display: inline-flex !important; align-items: center; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.checkbox + span, .radio + span) .icon { top: 50% !important; margin-top: -9px; }
}

/* 11.A.4 select2: field = .input; dropdown = the kit menu (surface-raised, 14px radius dark / 8 light); multi = tags */
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) {
  min-height: 40px; box-sizing: border-box; border-radius: var(--r-md) !important; border: 1px solid var(--border-strong) !important; background: var(--input-bg) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection--single { height: 40px !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 36px 0 12px !important; color: var(--text) !important; font: 400 14px/38px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; right: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection__placeholder { color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default:is(.select2-container--focus, .select2-container--open) :is(.select2-selection--single, .select2-selection--multiple) { border-color: var(--brand-primary-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: 7px 6px 0 0 !important; padding: 0 10px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--chip-under)) !important; border: 1px solid color-mix(in srgb, var(--brand-primary-text) 30%, transparent) !important;
  color: var(--sg-soft) !important; font: 500 12px/16px var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-selection__choice__remove { color: inherit !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-dropdown {
  border-radius: var(--r-menu) !important; border: 1px solid var(--menu-line) !important; background: var(--surface-raised) !important; color: var(--text-2) !important;
  box-shadow: 0 24px 60px -20px var(--shadow-c) !important; overflow: hidden; padding: 6px;
}
html:is([data-skin="sg26"],#sg-skin) body .select2-results__option { min-height: 36px; box-sizing: border-box; padding: 8px 10px !important; border-radius: var(--r-md); color: var(--text-2) !important; font: 500 14px/20px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--brand-primary-subtle) !important; color: var(--sg-soft) !important; box-shadow: inset 3px 0 0 currentColor; }
html:is([data-skin="sg26"],#sg-skin) body .select2-search--dropdown { padding: 0 0 6px !important; background: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body .select2-search--dropdown .select2-search__field { height: 36px; box-sizing: border-box; padding: 0 10px !important; border-radius: var(--r-md) !important; border: 1px solid var(--border-strong) !important; background: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/20px var(--f) !important; }

/* 11.A.5 air-datepicker (plugins.js): the kit menu surface, 10px cells; selected = accent fill, today = accent text + ring */
html:is([data-skin="sg26"],#sg-skin) body .datepicker {
  border-radius: var(--r-menu) !important; border: 1px solid var(--menu-line) !important; background: var(--surface-raised) !important; color: var(--text) !important;
  box-shadow: 0 24px 60px -20px var(--shadow-c) !important; font-family: var(--f) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .datepicker--pointer { background: var(--surface-raised) !important; border-color: var(--menu-line) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.datepicker--nav, .datepicker--buttons, .datepicker--time) { border-color: var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.datepicker--nav-title, .datepicker--nav-action) { color: var(--text) !important; border-radius: var(--r-md); }
html:is([data-skin="sg26"],#sg-skin) body :is(.datepicker--nav-title, .datepicker--nav-action, .datepicker--button):hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--nav-action path { stroke: currentColor !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--day-name { color: var(--text-3) !important; font: 500 12px/16px var(--f) !important; text-transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell { border-radius: var(--r-md) !important; color: var(--text-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell.-focus- { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell.-current- { color: var(--brand-primary-text) !important; box-shadow: inset 0 0 0 1px var(--brand-primary-border); }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell:is(.-selected-, .-selected-.-focus-, .-range-from-, .-range-to-) { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: none; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell.-in-range- { background: var(--brand-primary-subtle) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--cell:is(.-other-month-, .-other-year-, .-disabled-) { color: var(--text-3) !important; opacity: .55; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--button { color: var(--brand-primary-text) !important; border-radius: var(--r-md); }

/* 11.A.6 Tabs: reactions .react-tab-heads, Bootstrap .nav-pills -> the kit segmented .tabs (selected = raised surface; accent, never status) */
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads {
  display: inline-flex !important; flex-wrap: wrap; 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) !important; max-width: 100%; box-sizing: border-box;
}
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads :is(.react-tab-head, li) {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px !important; border-radius: var(--r-full) !important; border: 0 !important;
  color: var(--text-2) !important; background: transparent !important; box-shadow: none !important; font: 500 13px/18px var(--f) !important; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads :is(.react-tab-head, li):hover { color: var(--text-max) !important; background: var(--hover-fill) !important; }
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads :is(.react-tab-head.active, li.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 .nav-pills { gap: 2px; padding: 3px !important; border-radius: var(--r-full) !important; background: var(--fill-2) !important; border: 1px solid var(--border) !important; display: inline-flex !important; }
html:is([data-skin="sg26"],#sg-skin) body .nav-pills .nav-link { height: 30px; display: inline-flex; align-items: center; padding: 0 14px !important; border-radius: var(--r-full) !important; color: var(--text-2) !important; background: transparent !important; font: 500 13px/18px var(--f) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .nav-pills .nav-link:hover { color: var(--text-max) !important; background: var(--hover-fill) !important; }
html:is([data-skin="sg26"],#sg-skin) body .nav-pills .nav-link.active { background: var(--surface-raised) !important; color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !important; }

/* 11.A.7 Status text (Nextpost colour helpers) -> the v5 status scale (GL-003 §7.2) */
html:is([data-skin="sg26"],#sg-skin) body .color-success { color: var(--status-success) !important; }
html:is([data-skin="sg26"],#sg-skin) body .color-danger { color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body .color-warning { color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body .color-info { color: var(--status-info) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.color-mid, .color-light) { color: var(--text-3) !important; }

/* 11.A.8 Surfaces: .section and .box-list-item = kit .card (16px radius; dark: gradient edge + inner highlight; light: white + shadow,
   no border). .section-header / -content use --pad-card. The aside/content panels of .skeleton--full = --surface. */
html:is([data-skin="sg26"],#sg-skin) body :is(.section, .box-list-item) {
  border-radius: var(--r-lg) !important; border: 1px solid transparent !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 .section { overflow: hidden; }
html:is([data-skin="sg26"],#sg-skin) body .section-header { padding: var(--pad-card) !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; text-align: start !important; }
html:is([data-skin="sg26"],#sg-skin) body .section-content { padding: var(--pad-card) !important; color: var(--text-2); font: 400 14px/22px var(--f); background: transparent !important; }
/* [A285.3] .section-title was a bordered pill (core.css: #f5f5f5 chip, 35px, margin-left 10px; topbar fragment dark: #111114, 1px border,
   8px radius, padding, !important; style.css centres .section-header). On the boards it is the kit section head: a plain title at the
   left edge. Box reset on every page. */
html:is([data-skin="sg26"],#sg-skin) body .section-title {
  font: 500 17px/24px var(--f) !important; letter-spacing: -.01em; color: var(--text) !important; height: auto !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  margin-left: 0 !important; min-height: 0 !important; text-align: start !important; cursor: auto; transition: none;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton-aside, .skeleton-content) { background: var(--surface) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .skeleton-aside { border-right: 1px solid var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .skeleton-aside .search-box { background: var(--surface) !important; border: 0 !important; /* [A285.3] no divider under the search box (boards) */ padding: 12px 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.aside-list-item, .simple-list-item) { border-color: var(--border) !important; color: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body :is(.aside-list-item, .simple-list-item):hover { background: var(--hover-fill) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aside-list-item.active { background: var(--brand-primary-subtle) !important; box-shadow: inset 3px 0 0 var(--sg-soft); }

/* 11.A.9 Tables (generic classes; page tables belong to their group): kit .table. [A285.2] Not inside .sg-root, where the kit's own
   .table / .table.is-stack (11.B) decide (reseller group: the global cells beat is-stack). */
html:is([data-skin="sg26"],#sg-skin) body :is(table.table, table.datatable, table.dataTable):not(.sg-root *) { border-collapse: separate !important; border-spacing: 0; background: transparent !important; color: var(--text-2); font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body :is(table.table, table.datatable, table.dataTable):not(.sg-root *) th {
  padding: 10px 16px !important; background: var(--fill-2) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  font: 500 12px/16px var(--f) !important; letter-spacing: .02em; color: var(--text-3) !important; text-align: left; white-space: nowrap; text-transform: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(table.table, table.datatable, table.dataTable):not(.sg-root *) td { padding: 14px 16px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; vertical-align: middle; color: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body :is(table.table, table.datatable, table.dataTable):not(.sg-root *) tbody tr:last-child td { border-bottom: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(table.table, table.datatable, table.dataTable):not(.sg-root *) tbody tr:hover td { background: var(--fill-1) !important; }

/* 11.A.10 Modals. Bootstrap .modal-content and the help-center .hc-modal = kit .modal (20px radius, --modal-bg, border-2).
   Phone (< 768): a bottom card 16px from the left, right and bottom edges (+ safe area), all four corners rounded (Angelo 10/10). */
html:is([data-skin="sg26"],#sg-skin) body .modal-backdrop { background-color: var(--scrim) !important; }
html:is([data-skin="sg26"],#sg-skin) body .modal-backdrop.show { opacity: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.modal-content, .hc-modal) {
  border-radius: var(--r-xl) !important; border: 1px solid var(--border-2) !important; background: var(--modal-bg) !important; color: var(--text) !important;
  box-shadow: inset 0 1px 0 var(--border), var(--shadow-lg) !important; overflow: hidden;
}
html:is([data-skin="sg26"],#sg-skin) body .modal-header { padding: 22px 24px 0 !important; border: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .modal-title { font: 500 17px/24px var(--f) !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body .modal-body { padding: 16px 24px !important; color: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body .modal-footer { padding: 8px 24px 22px !important; border: 0 !important; gap: 10px; }
html:is([data-skin="sg26"],#sg-skin) body .modal .close { color: var(--text-3) !important; opacity: 1 !important; text-shadow: none !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .modal-dialog {
    display: flex !important; align-items: flex-end; min-height: calc(100% - 32px - env(safe-area-inset-bottom, 0px)); max-width: none !important; width: auto !important;
    margin: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html:is([data-skin="sg26"],#sg-skin) body .modal-dialog .modal-content { width: 100%; }
}

/* 11.A.11 jquery-confirm (NextPost.Alert and every confirm/prompt; themes modern, material, supervan) = kit .modal */
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-bg { background: var(--scrim) !important; opacity: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box {
  border-radius: var(--r-xl) !important; border: 1px solid var(--border-2) !important; background: var(--modal-bg) !important; color: var(--text) !important;
  box-shadow: inset 0 1px 0 var(--border), var(--shadow-lg) !important; padding: 22px 24px !important; font-family: var(--f) !important; text-align: left !important;
}
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box :is(.jconfirm-title-c, .jconfirm-title) { border-bottom: 0 !important; /* [A285.13] no inner divider */ color: var(--text) !important; font: 500 17px/24px var(--f) !important; text-align: left !important; padding: 0 0 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-content { color: var(--text-2) !important; font: 400 14px/22px var(--f) !important; text-align: left !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-icon-c { color: var(--text-3) !important; font-size: 28px !important; text-align: left !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-closeIcon { color: var(--text-3) !important; opacity: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-buttons { border-top: 0 !important; /* [A285.13] */ display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 10px; float: none !important; padding-top: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-buttons > button { margin: 0 !important; float: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-buttons > button:not(.button) {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px !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 14px/20px var(--f) !important; text-transform: none !important; box-shadow: inset 0 1px 0 var(--hi) !important;
}
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-cell { vertical-align: bottom !important; }
  html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-holder { padding: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body .jconfirm :is(.jc-bs3-container, .container) { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body .jconfirm :is(.jc-bs3-row, .row) { display: block !important; margin: 0 !important; padding: 0 !important; }
  html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box-container {
    width: calc(100% - 32px) !important; max-width: none !important; flex: none !important; margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important; float: none !important; left: auto !important;
  }
}

/* 11.A.12 Notices (.alert of the product and Bootstrap) = kit .alert with tones; never a status colour for plain info.
   [A285.12] The tone classes of the kit (.is-success/.is-danger/.is-warning/.is-info, .b-*) count too: the neutral default here used to
   outrank them inside .sg-root (id strength), so every kit alert rendered neutral. Each tone also sets the icon colour (--tc). */
html:is([data-skin="sg26"],#sg-skin) body .alert { --t: var(--t-neutral); --tc: var(--text-2); border-radius: var(--r-inset) !important; border: 1px solid rgba(var(--t), .28) !important; background: rgba(var(--t), .06) !important; color: var(--text) !important; font: 400 14px/21px var(--f) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .alert:is(.success, .alert-success, .is-success, .b-success) { --t: var(--t-success); --tc: var(--status-success); }
html:is([data-skin="sg26"],#sg-skin) body .alert:is(.error, .danger, .alert-danger, .is-danger, .b-danger) { --t: var(--t-danger); --tc: var(--status-danger); }
html:is([data-skin="sg26"],#sg-skin) body .alert:is(.warning, .alert-warning, .is-warning, .b-warning) { --t: var(--t-warning); --tc: var(--status-warning); }
html:is([data-skin="sg26"],#sg-skin) body .alert:is(.info, .alert-info, .is-info, .b-info) { --t: var(--t-info); --tc: var(--status-info); }

/* 11.A.13 Tooltips (tippy v2, every theme) = --surface-raised, 12/16 */
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper .tippy-tooltip {
  background: var(--surface-raised) !important; color: var(--text) !important; border: 1px solid var(--border-2); border-radius: var(--r-md) !important;
  box-shadow: 0 20px 50px -20px var(--shadow-c) !important; font: 500 12px/16px var(--f) !important; padding: 6px 10px !important;
}
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper .tippy-tooltip [x-circle] { background: var(--surface-raised) !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="top"] .tippy-tooltip [x-arrow] { border-top-color: var(--surface-raised) !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="bottom"] .tippy-tooltip [x-arrow] { border-bottom-color: var(--surface-raised) !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="left"] .tippy-tooltip [x-arrow] { border-left-color: var(--surface-raised) !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="right"] .tippy-tooltip [x-arrow] { border-right-color: var(--surface-raised) !important; }

/* 11.A.14 Row and context menus outside the topbar (⋯ on cards and lists) = kit .menu / .menu-item */
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul {
  min-width: 200px; padding: 6px !important; box-sizing: border-box; border-radius: var(--r-menu) !important; background: var(--surface-raised) !important;
  border: 1px solid var(--menu-line) !important; box-shadow: 0 24px 60px -20px var(--shadow-c) !important; color: var(--text-2) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li { border: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li a {
  display: flex !important; align-items: center; gap: 10px; min-height: 36px; padding: 8px 10px !important; box-sizing: border-box; border-radius: var(--r-md);
  color: var(--text-2) !important; background: transparent !important; font: 500 14px/20px var(--f) !important; text-decoration: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li a:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li a { min-height: 44px; } }

/* 11.A.15 Motion: the heartbeat (.live) and the sheen stop under reduced motion; product transitions too (GL-003 §7.7.8) */
@media (prefers-reduced-motion: reduce) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.button, .input, .switcher, .switcher::after, .live, .live::after, .off-badge::after) { transition: none !important; animation: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body .button:hover { transform: none !important; }
}

/* 11.A.16 KPI rows (kit §13, 1010f) for product grids outside .sg-root: put class="kpi-row" and style="--kpi-min:Mpx" (the row's spill
   point) on the grid, --kpi-cols:N when its columns are inline or on each of the page's own column rules. The kit version inside
   .sg-root is in the port below. Tiles drop columns instead of squeezing; never a smaller KPI or an ellipsis. */
html:is([data-skin="sg26"],#sg-skin) body :where(.kpi-row) { --kpi-grid: repeat(auto-fill, minmax(min(100%, max(var(--kpi-min, 0px), calc(100% / (var(--kpi-cols, 1) + 1) + .1px))), 1fr)); display: grid; grid-template-columns: var(--kpi-grid) !important; }

/* 11.C Shared components on request (core group, wave 1). Generated by gen-b4c.js; do not edit by hand. Copy is never changed:
   the noticeboard keeps its admin text, the Post links show their own title. New markup: .sg-notice (> .sg-notice-text, a.sg-notice-action),
   .sg-pill (icon via --sg-pill-icon, text inside). */
html:is([data-skin="sg26"],#sg-skin) body { --sg-ic-star: 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='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E"); --sg-ic-alert: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); --sg-ic-arrow: 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 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --sg-ic-upload: 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='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5M12 3v12'/%3E%3C/svg%3E"); --sg-ic-link: 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='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
/* notice: one wrapping row, info tone (a promotion is not a status: success becomes info; danger and warning keep their tone) */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) {
  --t: var(--t-info); --tc: var(--status-info); display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; max-width: none !important; margin: 0 0 var(--gap-block) !important;
  padding: 14px 16px !important; box-sizing: border-box; border-radius: var(--r-inset) !important; border: 1px solid rgba(var(--t), .28) !important; border-left-width: 1px !important;
  background: color-mix(in srgb, rgb(var(--t)) 6%, var(--chip-under)) !important; color: var(--text) !important; text-align: left !important; animation: none !important;
  font: 400 14px/20px var(--f) !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert):is(.danger, .error, .is-danger) { --t: var(--t-danger); --tc: var(--status-danger); }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert):is(.warning, .is-warning) { --t: var(--t-warning); --tc: var(--status-warning); }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert)::after {
  content: "" !important; display: block !important; order: -2; flex: none; position: static !important; width: 28px; height: 28px; border-radius: 8px; animation: none !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; opacity: 1 !important; transform: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert):is(.danger, .error, .is-danger, .warning, .is-warning)::after { background: rgba(var(--t), .14) !important; }
/* the 15px glyph over the tile's centre: [tile 28][gap 12][glyph 15] -> margin-left -(12 + 28 - 6.5), margin-right 6.5 */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert)::before { content:"";flex-shrink:0;background:currentColor;-webkit-mask:var(--sg-ic-star) center/100% 100% no-repeat;mask:var(--sg-ic-star) center/100% 100% no-repeat; display: block; order: -1; width: 15px; height: 15px; margin: 0 6.5px 0 -33.5px; background-color: var(--sg-soft); }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert):is(.danger, .error, .is-danger, .warning, .is-warning)::before { -webkit-mask-image: var(--sg-ic-alert); mask-image: var(--sg-ic-alert); background-color: var(--tc); }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > :is(p, .sg-notice-text) { display: inline; margin: 0 !important; color: var(--text) !important; font: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > p { flex: 1 1 220px; min-width: 0; display: block; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > p + p:not(:last-child) { flex-basis: 100%; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) :is(b, strong) { color: var(--text) !important; font-weight: 500 !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > p a { color: var(--brand-primary-text) !important; text-decoration: underline; text-underline-offset: 3px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) { flex: 0 0 auto; margin-left: auto !important; display: inline-flex; align-items: center; gap: 6px; }
/* the action: kit .btn-secondary.btn-sm with the arrow */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice-action, .sg-nb.alert > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) a) {
  display: inline-flex !important; align-items: center; gap: 8px; height: 32px; padding: 0 14px !important; border-radius: var(--r-full); border: 1px solid transparent;
  background: var(--btn2-bg) !important; color: var(--btn2-fg) !important; box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); font: 500 13px/18px var(--f) !important;
  text-decoration: none !important; white-space: nowrap; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice-action, .sg-nb.alert > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) a)::after { content:"";flex-shrink:0;background:currentColor;-webkit-mask:var(--sg-ic-arrow) center/100% 100% no-repeat;mask:var(--sg-ic-arrow) center/100% 100% no-repeat; display: block; width: 14px; height: 14px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice-action, .sg-nb.alert > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) a):hover { background: var(--btn2-bg-hover) !important; color: var(--btn2-fg) !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); }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice-action, .sg-nb.alert > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) a) { height: 40px; } html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice, center .sg-nb.alert, .sg-nb.alert) > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) { margin-left: 0 !important; } }
/* pill: kit .btn-tonal.btn-sm, 15px icon + label */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-pill, #post .section-actions > a.js-fm-filebrowser, #post .section-actions > a.js-fm-urlformtoggler) {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 10px !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  border: 1px solid var(--border-2) !important; background: var(--tonal-bg) !important; box-shadow: inset 0 1px 0 var(--hi) !important; color: var(--text) !important;
  font: 500 13px/18px var(--f) !important; white-space: nowrap; text-decoration: none !important; transition: var(--tr); width: auto !important; margin: 0 !important; float: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-pill, #post .section-actions > a.js-fm-filebrowser, #post .section-actions > a.js-fm-urlformtoggler):hover { color: var(--text-max) !important; border-color: var(--border-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-pill, #post .section-actions > a.js-fm-filebrowser, #post .section-actions > a.js-fm-urlformtoggler)::before { content:"";flex-shrink:0;background:currentColor;-webkit-mask:var(--sg-pill-icon, var(--sg-ic-upload)) center/100% 100% no-repeat;mask:var(--sg-pill-icon, var(--sg-ic-upload)) center/100% 100% no-repeat !important; display: block !important; width: 15px !important; height: 15px !important; font-size: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body #post .section-actions > a.js-fm-urlformtoggler { --sg-pill-icon: var(--sg-ic-link); }
html:is([data-skin="sg26"],#sg-skin) body #post .section-actions > a:is(.js-fm-filebrowser, .js-fm-urlformtoggler)[title]::after { content: attr(title); }
/* tippy moves title to data-original-title at init: the label (and so the link's accessible name) comes from there */
html:is([data-skin="sg26"],#sg-skin) body #post .section-actions > a:is(.js-fm-filebrowser, .js-fm-urlformtoggler)[data-original-title]::after { content: attr(data-original-title); }
html:is([data-skin="sg26"],#sg-skin) body #post .section-actions > a.js-fm-filebrowser { flex: 1 1 auto; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body :is(.sg-pill, #post .section-actions > a.js-fm-filebrowser, #post .section-actions > a.js-fm-urlformtoggler) { height: 40px; } }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body :is(.sg-notice-action, .sg-nb.alert > p:last-child:has(> a:only-child, > strong:only-child > a:only-child) a):hover { transform: none !important; } }

/* 11.D (B4.2, A285.2) Requests from the pro-modules group (wave 1). Existing tokens only. */

/* 11.D.1 Button guard. topbar.fragment.php's <style> (lines 936-975) paints body.darkside .btn / -default / -secondary / -primary /
   -success / -danger / -warning with !important (radius 10, white 18% border, transparent or #f3f4f6 fill). The kit .btn of 11.B has
   no !important, so in dark every .sg-root button lost its look. Here the kit values are restated with !important at id strength,
   in BOTH themes (the guard is harmless in light): (a) kit buttons inside .sg-root, (b) Bootstrap .btn outside .sg-root (plugins),
   mapped to the kit variants. Group agents: delete your temporary copies (pro-modules.css §0.1). */
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn {
  border-radius: var(--r-full) !important; border: 1px solid transparent !important; background-color: transparent !important; color: var(--text) !important;
  text-transform: none !important; box-shadow: none;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn:hover { background-color: transparent !important; border-color: transparent !important; color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn:is(.btn-primary, .fab) { 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-root .btn:is(.btn-primary, .fab):hover { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; box-shadow: var(--sg-glow-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn:is(.btn-secondary, .btn-light) { 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 .sg-root .btn:is(.btn-secondary, .btn-light):hover { background: var(--btn2-bg-hover) !important; color: var(--btn2-fg) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-tonal { background: var(--tonal-bg) !important; border-color: var(--border-2) !important; color: var(--text) !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-tonal:hover { border-color: var(--border-hover) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-outline { background: color-mix(in srgb, var(--brand-primary) 10%, transparent) !important; color: var(--outline-fg) !important; border-color: var(--outline-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-outline:hover { background: color-mix(in srgb, var(--brand-primary) 20%, transparent) !important; color: var(--outline-fg) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-ghost { background: transparent !important; color: var(--text-2) !important; border-color: transparent !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-ghost:is(:hover, [aria-expanded="true"]) { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-danger { background: rgba(var(--t-danger), .1) !important; border-color: rgba(var(--t-danger), .3) !important; color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .btn.btn-danger:hover { background: rgba(var(--t-danger), .22) !important; color: var(--danger-hover-fg) !important; }
/* (b) Bootstrap .btn used by plugins, outside kit markup: kit pill, 40/44, tonal by default */
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px !important; box-sizing: border-box;
  border-radius: var(--r-full) !important; border: 1px solid var(--border-2) !important; background: var(--tonal-bg) !important; color: var(--text) !important;
  box-shadow: inset 0 1px 0 var(--hi) !important; font: 500 14px/20px var(--f) !important; text-transform: none !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn):hover { border-color: var(--border-hover) !important; color: var(--text-max) !important; background: var(--tonal-bg) !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn):is(.btn-primary, .btn-success) { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; border-color: transparent !important; box-shadow: var(--sg-glow-rest) !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn):is(.btn-primary, .btn-success):hover { box-shadow: var(--sg-glow-hover) !important; color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn):is(.btn-danger, .btn-warning) { --t: var(--t-danger); background: rgba(var(--t), .1) !important; border-color: rgba(var(--t), .3) !important; color: var(--status-danger) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn).btn-warning { --t: var(--t-warning); color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn).btn-link { background: transparent !important; border-color: transparent !important; color: var(--brand-primary-text) !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn):is(.btn-sm, .btn-xs) { min-height: 32px; padding: 0 14px !important; font-size: 13px !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body .btn:not(.sg-root .btn) { min-height: 44px; } }

/* 11.D.2 Filter chip on product markup: add class «sg-chip» to the element (it may also carry .button / .button--light-outline /
   .small: the chip wins). ON = .active, .is-on or [aria-pressed="true"]. Where the product's JS uses «button--light-outline» as the ON
   state (Proxy Manager Pro), add «sg-chip--on-outline» as well. Kit .chip: 30px (36 + 44 hit on the phone), 13px, selected = accent.
   [A285.3] The filter buttons of the shared aside search form (Users: Active / Expired / Online / Recently online, a.button.u-small, ON =
   .active) render as this chip everywhere, no markup change; the alias sits in :where() so it adds no specificity. */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)) {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px !important; min-height: 0 !important; padding: 0 12px !important; margin: 0 !important; box-sizing: border-box;
  border-radius: var(--r-full) !important; border: 1px solid var(--border-2) !important; background: var(--fill-3) !important; box-shadow: none !important; transform: none !important;
  color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; text-transform: none !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)):hover { color: var(--text-max) !important; border-color: color-mix(in srgb, var(--sg-accent-2) 40%, transparent) !important; background: var(--fill-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip:is(.active, .is-on, [aria-pressed="true"]), .sg-chip.sg-chip--on-outline.button--light-outline, :where(.search-box a.button.u-small).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 :is(.sg-chip, :where(.search-box a.button.u-small)) :is(.mdi, .sli, .icon, svg) { margin: 0 !important; font-size: 14px !important; width: 14px; height: 14px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-chip.sg-chip--sm { height: 26px !important; padding: 0 10px !important; font-size: 12px !important; line-height: 16px !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)) { height: 36px !important; position: relative; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small))::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
}

/* 11.D.3 Account aside (boards RepostIndex, SlaveIndex, LeadsIndex, DirectInbox, AiDmInbox: the «P-ACC» aside), promoted from the
   pro-modules group (its §3). Add classes, never change the product markup inside (AJAX lists, core.js panes):
     the .skeleton--full wrapper:     sg-acc        (the module's skeleton)
     the aside / the detail pane:     sg-acc-list / sg-acc-detail   (on .skeleton-aside / .skeleton-content)
     a collapsible inset section:     sg-acc-section (with a header link .sg-acc-section-head; aria-expanded rotates the chevron)
   Rows are the product's .aside-list-item (.circle, .inner, .title, .sub, .status.color-green|color-paused, .options, .full-link).
   Board: aside card 280 (padding 16, gap 12); account rows = inset cards; the detail is a dashed empty panel until an account opens. */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc > .clearfix { display: flex; align-items: flex-start; gap: var(--gap-block); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc > .clearfix::before,
html:is([data-skin="sg26"],#sg-skin) body .sg-acc > .clearfix::after { content: none !important; display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list { flex: 0 0 280px; width: 280px !important; box-sizing: border-box; padding: 16px !important; display: flex; flex-direction: column; gap: 12px; overflow: visible !important; float: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-detail { flex: 1 1 auto; min-width: 0; width: auto !important; overflow: visible !important; float: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-detail:has(> .no-data:only-child) {
  min-height: 520px; display: grid; place-items: center; padding: 40px !important; box-sizing: border-box; background: transparent !important; border: 1px dashed var(--border-dash) !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-detail > .no-data:only-child { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; max-width: 420px; color: var(--text-2); font: 400 14px/21px var(--f); text-align: center; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-detail > .no-data:only-child p { margin: 0; color: var(--text-2); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .no-data-icon {
  display: grid !important; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 0 !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)); box-shadow: inset 0 1px 0 var(--border);
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .no-data-icon::before { content: "" !important; display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--sg-ic-instagram) center/100% 100% no-repeat; mask: var(--sg-ic-instagram) center/100% 100% no-repeat; }
/* search: the module's own aside form (.search-box / .rp-search-box); the field is B4's .input */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list :is(.search-box, .rp-search-box) { position: relative !important; top: auto; z-index: auto; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list :is(.search-box, .rp-search-box) .input { padding-left: 36px !important; padding-right: 36px !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list :is(.search-icon, .cancel-icon) { position: absolute !important; left: 12px; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 !important; padding: 0; line-height: 16px; font-size: 0 !important; color: var(--text-3) !important; z-index: 2; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list :is(.search-icon, .cancel-icon)::before { content: "" !important; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sg-acc-ico) center/16px no-repeat; mask: var(--sg-acc-ico) center/16px no-repeat; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list .search-icon { --sg-acc-ico: var(--sg-ic-search); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list .cancel-icon { --sg-acc-ico: var(--sg-ic-x); left: auto; right: 12px; cursor: pointer; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list .processing { position: absolute; left: auto; right: 12px; top: 50%; transform: translateY(-50%); }
/* account rows = board .acc inset cards */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item {
  position: relative; float: none !important; width: auto !important; margin: 0 !important; padding: 12px !important; border-radius: var(--r-inset) !important; border: 1px solid var(--border) !important;
  background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi) !important; transition: border-color .2s, background-color .2s;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item:hover { border-color: var(--border-2) !important; background: var(--surface-alt) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item:is(.active, .task-selected) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 20%, transparent), color-mix(in srgb, var(--brand-primary) 6%, transparent)) !important;
  border-color: color-mix(in srgb, var(--brand-primary-text) 55%, transparent) !important; box-shadow: inset 0 1px 0 var(--hi) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item > .clearfix { display: flex; align-items: flex-start; gap: 10px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item > .clearfix::before,
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item > .clearfix::after { content: none !important; display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .circle { position: static !important; float: none !important; flex-shrink: 0; width: 32px !important; height: 32px !important; margin: 0 !important; border: 0 !important; border-radius: 50%; object-fit: cover; background: var(--surface-raised); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .inner { flex: 1; min-width: 0; padding: 0 !important; overflow: visible; display: flex; flex-direction: column; gap: 6px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .title { margin: 0; font: 500 14px/20px var(--f) !important; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; white-space: normal; overflow: visible; font: 500 12px/16px var(--f) !important; color: var(--text-muted) !important; font-variant-numeric: tabular-nums; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub > span { margin: 0 !important; display: inline-flex; align-items: center; gap: 5px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub :is(.mdi, .sli) { margin: 0 !important; font-size: 13px; color: var(--text-3); }
/* status = kit .status pill: dot + label; green = success, paused = info (GL-003 §7.2.4), otherwise idle */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status {
  --t: var(--t-neutral); --tc: var(--text-2); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; box-sizing: border-box; border-radius: var(--r-full);
  border: 1px solid rgba(var(--t), .3); background: color-mix(in srgb, rgb(var(--t)) 10%, var(--chip-under)) !important; color: var(--tc) !important; font: 500 12px/16px var(--f);
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status.color-green { --t: var(--t-success); --tc: var(--status-success); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status.color-paused { --t: var(--t-info); --tc: var(--status-info); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status > .mdi:first-child { font-size: 0 !important; width: 6px; height: 6px; border-radius: 50%; background: currentColor; color: inherit !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status > .mdi:first-child::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .status > .mdi-circle-outline:first-child { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .color-danger { color: var(--status-danger) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .sub .color-danger .mdi { color: inherit; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .options { position: relative !important; top: auto !important; right: auto !important; z-index: 2; flex-shrink: 0; margin: 7px 0 0; font-size: 0; line-height: 0; order: -1; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .full-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .full-link:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
/* row select circle: board .sel 18px (the mdi classes still toggle; their glyph is not painted) */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .options > a.mdi {
  display: inline-grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--border-strong); background: transparent; font-size: 0 !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .options > a.mdi::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item .options > a.mdi-checkbox-marked-circle-outline { background: var(--brand-primary); border-color: var(--brand-primary); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .search-no-result { margin: 0; padding: 16px 4px; font: 400 13px/20px var(--f); color: var(--text-muted) !important; text-align: center; }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list .loadmore { margin: 4px 0 0 !important; }
/* collapsible inset section of the aside: board .inset + header row with a chevron */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section { margin: 0; padding: 4px 8px; border-radius: var(--r-inset); border: 1px solid var(--border) !important; background: var(--surface-alt) !important; box-shadow: inset 0 1px 0 var(--hi); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section-head {
  display: flex !important; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; color: var(--text) !important; font: 500 13px/18px var(--f) !important; text-decoration: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section-head::after {
  content: ""; margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; background: var(--text-muted); transition: transform .2s var(--ease);
  -webkit-mask: var(--sg-ic-chevron-down) center/16px no-repeat; mask: var(--sg-ic-chevron-down) center/16px no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section-head[aria-expanded="true"]::after { transform: rotate(180deg); }
html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section-head:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
@media (max-width: 1023.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .sg-acc > .clearfix { flex-direction: column; align-items: stretch; }
  html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-list { flex: none; width: auto !important; }
  html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-detail:has(> .no-data:only-child) { min-height: 280px; }
}
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body .sg-acc .aside-list-item { padding: 14px 12px !important; } }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body .sg-acc .sg-acc-section-head::after { transition: none; } }

/* 11.D.4 Bare <a> tabs (Reactions account tabs, account-tabs.fragment.php): the 11.A.6 tab look for direct <a> children of
   .react-tab-heads; ON = .active or aria-current. An <a> inside a .react-tab-head / li tab inherits the tab's look. */
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads > a {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 14px !important; margin: 0 !important; box-sizing: border-box; border-radius: var(--r-full) !important;
  border: 0 !important; color: var(--text-2) !important; background: transparent !important; box-shadow: none !important; font: 500 13px/18px var(--f) !important;
  text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: var(--tr); float: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads > a:hover { color: var(--text-max) !important; background: var(--hover-fill) !important; }
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads > a:is(.active, [aria-current="page"]) { 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 .react-tab-heads > a:focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads :is(.react-tab-head, li) > a { color: inherit !important; background: none !important; text-decoration: none !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body .react-tab-heads > a { height: 36px; } }

/* 11.D.5 Status dot, usable anywhere (outside .sg-root too). GL-003 §7.2.4: .sg-dot = static 6px dot in the current colour, or a
   tone (.is-success / .is-info / .is-warning / .is-danger); .sg-dot.is-live = the heartbeat (8px, --live, 2.2s, ring), ONLY for active
   Instagram accounts and running automations, never WhatsApp; «In pausa» = .sg-dot.is-info, static. .is-once = two beats. */
html:is([data-skin="sg26"],#sg-skin) body .sg-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-success { background: var(--status-success); }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-info { background: var(--status-info); }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-warning { background: var(--status-warning); }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-danger { background: var(--status-danger-line); }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live { position: relative; width: 8px; height: 8px; background: var(--live); animation: sg-beat 2.2s ease-in-out infinite; }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; animation: sg-ring 2.2s ease-out infinite; }
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live.is-once,
html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live.is-once::after { animation-iteration-count: 2; }
@media (prefers-reduced-motion: reduce) {
  html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live,
  html:is([data-skin="sg26"],#sg-skin) body .sg-dot.is-live::after { animation: none !important; }
}

/* ===== 11.E B4.3 [A285.3] legacy section title, search-form filter row (chart colours: skin/js/app.js) ===== */
/* 11.E.1 the .section-title pill reset lives in 11.A.8 (same selector). */
/* 11.E.2 shared aside search form: the filter chips (11.D.2) sit in one wrapping row under the field, 8px apart (they had mt-10 each). */
html:is([data-skin="sg26"],#sg-skin) body .search-box .pos-r:has(> a.button.u-small) { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }

/* ===== 11.F B4.4 [A285.4] account aside panes as cards; collapsible settings-group header ===== */
/* 11.F.1 Account aside (11.D.3): the list and the opened detail are kit cards (the empty detail stays the dashed panel). core.js writes
   an inline height on both panes: height auto wins here. Promoted from pro-modules «sgp-card». */
html:is([data-skin="sg26"],#sg-skin) body .sg-acc :is(.sg-acc-list, .sg-acc-detail) {
  height: auto !important; min-height: 0; position: relative; 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 .sg-acc :is(.sg-acc-list, .sg-acc-detail).onprogress::after { background-color: color-mix(in srgb, var(--surface) 92%, transparent) !important; border-radius: inherit; }

/* 11.F.2 Collapsible settings group (boards: one card per group, a full-width head row with the label and a chevron). The product's
   toggler links (Repost .rpm-/.rp-toggler-button, Leads Finder .lf-, Bulk/Bypass .btm-, PMP .pmp-/.pmpa-/.pmpl-, Reactions .np-,
   Assistant .ap-) and new markup with class «sg-group-toggle». Open = .opened, aria-expanded="true" or the module's mdi-arrow-up
   (each module's own JS keeps toggling its panel; skin/js/app.js adds role=button + aria-expanded where the module does not).
   The group card is the toggler's own wrapper when it holds one toggler; inside a .section (already a card) the .section-header is the row. */
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button):not(.none, [style*="display: none"], [style*="display:none"]) {
  display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 !important; margin: 0 !important; box-sizing: border-box;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; float: none !important;
  color: var(--text) !important; font: 500 15px/22px var(--f) !important; text-align: start; text-decoration: none !important; text-transform: none !important; cursor: pointer;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button) > :is(.mdi-arrow-down, .mdi-arrow-up) { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button)::after {
  content: ""; margin-left: auto; width: 16px; height: 16px; flex-shrink: 0; background: var(--text-muted);
  -webkit-mask: var(--sg-ic-chevron-down) center / 16px no-repeat; mask: var(--sg-ic-chevron-down) center / 16px no-repeat; transition: transform .2s var(--ease);
}
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button):is(.opened, [aria-expanded="true"], :has(> .mdi-arrow-up))::after { transform: rotate(180deg); }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button):hover { color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body .sg-gh {
  margin: 0 0 12px !important; padding: 0 16px !important; float: 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;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-gh.sg-gh-open { padding-bottom: 16px !important; }
/* inside a .section (the module settings form) every head + its panel(s) is its own card: the .section stops painting, the head is
   the card top (a full card while closed), the visible .section-content blocks after it continue the card, the last one closes it. */
html:is([data-skin="sg26"],#sg-skin) body .section-header.sg-gh-sh {
  padding: 0 var(--pad-card) !important; margin: 12px 0 0 !important; border: 1px solid var(--border-2) !important; border-radius: var(--r-lg) !important;
  background: var(--surface-hi) !important; box-shadow: var(--card-shadow) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .section > .section-header.sg-gh-sh:first-child { margin-top: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .section-header.sg-gh-sh.sg-gh-open { border-bottom: 1px solid var(--border) !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .section-header.sg-gh-sh ~ .section-content:not(.none) {
  margin: 0 !important; border: 1px solid var(--border-2) !important; border-top: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; background: var(--surface-hi) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .section-header.sg-gh-sh ~ .section-content:not(.none):not(:has(+ .section-content:not(.none))) { border-bottom: 1px solid var(--border-2) !important; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button)::after { transition: none; } }

/* ===== 11.G B4.5 [A285.5] topbar Tutorial button, row menu hardening ===== */
/* 11.G.1 A page that sets $TopBar->btn = true with no icon and no title (Affiliate) printed an empty topbar link: an empty blue pill.
   skin/js/app.js turns it into the page's Tutorial button when the page has one (it clicks the page's own trigger, label copied
   from it) and marks it «sg-tb-tutorial»; with nothing to open it gets «sg-tb-empty» and is not shown. Tutorial = the boards'
   gradient button (btn-grad: --pf-gradient-fill, accent inner edge, brand glow). */
html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-empty { display: none !important; }
html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-tutorial {
  background: var(--pf-gradient-fill) !important; border-color: transparent !important; color: var(--brand-on-primary) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-accent-2) 50%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--brand-primary) 60%, transparent) !important;
}
html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-tutorial:hover {
  transform: translateY(-1px); color: var(--brand-on-primary) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sg-accent-2) 60%, transparent), 0 0 24px color-mix(in srgb, var(--sg-accent-2) 30%, transparent), 0 14px 36px -12px color-mix(in srgb, var(--brand-primary) 80%, transparent) !important;
}
html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-tutorial:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-tutorial .sg-tb-ic {
  width: 16px; height: 16px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--sg-ic-help-circle) center / 16px no-repeat; mask: var(--sg-ic-help-circle) center / 16px no-repeat;
}
@media (prefers-reduced-motion: reduce) { html[data-skin="sg26"] body #topbar .topbar-special-link.sg-tb-tutorial:hover { transform: none; } }
/* 11.G.2 Row menus (.context-menu on Accounts/Captions cards and lists; 11.A.14 paints the kit .menu on the list): the wrapper itself
   draws nothing (light core.css gave it a 5px radius), icons inside a row are --text-3 like the kit .menu-item, keyboard focus shows. */
html:is([data-skin="sg26"],#sg-skin) body .context-menu { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li a :is(.mdi, .sli, .icon, svg) { width: 18px; flex-shrink: 0; margin: 0 !important; font-size: 18px; color: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body .context-menu > ul li a:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: -2px; }
/* stylelint-disable no-duplicate-selectors -- [A285.18] marker-class selectors (.sg-gh*, nav) are restated by later batches on purpose; the cascade merges them */

/* ===== 11.H B4.7 [A285.7] license key mask, group-head icon tile, group body beside its head, tab selected states ===== */
/* 11.H.1 «Mostra» mask on license keys (input[name="license-key"] / [name="ig-license-key"] / [data-sg-secret]): skin/js/app.js wraps
   the field in .sg-secret and adds button.sg-reveal; the value stays in the same input, only drawn as discs (no type=password, so no
   autofill). Where text-security is not supported the masked text is blurred instead. Promoted from the admin group (Reactions). */
html:is([data-skin="sg26"],#sg-skin) body .sg-secret { position: relative; display: block; }
html:is([data-skin="sg26"],#sg-skin) body .sg-secret > .input, html:is([data-skin="sg26"],#sg-skin) body .sg-secret > input { padding-right: 112px !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-secret > .sg-masked { -webkit-text-security: disc; }
@supports not (-webkit-text-security: disc) { html:is([data-skin="sg26"],#sg-skin) body .sg-secret > .sg-masked { color: transparent !important; text-shadow: 0 0 8px var(--text); } }
html:is([data-skin="sg26"],#sg-skin) body .sg-reveal {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-2); font: 500 13px/18px var(--f); cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .sg-reveal::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--sg-ic-eye) center / 16px no-repeat; mask: var(--sg-ic-eye) center / 16px no-repeat;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-reveal:hover { background: var(--hover-fill); color: var(--text-max); }
html:is([data-skin="sg26"],#sg-skin) body .sg-reveal: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 .sg-reveal { height: 36px; } html:is([data-skin="sg26"],#sg-skin) body .sg-reveal::after { content: ""; position: absolute; inset: -4px; } }

/* 11.H.2 Icon tile in a group head (11.F.2): put <span class="sg-group-icon" style="--sg-gi: var(--sg-ic-NAME)"></span> first in the
   head, or data-sg-icon="NAME" on the head (app.js adds the span; NAME = an --sg-ic-* icon, the group's page CSS may define more as
   --sg-ic-NAME on body). Kit icon tile: 32px, brand-tinted gradient, glyph 18px --sg-soft. */
html:is([data-skin="sg26"],#sg-skin) body .sg-group-icon {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-md); 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 .sg-group-icon::before {
  content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--sg-gi, var(--sg-ic-info)) center / 18px no-repeat; mask: var(--sg-gi, var(--sg-ic-info)) center / 18px no-repeat;
}

/* 11.H.3 A group whose body is the head wrapper's NEXT sibling (Reactions: div.mt-20 > a.np-toggler-button then div.np-toggler-content;
   div.section-content > a.rp-settings-X-toggler then div.rp-settings-X): while open, a wrapper that holds only the head is the card top
   (squared at the bottom; :has() cannot nest, so this does not test the sibling) and the visible sibling right after it continues the card. */
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row.sg-gh-open { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row.sg-gh-open + .sg-gb:not(.none) {
  margin: 0 0 12px !important; padding: 16px !important; border: 1px solid transparent !important; border-top: 0 !important; border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: inset 0 1px 0 var(--border) !important;
}

/* 11.H.4 Tab and segment selected state, whatever the product's script sets: aria-expanded (Bootstrap collapse), aria-selected, .active,
   .show. skin/js/app.js also writes aria-expanded="true" on a collapse trigger whose target is already open at load (WhatsApp settings:
   #collapse-1 is .show but its button says false). Shared ON look for Bootstrap tab lists (.nav-tabs, .nav-pills, role=tablist) = the kit segmented control's ON segment; page-local
   segmented tabs keep their own rule and should accept the same four states. */
html:is([data-skin="sg26"],#sg-skin) body :is(.nav-tabs, .nav-pills, [role="tablist"]) :is(a, button, .button):is(.active, .show, [aria-selected="true"], [aria-expanded="true"], [aria-current="page"]) {
  background: var(--surface-raised) !important; color: var(--text-max) !important; box-shadow: inset 0 1px 0 var(--border), var(--shadow-sm) !important;
}

/* ===== 11.I B4.8 [A285.8] native <select> = the kit select (every page; select2 / selectize keep 11.A.4) ===== */
/* Native control, no JS: appearance none + a line chevron drawn with two token gradients (two 6px diagonal strokes) (no literal colour, follows the theme and the
   tenant), 40px (44 + 16px text on the phone), radius 10, 1px --border-strong in both themes, --input-bg, focus = --brand-primary-border
   + the kit ring. The open list follows the theme (color-scheme) and the options take the menu surface where the browser allows.
   Beats the topbar fragment's body.darkside select rules (#0f0f12, 8px, !important). List boxes (multiple / size > 1) keep their
   height and get the field frame only. */
html:is([data-skin="sg26"],#sg-skin) body select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized) {
  -webkit-appearance: none !important; appearance: none !important; height: 40px !important; min-height: 0; max-width: 100%; box-sizing: border-box;
  padding: 0 36px 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; box-shadow: none !important;
  background-color: var(--input-bg) !important; color: var(--text) !important; font: 400 14px/22px var(--f) !important; text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent calc(50% - .85px), var(--text-3) calc(50% - .85px) calc(50% + .85px), transparent calc(50% + .85px)), linear-gradient(135deg, transparent calc(50% - .85px), var(--text-3) calc(50% - .85px) calc(50% + .85px), transparent calc(50% + .85px)) !important;
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50% !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important;
  transition: border-color .2s;
}
html:is([data-skin="sg26"],#sg-skin) body select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized)::-ms-expand { display: none; }
html:is([data-skin="sg26"],#sg-skin) body select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized):hover { border-color: var(--border-strong-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)):focus { border-color: var(--brand-primary-border) !important; outline: none !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)):is(.error, .is-invalid, [aria-invalid="true"]) { border-color: var(--status-danger-line) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)):disabled { opacity: .4; cursor: not-allowed; }
html:is([data-skin="sg26"],#sg-skin) body select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized) {
  padding: 6px !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-md) !important; box-shadow: none !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 :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)) :is(option, optgroup) { background-color: var(--surface-raised); color: var(--text); }
html:is([data-skin="sg26"],#sg-skin) body :is(select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized), select:is([multiple], [size]:not([size="1"])):not(.select2-hidden-accessible, .selectized)) option:disabled { color: var(--text-3); }
html[data-skin="sg26"] body select { color-scheme: light; }
html[data-skin="sg26"] body.darkside select, html[data-skin="sg26"] body [data-theme="dark"] select { color-scheme: dark; }
html[data-skin="sg26"] body.darkside [data-theme="light"] select { color-scheme: light; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body select:not([multiple], [size]:not([size="1"]), .select2-hidden-accessible, .selectized) { height: 44px !important; font-size: 16px !important; } }

/* ===== 11.J B4.9 [A285.9] legacy bare nav, support chat button, Reports SVG series, chat-button safe area ===== */
/* 11.J.1 core.css styles EVERY <nav> as the old fixed 69px sidebar (position fixed, top/left 0, 100% height, z 501; ≤992 width 219,
   left -250, visibility hidden) and the topbar fragment paints body.darkside nav (#111114, border-right, !important). The product
   sidebar is body > nav (B3). Any other <nav> (board tabs, breadcrumbs, pagers in content) is reset to a normal box here; its own
   class styles it. The !important background/border-right reset is restated for the kit .tabs. A content <nav> that needs its own
   background or right border must set them with !important (or use another element). */
html[data-skin="sg26"] body nav:not(body > nav) {
  position: static; top: auto; left: auto; z-index: auto; width: auto; height: auto; overflow: visible; visibility: visible;
  transform: none; transition: none; box-shadow: none; border-radius: 0;
}
html:is([data-skin="sg26"],#sg-skin) body nav:not(body > nav) { background-color: transparent !important; background-image: none !important; border-right: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root nav.tabs { background-color: var(--fill-2) !important; border-right: 1px solid var(--border) !important; }

/* 11.J.2 Support chat button (support-ticket chat-widget.fragment.php, printed at shutdown with a literal #0071e3): the kit .fab,
   brand tokens so it follows the tenant (#2b69e9 on the platform), 52px, glow; its glyph is the board's chat icon as a mask, so it also
   shows where the icon font is not loaded (CSS-only routes: WaPreferences). The widget's other literal-blue actions take the brand. */
html:is([data-skin="sg26"]) body { --sg-ic-chat: 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='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/%3E%3C/svg%3E"); }
html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab:not(.none, [style*="display: none"], [style*="display:none"]) {
  right: 28px !important; bottom: 28px !important; width: 52px !important; height: 52px !important; display: grid !important; place-items: center;
  border: 0 !important; border-radius: 50% !important; background: var(--brand-primary) !important; color: var(--brand-on-primary) !important;
  box-shadow: var(--sg-glow-rest) !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab:hover { transform: translateY(-1px); box-shadow: var(--sg-glow-hover) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab:focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 3px; }
html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab > .mdi { display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--sg-ic-chat) center / 22px no-repeat; mask: var(--sg-ic-chat) center / 22px no-repeat; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sgchat-ticket, .sgchat-send, .sgchat-apply button) { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-on-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sgchat-opt .mdi { color: var(--brand-primary-text) !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab { right: 16px !important; bottom: 16px !important; } }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body .sgchat-fab:hover { transform: none; } }
/* 11.J.3 Safe area: with the chat button on the page, the page ends 96px lower (80 on the phone), so the last actions can always be
   scrolled clear of it. */
html:is([data-skin="sg26"],#sg-skin) body:has(> .sgchat-fab) { padding-bottom: 96px; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body:has(> .sgchat-fab) { padding-bottom: 80px; } }

/* 11.J.4 Social Reports draws its own SVG charts with literal series colours passed by the views (followers #2563eb, engagement status
   green #16a34a, competitor lines). Series come from the brand/accent palette instead (GL-003 §7.7.1 «Grafici», same list as the
   Chart.js plugin in app.js); status colours are never a series. CSS beats the SVG presentation attributes. Single-series area charts
   and sparklines: line, end dot and area gradient; the multi-line growth chart: its k-th line and the k-th legend dot. */
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-followers, #rpt-followers, .srep-spark-svg) { --sg-srs: var(--brand-primary); }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-engagement, #rpt-engagement) { --sg-srs: var(--sg-accent-2); }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-followers, #rpt-followers, #srep-chart-engagement, #rpt-engagement, .srep-spark-svg) path[fill="none"] { stroke: var(--sg-srs) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-followers, #rpt-followers, #srep-chart-engagement, #rpt-engagement, .srep-spark-svg) circle { fill: var(--sg-srs) !important; stroke: var(--surface) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-followers, #rpt-followers, #srep-chart-engagement, #rpt-engagement, .srep-spark-svg) stop { stop-color: var(--sg-srs) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+1), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+1) .srep-legend-dot { stroke: var(--brand-primary) !important; background: var(--brand-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+2), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+2) .srep-legend-dot { stroke: var(--sg-accent-2) !important; background: var(--sg-accent-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+3), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+3) .srep-legend-dot { stroke: var(--sg-deep) !important; background: var(--sg-deep) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+4), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+4) .srep-legend-dot { stroke: color-mix(in srgb, var(--brand-primary) 55%, var(--text-3)) !important; background: color-mix(in srgb, var(--brand-primary) 55%, var(--text-3)) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+5), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+5) .srep-legend-dot { stroke: color-mix(in srgb, var(--sg-accent-2) 55%, var(--text-3)) !important; background: color-mix(in srgb, var(--sg-accent-2) 55%, var(--text-3)) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(#srep-chart-growth, #rpt-growth) path:nth-of-type(6n+6), html:is([data-skin="sg26"],#sg-skin) body .srep-chart-box:has(:is(#srep-chart-growth, #rpt-growth)) .srep-legend-item:nth-of-type(6n+6) .srep-legend-dot { stroke: var(--text-3) !important; background: var(--text-3) !important; }

/* ===== 11.K B4.10 [A285.10] legacy dark .card rule vs kit cards ===== */
/* The topbar fragment paints body.darkside .card (#111114, border-color rgba(255,255,255,.06), radius 12, inset shadow, #e5e7eb,
   all !important) after app.css: inside .sg-root it beat the kit .card edge, radius and shadow and the .is-hl brand border (reseller
   approval card). Kit card values restated at id strength, as for the buttons (11.D.1). Product cards outside .sg-root keep 11.A.8. */
html:is([data-skin="sg26"],#sg-skin) body .sg-root .card {
  background-color: transparent !important; border-color: transparent !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--card-shadow) !important; color: var(--text) !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-root .card.card-grad { border-radius: var(--r-xl) !important; box-shadow: var(--grad-card-shadow) !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-root .card.is-hl { border-color: color-mix(in srgb, var(--brand-primary-text) 55%, transparent) !important; }

/* ===== 11.L B4.11 [A285.11] Affiliate SVG charts (server-drawn, literal colours) on tokens ===== */
/* affiliates.v2.fragment.php draws its charts in PHP with literals: dark-only grid rgba(255,255,255,.06) and labels rgba(255,255,255,.4/.6)
   (invisible in light), series green #10b981 / blue #3b82f6, donut palette with status colours. As the Chart.js plugin and 11.J.4:
   grid --border, labels --text-3, series from the brand/accent palette in both themes (CSS beats SVG presentation attributes;
   the fill-opacity attributes stay). Area chart = the svg right after .aff-chart-head; sparklines in .kpi-spark / .aff-spark-graph. */
html:is([data-skin="sg26"],#sg-skin) body .section-content:has(> .aff-chart-head) > svg line { stroke: var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .section-content:has(> .aff-chart-head) > svg text { fill: var(--text-3) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.section-content:has(> .aff-chart-head) > svg, .kpi-spark svg, .aff-spark-graph svg) :is(polygon, polyline, circle) { fill: var(--brand-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.section-content:has(> .aff-chart-head) > svg, .kpi-spark svg, .aff-spark-graph svg) polyline { fill: none !important; stroke: var(--brand-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:first-of-type { stroke: var(--border) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+2):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+1) .dot { stroke: var(--brand-primary) !important; background: var(--brand-primary) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+3):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+2) .dot { stroke: var(--sg-accent-2) !important; background: var(--sg-accent-2) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+4):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+3) .dot { stroke: var(--sg-deep) !important; background: var(--sg-deep) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+5):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+4) .dot { stroke: color-mix(in srgb, var(--brand-primary) 55%, var(--text-3)) !important; background: color-mix(in srgb, var(--brand-primary) 55%, var(--text-3)) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+6):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+5) .dot { stroke: color-mix(in srgb, var(--sg-accent-2) 55%, var(--text-3)) !important; background: color-mix(in srgb, var(--sg-accent-2) 55%, var(--text-3)) !important; }
html:is([data-skin="sg26"],#sg-skin) body .aff-donut-chart svg circle:nth-of-type(6n+7):not(:first-of-type), html:is([data-skin="sg26"],#sg-skin) body .aff-donut-legend .legend-item:nth-of-type(6n+6) .dot { stroke: var(--text-3) !important; background: var(--text-3) !important; }

/* ===== 11.M B4.12 [A285.12] section title with icon tile ===== */
/* A plain h2.section-title (11.A.8) takes the same icon tile as the group heads (11.H.2): data-sg-icon="NAME" on the title (app.js
   inserts <span class="sg-group-icon">, NAME = an --sg-ic-* icon) or the span written first in the title. Title and tile on one line. */
html:is([data-skin="sg26"],#sg-skin) body .section-title:has(> .sg-group-icon) { display: inline-flex !important; align-items: center; gap: 10px; }

/* ===== 11.N B4.13 [A285.13] pagers, jconfirm frame and icon tile ===== */
/* 11.N.1 Pagers (DataTables .paginate_button: core.css #6065fc with #333/white text, 2.6:1; POD .pod-pagination; Bootstrap .pagination /
   .page-link) = kit pager: 32px pills, neutral = --text-2 on transparent with a --border-2 edge, current = --brand-primary with
   --brand-on-primary (the brand pair, AA in both themes and on tenants), disabled .4. 36px + 44px hit on the phone. */
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate, .pod-pagination, .pagination):not(.none, [style*="display: none"], [style*="display:none"]) { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button, .pod-pagination > :is(a, strong, span), .pagination > li > :is(a, span), .page-link) {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px !important; margin: 0 !important;
  box-sizing: border-box; border: 1px solid var(--border-2) !important; border-radius: var(--r-full) !important; background: transparent !important;
  color: var(--text-2) !important; font: 500 13px/18px var(--f) !important; text-decoration: none !important; opacity: 1 !important; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button, .pod-pagination > :is(a, strong, span), .pagination > li > :is(a, span), .page-link):hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button, .pod-pagination > :is(a, strong, span), .pagination > li > :is(a, span), .page-link):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button.current, .pod-pagination > strong, .pod-pagination > .current, .pagination > li.active > :is(a, span), .page-item.active > .page-link, [aria-current="page"]:is(.paginate_button, .page-link)) { background: var(--brand-primary) !important; border-color: transparent !important; color: var(--brand-on-primary) !important; cursor: default; }
html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button.disabled, .pagination > li.disabled > :is(a, span), .page-item.disabled > .page-link) { opacity: .4 !important; cursor: not-allowed; background: transparent !important; color: var(--text-2) !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button, .pod-pagination > :is(a, strong, span), .pagination > li > :is(a, span), .page-link) { min-width: 36px; height: 36px; position: relative; } html:is([data-skin="sg26"],#sg-skin) body :is(.dataTables_paginate .paginate_button, .pod-pagination > :is(a, strong, span), .pagination > li > :is(a, span), .page-link)::after { content: ""; position: absolute; inset: -4px; } }

/* 11.N.2 jconfirm frame = kit modal (11.A, box): no inner dividers (reset in 11.A with the box rules; the topbar fragment draws dark-literal lines under the title and above
   the buttons), no browser focus outline on the box itself when jconfirm focuses it (the controls inside keep their rings). */
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box:focus { outline: none !important; }

/* 11.N.3 Dialog icon = kit icon tile, AA in both themes: 40px, radius 10, a brand tint with the glyph in --brand-primary-text (the
   tile was the faint --sg-soft / legacy #fafafa glyph in light). Dialog types keep their meaning: red = danger, orange = warning,
   green = success. */
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-title-c:has(> .jconfirm-icon-c > *) { display: flex !important; align-items: center; gap: 12px; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-icon-c:has(> *) {
  --t-tile: var(--brand-primary); --t-glyph: var(--brand-primary-text);
  display: grid !important; place-items: center; flex-shrink: 0; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important;
  border-radius: var(--r-md) !important; background: color-mix(in srgb, var(--t-tile) 14%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-tile) 28%, transparent) !important;
  color: var(--t-glyph) !important; font-size: 20px !important; line-height: 1 !important;
}
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box .jconfirm-icon-c > * { color: inherit !important; font-size: inherit !important; margin: 0 !important; line-height: 1 !important; }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-icon-c:has(> *) { --t-tile: var(--status-danger); --t-glyph: var(--status-danger); }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-icon-c:has(> *) { --t-tile: var(--status-warning); --t-glyph: var(--status-warning); }
html:is([data-skin="sg26"],#sg-skin) body .jconfirm .jconfirm-box.jconfirm-type-green .jconfirm-icon-c:has(> *) { --t-tile: var(--status-success); --t-glyph: var(--status-success); }

/* ===== 11.O B4.14 [A285.14] PMP topbar: the first link is not the core «primary» ===== */
/* 10.4 paints the FIRST core page button as the primary (brand fill, --brand-on-primary !important) with :not(.x ~ .x), which outranks
   the PMP link rules of 10.6. On PMP pages whose first link is a plain link («Tutti i proxy» on Users) that left a white glyph on a
   transparent icon-only button below 1100 in light (invisible) and a brand pill above. PMP links are plain unless «/new» or current. */
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link:not(.topbar-special-link ~ .topbar-special-link):not([href$="/new"], [aria-current="page"]) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--text-2) !important; transform: none !important;
}
html[data-skin="sg26"] body #topbar:has(.topbar-title-text) .topbar-special-link:not(.topbar-special-link ~ .topbar-special-link):not([href$="/new"], [aria-current="page"]):hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }

/* ===== 11.P B4.15 [A285.15] compact group heads, blue «Guida», one kit switch ===== */
/* 11.P.1 Group head = ONE row (Angelo 2026-10-11: the heads were tall cards with «Guida» on its own line; «Targeting» a full-width pill).
   The head wrapper (11.F.2 card) that holds only the head (and its «Guida») becomes a 52px flex row: the toggler takes the free width (title + small chevron at its right end),
   the «Guida» button (.robi-learn-btn, injected by Reactions/Robi; .sg-guida for new markup) sits inline at the right. Tight padding,
   8px between collapsed groups. The module's own click handler, open state and body are untouched (CSS only; see 11.P.4). */
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row:not(.none, [style*="display: none"], [style*="display:none"], body.rp-view-simple .sr-adv) {
  display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 52px; box-sizing: border-box;
  padding: 0 12px 0 16px !important; margin: 0 0 8px !important; float: none !important; width: auto !important; max-width: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-gh > :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button) {
  flex: 1 1 auto; width: auto !important; min-width: 0; min-height: 50px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 15px/22px var(--f) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body .sg-gh > :is(.sg-group-toggle, .rpm-toggler-button, .rp-toggler-button, .lf-toggler-button, .btm-toggler-button, .pmp-toggler-button, .pmpa-toggler-button, .pmpl-toggler-button, .np-toggler-button, .ap-toggler-button)::after { width: 14px; height: 14px; -webkit-mask-size: 14px; mask-size: 14px; margin-left: auto; }
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row.sg-gh-open { margin-bottom: 0 !important; }
/* a wrapper that also holds its body (the body is inside, not after it) stays a block card: head on top, body below (11.F.2) */
/* 11.P.2 «Guida» = small tonal light-blue button (brand text on a light brand tint, A285.17), inline in the head */
html:is([data-skin="sg26"],#sg-skin) body .sg-gh > :is(.robi-learn-btn, .sg-guida):not(.none, [style*="display: none"], [style*="display:none"], body.rp-view-simple .sr-adv), html:is([data-skin="sg26"],#sg-skin) body :is(.robi-learn-btn, .sg-guida):not(.none, [style*="display: none"], [style*="display:none"], body.rp-view-simple .sr-adv) {
  display: inline-flex !important; align-items: center; gap: 6px; flex: 0 0 auto; height: 28px !important; min-height: 0 !important; padding: 0 12px !important;
  margin: 0 !important; position: relative !important; float: none !important; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--brand-primary-text) 22%, transparent) !important; border-radius: var(--r-full) !important;
  background: var(--brand-primary-subtle) !important; color: var(--brand-primary-text) !important; /* [A285.17] tonal light blue: «Salva» stays the only fill */ box-shadow: none !important; opacity: 1 !important; visibility: visible;
  font: 500 12px/16px var(--f) !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body :is(.robi-learn-btn, .sg-guida) :is(.mdi, .icon, svg) { color: inherit !important; font-size: 14px !important; line-height: 1 !important; margin: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.robi-learn-btn, .sg-guida):hover { background: color-mix(in srgb, var(--brand-primary) 22%, transparent) !important; color: var(--brand-primary-text) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.robi-learn-btn, .sg-guida):focus-visible { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
/* phone: 44px hit area; the button is position:relative above, in the SAME rule, so the area never escapes to an ancestor (the
   functional check caught a Guida whose hit area covered the whole page at 390 when position came from a weaker rule) */
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body :is(.robi-learn-btn, .sg-guida):not(.none, [style*="display: none"], [style*="display:none"], body.rp-view-simple .sr-adv)::after { content: ""; position: absolute; inset: -8px -2px; } }
/* 11.P.3 Open group: head-only wrapper (or head + «Guida») is the card top, the body right after it continues the card (extends 11.H.3) */
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row.sg-gh-open { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row.sg-gh-open + .sg-gb:not(.none) {
  margin: 0 0 8px !important; padding: 12px 16px 16px !important; border: 1px solid transparent !important; border-top: 0 !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important; background: var(--card-bg) padding-box, var(--card-edge) border-box !important; box-shadow: inset 0 1px 0 var(--border) !important;
}

/* 11.P.4 One switch. Reactions and Bypassing turn every legacy .checkbox into an iOS switch with their own sizes and greens, which
   met 11.A.3 (kit checkbox) half way: a 42x18 track with a 20px knob off its rail. skin/js/app.js flags the pages that load those
   module stylesheets with body.sg-cb-switches and the same selector as the module and they become the kit switch, like .form-switcher-ios (11.A.3): 42x26 track, 20px knob,
   off = --switch-off with a --border-strong edge, on = --brand-primary, label beside it, 10px apart, centred. Clicks still go to the
   module's label (the input stays where the module put it). */
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span:not(.none, [style*="display: none"], [style*="display:none"], body.rp-view-simple .sr-adv) { display: inline-flex !important; align-items: center !important; gap: 10px !important; min-height: 26px !important; padding-left: 0 !important; color: var(--text-2) !important; font: 400 14px/20px var(--f) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]):checked + span { color: var(--text) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span .icon:is(.unchecked, .checked) {
  position: relative !important; top: auto !important; left: auto !important; display: inline-block !important; flex: 0 0 42px !important; width: 42px !important; height: 26px !important;
  margin: 0 !important; box-sizing: border-box; border: 1px solid var(--border-strong) !important; border-radius: var(--r-full) !important;
  background: var(--switch-off) !important; box-shadow: none !important; transition: var(--tr) !important;
}
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span .icon:is(.unchecked, .checked) .mdi-check {
  position: absolute !important; top: 2px !important; left: 2px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important;
  background: var(--switch-knob) !important; box-shadow: var(--knob-shadow) !important; font-size: 0 !important; transform: none; transition: transform .35s var(--ease) !important; display: block !important; opacity: 1 !important; visibility: visible !important; /* [A285.19] core hides the unchecked mark */
}
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span .icon:is(.unchecked, .checked) .mdi-check::before { content: none !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]):checked + span .icon:is(.unchecked, .checked) { background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]):checked + span .icon:is(.unchecked, .checked) .mdi-check { transform: translateX(16px) !important; background: #fff !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]).warmup:checked + span .icon:is(.unchecked, .checked) { background: var(--status-warning) !important; border-color: var(--status-warning) !important; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]):focus-visible + span .icon:is(.unchecked, .checked) { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]):disabled + span { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body.sg-cb-switches .checkbox:not([name^="day_"]):not([data-activity-time-slot]) + span .icon:is(.unchecked, .checked) .mdi-check { transition: none !important; } }

/* 11.P.5 Safety net: a Bootstrap backdrop that is fading out (or left behind without .show) is invisible; it must never take clicks
   meant for the page (the functional check found one covering every switch of a settings page). */
html:is([data-skin="sg26"],#sg-skin) body .modal-backdrop:not(.show) { pointer-events: none !important; }

/* 11.P.6 The modules' own drawn switches next to a hidden checkbox (Reactions speed settings .rp-speed-settings-switch, accelerator and
   export switches: <input type=checkbox> + <span class="…-switch">) = the same kit switch. */
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-switch"] {
  position: relative !important; display: inline-block; flex: 0 0 42px !important; width: 42px !important; height: 26px !important; box-sizing: border-box;
  border: 1px solid var(--border-strong) !important; border-radius: var(--r-full) !important; background: var(--switch-off) !important; box-shadow: none !important; transition: var(--tr);
}
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-switch"]::after {
  content: "" !important; position: absolute !important; top: 2px !important; left: 2px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important;
  background: var(--switch-knob) !important; box-shadow: var(--knob-shadow) !important; transition: transform .35s var(--ease) !important;
}
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + span[class$="-switch"] { background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + span[class$="-switch"]::after { transform: translateX(16px) !important; background: #fff !important; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:focus-visible + span[class$="-switch"] { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:disabled + span[class$="-switch"] { opacity: .5; }

/* ===== 11.Q B4.16 [A285.16] collaudo (Angelo, 2026-10-11) ===== */
/* 11.Q.1 Open group body: the module's own trailing margins (mb-20, mt-15 on the last block) left a tall empty band under the content.
   The body ends with its last line: last children lose their bottom margin, the body pads 12/16/16 like the head. */
html:is([data-skin="sg26"],#sg-skin) body .sg-gh + .sg-gb:not(.none) > :last-child,
html:is([data-skin="sg26"],#sg-skin) body .sg-gh + .sg-gb:not(.none) > :last-child > :last-child,
html:is([data-skin="sg26"],#sg-skin) body .sg-gh + .sg-gb:not(.none) > :last-child > :last-child > :last-child { margin-bottom: 0 !important; }

/* 11.Q.2 Account menu (Profilo / Esci): as wide as its longest row plus the normal 10px row padding, not 200px */
html[data-skin="sg26"] body #topbar .context-menu-wrapper > .context-menu { width: auto !important; min-width: 0 !important; }
html[data-skin="sg26"] body #topbar .context-menu-wrapper > .context-menu > ul { min-width: 0 !important; width: max-content !important; max-width: min(320px, calc(100vw - 32px)); }
html[data-skin="sg26"] body #topbar .context-menu > ul > li > a { padding: 0 14px 0 10px !important; }

/* 11.Q.3 Tutorial: while a tour step is open the page does not scroll (the tour itself scrolls its targets into view by script, which
   overflow:hidden still allows); restored when the tour closes (the class goes away). */
html:has(> body:is(.rx-tour-active, .aff-tour-active)), html[data-skin="sg26"] body:is(.rx-tour-active, .aff-tour-active) { overflow: hidden !important; }

/* 11.Q.4 Loading state when a list item loads its pane (core.js .js-ajaxload-content: Reactions and every account aside). The product's
   dark rule painted the overlay flat (#111114, no spinner): a blank pane for seconds. Kit state: the pane dims to --surface, a 28px
   ring spins in the brand colour (static ring with reduced motion). */
@keyframes sg-spin { to { transform: rotate(360deg); } }
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton-content, .skeleton-aside).onprogress { position: relative; }
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton-content, .skeleton-aside).onprogress::after {
  content: "" !important; position: absolute !important; inset: 0 !important; z-index: 9999 !important; width: auto !important; height: auto !important;
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important; border-radius: inherit;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton-content, .skeleton-aside).onprogress::before {
  content: "" !important; position: absolute !important; z-index: 10000 !important; top: min(50%, 240px); left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  box-sizing: border-box; border-radius: 50%; border: 3px solid var(--border-2); border-top-color: var(--brand-primary); animation: sg-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton-content, .skeleton-aside).onprogress::before { animation: none; } }

/* 11.Q.5 Sidebar. Logo 34px (was 24) with 12px under it (was 22). Phone drawer: the close button no longer takes a row above the logo
   (it sits in the drawer's top-right corner). Desktop (>= 1024): the sidebar can be folded to the icon rail with the button next to
   the logo (state in localStorage, applied before the first paint by the nav fragment); folded, the rail is the 768-1023 rail of 10.3:
   icons only, the section name shows as the original tooltip flyout on hover, a click goes straight to the section. */
html[data-skin="sg26"] body > nav .sg-brand .sg-logo:is(img, span) { height: 34px !important; margin: 0 0 12px 8px !important; max-width: calc(100% - 52px) !important; }
/* [A285.17] the logo link (legacy .nav-logo-wrapper stacking) covered the fold button: the button sits above it, the link stops short of it */
html[data-skin="sg26"] body > nav .sg-brand .sg-brand-link { max-width: calc(100% - 44px); }
html[data-skin="sg26"] body > nav .sg-rail-toggle {
  position: absolute; top: 20px; right: 10px; z-index: 30; display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-3); cursor: pointer; transition: var(--tr);
}
html[data-skin="sg26"] body > nav .sg-rail-toggle:hover { background: var(--hover-fill); color: var(--text-max); }
html[data-skin="sg26"] body > nav .sg-rail-toggle:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }
html[data-skin="sg26"] body > nav .sg-rail-toggle svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
@media (min-width: 1024px) {
  html[data-skin="sg26"] body > nav .sg-rail-toggle { display: inline-flex; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle { position: static; align-self: center; margin: 0 0 10px; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle svg { transform: rotate(180deg); }
  html[data-skin="sg26"] body.sg-rail:has(> nav .nav-menu) { --sg-shell-left: var(--rail-w); }
  html[data-skin="sg26"] body.sg-rail > nav { width: var(--rail-w) !important; padding: 16px 12px !important; align-items: center; }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand { align-items: center; }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand-link { align-items: center; }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sg-logo { display: none !important; }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark {
      display: block !important; flex-shrink: 0; box-sizing: border-box; height: 30px !important; width: auto; max-width: 52px; margin: 0 0 14px !important;
      object-fit: contain; position: static !important;
    }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark.is-mono {
      display: grid !important; place-items: center; width: 30px; border-radius: var(--r-md); background: var(--brand-primary); color: var(--brand-on-primary); font: 700 13px/1 var(--f);
    }
    html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark.is-mono::before { content: attr(data-mono); }
    html[data-skin="sg26"] body.sg-rail:not(.darkside):not([data-theme="dark"]) > nav .sg-brand .sidebar-mark.is-dk,
    html[data-skin="sg26"] body.sg-rail:is(.darkside, [data-theme="dark"]) > nav .sg-brand .sidebar-mark.is-lt { display: none !important; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu { align-self: stretch; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu ul { align-items: center; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu ul + ul::before { width: 32px; margin: 6px auto; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu li > a { width: 48px !important; height: 44px !important; padding: 0 !important; gap: 0; justify-content: center; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu :is(.menu-icon, .special-menu-icon) { width: 20px !important; height: 20px !important; font-size: 20px !important; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu .special-menu-icon > * { font-size: 20px !important; }
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu .label {
      position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
    }
    /* rail closed: the original's tippy tooltips name the icons on hover */
    html[data-skin="sg26"] body.sg-rail > nav .nav-menu .tooltip { display: block !important; position: absolute; inset: 0; }
}
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-nav-close { position: absolute !important; top: 10px; right: 10px; margin: 0 !important; z-index: 3; }
  html[data-skin="sg26"] body > nav .sg-brand .sg-logo:is(img, span) { margin: 6px 56px 12px 8px !important; }
}

/* 11.Q.6 Type floor (GL-003 §7.7.1): secondary text never under 13px; body text 15px on the phone. The audit (8 main pages, 1440 and
   390) found 12px captions, badges, list meta, statuses, field tips, KPI deltas and the Guida label. */
html:is([data-skin="sg26"],#sg-skin) body :is(.caption, .badge, .field-tips li, .aside-list-item :is(.sub, .status), .section-title small, .st-live, .st-view-bar-hint, .robi-label, .aff-trend, .aff-perf-cell .lbl, .aff-method-badge, .aff-method-desc, .sgsb-row dt, .sgsb-status, .hc-sup-info .desc, .mrow-main .num, .mrow-meta .badge, .st-cat__txt .caption, #topbar .context-menu > ul [class^="menu-separator"]) { font-size: 13px !important; line-height: 18px !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .hc-wrap, .container-1200, .sg-root) :is(p, li):not(.caption, .sub, small, .field-tips li, .aside-list-item, [class*="badge"], [class*="chip"]) { font-size: 15px !important; line-height: 22px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.mrow-title, .st-cat__txt .label, .hc-action-title, .aff-method-title, .sg-pf-label, .hc-faq-body, .hc-action-desc) { font-size: 15px !important; line-height: 22px !important; }
}

/* 11.Q.7 Welcome first in the sidebar, with a home icon (its «?» read as help). */
html[data-skin="sg26"] body > nav .nav-menu li:has(> a[href$="/e/helpcenter"]) { order: -1; }
html[data-skin="sg26"] body > nav .nav-menu li > a[href$="/e/helpcenter"] { --sg-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='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E"); }

/* 11.Q.8 Cards: the «Il tuo abbonamento» card sat in a table cell with 30px top/bottom padding plus empty rows; the card now ends with
   its content (padding = the card's own 24/16). */
html:is([data-skin="sg26"],#sg-skin) body table:has(.sgsb) td { padding: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body table:has(.sgsb) tr + tr td { padding-top: 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body table:has(.sgsb) tr:not(:has(.sgsb)):not(:has(:is(a, button, input, select, img))) { display: none; }
html:is([data-skin="sg26"],#sg-skin) body :is(.section, .card, .box-list-item) { min-height: 0; }

/* ===== 11.R B4.17 [A285.17] Guida tonal, Tutorial secondary, colour option B (opt-in), audit quick wins ===== */
/* 11.R.1 One filled primary per region (GL-003 §7.7.5; audit P1-4): «Guida» is a tonal light-blue button (11.P.2), «Tutorial» a secondary tonal pill; «Salva» keeps the only --brand-primary fill. */
html:is([data-skin="sg26"],#sg-skin) body :is(.rx-tutorial-btn, .button-tutorial-modal.youtube-link) {
  background: var(--tonal-bg) !important; color: var(--text) !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; background-image: none !important;
}
html:is([data-skin="sg26"],#sg-skin) body :is(.rx-tutorial-btn, .button-tutorial-modal.youtube-link):hover { background: var(--hover-fill) !important; color: var(--text-max) !important; transform: none !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.rx-tutorial-btn, .button-tutorial-modal.youtube-link) :is(.mdi, .icon, svg) { color: var(--brand-primary-text) !important; }

/* 11.R.2 Colour option B (audit §4; Angelo chose B on 2026-10-11, the DEFAULT since B4.19, no opt-in). Azure as the wayfinding voice, from tokens only (--sg-accent-2, --sg-ink-2, --brand-*, --status-*):
   all derive from the tenant colour, so reseller themes follow; no violet, no new tokens. */
html:not(.sg-nocolor)[data-skin="sg26"] body:is(.darkside, [data-theme="dark"]) :is(.icon-tile, .sg-group-icon, .no-data-icon, .hc-action-icon, .hc-kpi-row-icon, .hc-sup-icon, .kpi-icon, .sga-mg-tile, .stkb-cat-tile__icon, .t-ico, .rs-fig-ico, .sgp-bke-tile, .wh-summary-icon, .rp-action-block-group-icon, .rp-source-pruning-group-icon, .rp-speed-settings-card-icon, .gr-hero-icon) { background: color-mix(in oklch, var(--sg-accent-2) 16%, transparent) !important; color: var(--sg-ink-2) !important; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sg-accent-2) 24%, transparent) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]) :is(.icon-tile, .sg-group-icon, .no-data-icon, .hc-action-icon, .hc-kpi-row-icon, .hc-sup-icon, .kpi-icon, .sga-mg-tile, .stkb-cat-tile__icon, .t-ico, .rs-fig-ico, .sgp-bke-tile, .wh-summary-icon, .rp-action-block-group-icon, .rp-source-pruning-group-icon, .rp-speed-settings-card-icon, .gr-hero-icon) { background: var(--brand-primary-subtle) !important; color: var(--brand-primary-text) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary-text) 18%, transparent) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body :is(.icon-tile, .sg-group-icon, .no-data-icon, .hc-action-icon, .hc-kpi-row-icon, .hc-sup-icon, .kpi-icon, .sga-mg-tile, .stkb-cat-tile__icon, .t-ico, .rs-fig-ico, .sgp-bke-tile, .wh-summary-icon, .rp-action-block-group-icon, .rp-source-pruning-group-icon, .rp-speed-settings-card-icon, .gr-hero-icon) :is(.mdi, .icon, svg, img) { color: inherit !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body:is(.darkside, [data-theme="dark"]) :is(.hc-card-head, .st-bhead, .sec-head, .section-header) > :is(.mdi, svg, .icon) { color: var(--sg-ink-2) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body:not(.darkside):not([data-theme="dark"]) :is(.hc-card-head, .st-bhead, .sec-head, .section-header) > :is(.mdi, svg, .icon) { color: var(--brand-primary-text) !important; }
/* active sidebar item: a 3px leading bar (decorative, also the non-colour «selected» cue GL-003 §7.3 asks for) */
html:not(.sg-nocolor)[data-skin="sg26"] body > nav .nav-menu li.active > a { position: relative; }
html:not(.sg-nocolor)[data-skin="sg26"] body > nav .nav-menu li.active > a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--sg-gradient); }
/* calendar: «oggi» ring + date pill, scheduled posts as brand chips, weekend columns on --surface-alt */
html:not(.sg-nocolor)[data-skin="sg26"] body #calendar-month .sg-cal-table td.is-today { box-shadow: inset 0 0 0 2px var(--brand-primary-border) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body #calendar-month .sg-day-lines > * { background: var(--brand-primary-subtle) !important; color: var(--brand-primary-text) !important; border-radius: 6px !important; padding: 2px 6px !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body #calendar-month .sg-cal-table td:is(:nth-child(6), :nth-child(7)):not(.is-today) { background: var(--surface-alt) !important; }
/* status chips tinted from the status tokens (never brand-derived) */
html:not(.sg-nocolor)[data-skin="sg26"] body .aside-list-item .status:is(.color-green, .color-paused, .color-danger, .color-mid, .color-grey) { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-full); --t: var(--t-neutral); background: rgba(var(--t), .14) !important; box-shadow: inset 0 0 0 1px rgba(var(--t), .28); }
html:not(.sg-nocolor)[data-skin="sg26"] body .aside-list-item .status.color-green { --t: var(--t-success); color: var(--status-success) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body .aside-list-item .status.color-paused { --t: var(--t-info); color: var(--status-info) !important; }
html:not(.sg-nocolor)[data-skin="sg26"] body .aside-list-item .status.color-danger { --t: var(--t-danger); color: var(--status-danger) !important; }

/* 11.R.3 Calendar «oggi» marker (default, audit P1-6): the date is an accent pill on every width */
html:is([data-skin="sg26"],#sg-skin) body #calendar-month .sg-day-num.is-today { background: var(--brand-primary) !important; color: var(--brand-on-primary) !important; border-radius: var(--r-full) !important; font-weight: 600 !important; }

/* 11.R.4 Post (audit P1-3, P1-6, P1-7): the compose header is a grid (title | actions) and never overlaps «Impostazioni di Base»; the
   title sits on the card edge; the two 11px time inputs of the date picker read at 13px (16px on the phone, no iOS zoom); the side
   columns end with their content instead of stretching to the tallest column. */
html:is([data-skin="sg26"],#sg-skin) body #post .section-header:has(> .section-title-post) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; height: auto !important; min-height: 44px; margin: 0 0 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body #post .section-header > .section-title-post { margin: 0 !important; text-align: start !important; }
html:is([data-skin="sg26"],#sg-skin) body #post .section-header:has(> .section-title-post)::before, html:is([data-skin="sg26"],#sg-skin) body #post .section-header:has(> .section-title-post)::after { content: none !important; display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body #post .section-header .section-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; height: auto !important; }
html:is([data-skin="sg26"],#sg-skin) body .datepicker--time-row input { font-size: 13px !important; height: auto !important; min-height: 24px; }
html:is([data-skin="sg26"],#sg-skin) body #post .clearfix > .col { align-self: start; }
html:is([data-skin="sg26"],#sg-skin) body #post .clearfix > .col > .section { height: auto !important; min-height: 0 !important; }

/* 11.R.5 Dead space (audit P1-7) */
html:is([data-skin="sg26"],#sg-skin) body .rp-schedule-save-bar-slot { margin-bottom: 12px !important; }
html:is([data-skin="sg26"],#sg-skin) body .rp-schedule-footer-actions .col.mb-20 { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .parser-tab-heads.pb-15 { margin-bottom: 12px !important; }
html:is([data-skin="sg26"],#sg-skin) body .hc-card { justify-content: flex-start !important; }
html:is([data-skin="sg26"],#sg-skin) body .hc-card > .hc-card-head { margin-bottom: 16px !important; }
html:is([data-skin="sg26"],#sg-skin) body .hc-card > .hc-card-head + * { margin-top: 0 !important; }
html:is([data-skin="sg26"],#sg-skin) body .hc-card:has(.hc-sup-icon) :is([class*="grid"], [class*="list"]):has(.hc-sup-icon) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
html:is([data-skin="sg26"],#sg-skin) body .st-block.st-notif { row-gap: 20px !important; }
html:is([data-skin="sg26"],#sg-skin) body .st-block.st-notif > .st-bhead + * { margin-top: 0 !important; }

/* 11.R.6 Phone touch targets (audit P1-5; the topbar keeps the original's sizes): segments 44, tabs 44, small icon links 44 hit area,
   every field 16px text (no iOS zoom) */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .st-view-seg { min-height: 44px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.react-tab-heads, .parser-tab-heads, .caption-tabs) > a { min-height: 44px !important; display: inline-flex !important; align-items: center; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.caption-picker, .js-re-connect, .box-list-item .options > a, .box-list-item .js-refresh-account) { position: relative; display: inline-grid !important; place-items: center; min-width: 44px; min-height: 44px; }
  html:is([data-skin="sg26"],#sg-skin) body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"]), select, textarea):not(.sg-switch-input) { font-size: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body .datepicker--time-row input { font-size: 16px !important; }
}

/* ===== 11.S B4.18 [A285.18] rail head, logo, flyout labels, type floor, cheap animations ===== */
/* 11.S.1 Sidebar head (the fold button position is 11.T.1 since B4.19). B4.18: the fold button no longer shared the logo row (in the rail the mark sat on top of it, Angelo): it is the LAST row
   of the sidebar in both states, so nothing overlaps at any height. The expanded logo is back to a visible 34px (B4.17 had capped its
   width to make room for the button, which scaled the logotype down); the rail mark is 30px. */
html[data-skin="sg26"] body > nav .sg-brand .sg-logo:is(img, span) { height: 34px !important; max-width: 100% !important; }
html[data-skin="sg26"] body > nav .sg-brand .sg-brand-link { max-width: none; }
@media (min-width: 1024px) {
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark:not(.is-mono) { height: 30px !important; width: auto; max-width: 44px; margin: 0 0 14px !important; }
}
/* 11.S.2 Flyout labels (tippy tooltips: the rail's section names and every product tooltip): readable, 14/20 500, the popover surface
   with its border and shadow, 8x12 padding, 8px off the trigger. */
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper .tippy-tooltip.tippy-tooltip { font: 500 14px/20px var(--f) !important; padding: 8px 12px !important; border: 1px solid var(--border-2) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-max) !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="right"] { margin-left: 8px !important; }
html:is([data-skin="sg26"],#sg-skin) body .tippy-popper[x-placement^="left"] { margin-left: -8px !important; }

/* 11.S.3 Type tokens per role (B4.20, Angelo: «sul server di produzione come sono le dimensioni dei font? non possiamo usare le
   stesse?»). Measured on the original stack (core.css + module CSS, skin blocked) per element role and set here as explicit
   tokens with their line-heights: pure CSS on the first paint, nothing is resized by script, and no rule sizes an element from
   its parent (no «max(14px, 1em)»: that shrank larger text, e.g. a 16px subtitle in a 14px block). Floors: body text and controls
   14px; captions / meta (help text, small, table data, chips, badges, code snippets) 13px, where the original used 11-13px. */
:root[data-skin="sg26"] { --fs-caption: 13px; --lh-caption: 18px; --fs-body: 14px; --lh-body: 21px; --fs-control: 14px; --lh-control: 20px; }
@media (min-width: 1024px) { html[data-skin="sg26"] body > nav .nav-menu li > a { font-size: 14px !important; line-height: 20px !important; } }
html:is([data-skin="sg26"],#sg-skin) body :is(label.form-label, .form-label > b) { font-size: var(--fs-control) !important; line-height: var(--lh-control) !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip.sg-chip--sm, .box-list-item .sub, .section-title small, span.circle > span, .aff-spark-head .lbl, .aff-empty-mini, .aff-empty-mini code, .progress > span, .mrow-meta .tag, .kpi-value small, .aff-perf-cell small, span.val > small) { font-size: var(--fs-caption) !important; line-height: var(--lh-caption) !important; }
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .topbar-special-link { font-size: 14px !important; } }
/* captions / meta: 13px (original 11-13px) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .datepickers-container, .modal) :is(small, .field-tips li, .hint, [class*="-hint"], .form-text, [class*="help-text"], td, [class*="slider"] span, [class*="scale"] span, output, [class*="quota"] :is(span, p), .datepicker--day-name, [class*="kpi-label"], .aff-empty-mini, .badge, pre, .codestyle) { font-size: var(--fs-caption) !important; line-height: var(--lh-caption) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .datepickers-container, .modal) code { font-size: max(var(--fs-caption), .92em) !important; }
/* body text and controls: 14px */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .datepickers-container, .modal) :is(li:not(.field-tips li), th) { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .datepickers-container, .modal) :is(label:not(small label):not(.sg-chip), [role="tab"], textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { font-size: var(--fs-control) !important; line-height: var(--lh-control) !important; }
@media (max-width: 767.98px) { html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .datepickers-container, .modal) :is(textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { font-size: 16px !important; } }

/* 11.S.4 Cheap animations (Angelo: «è tutto scattoso»). Only opacity, transform and visibility animate anywhere under the skin:
   colour, shadow, width/height and every legacy «transition: all» become instant (no repaint/relayout per frame). The token --tr is
   opacity + transform too. The sidebar and the group head rows are layout/paint containment roots, so a hover or a fold repaints
   only them. prefers-reduced-motion still switches motion off (11.A, 11.D). */
html[data-skin="sg26"] body *, html[data-skin="sg26"] body *::before, html[data-skin="sg26"] body *::after { transition-property: opacity, transform, visibility !important; }
html[data-skin="sg26"] body > nav { contain: layout style; }
html:is([data-skin="sg26"],#sg-skin) body .sg-gh-row { contain: layout; }

/* stylelint-enable no-duplicate-selectors */
/* stylelint-disable no-duplicate-selectors */
/* ===== 11.T B4.19 [A285.19] sidebar head, fold button, drawer head, rail flyout, 14px floor ===== */
/* 11.T.1 Sidebar head. The logo link's box is the logo image only (it used to stretch over the whole head row and took the clicks
   meant for the fold button on desktop and for the X in the phone drawer). The fold button is back in the head, always visible
   without scrolling (Angelo: «non vedo più il pulsante»; at the bottom of a long menu it sat under the fold or the chat button):
   expanded, on the logo row at the right with 8px clear of the logo; in the rail, its own row under the mark. A clear 32px icon
   button on the surface with the border token; the tooltip is its title / aria-label. */
html[data-skin="sg26"] body > nav .sg-brand .sg-brand-link { align-self: flex-start !important; width: fit-content !important; max-width: calc(100% - 40px) !important; }
html[data-skin="sg26"] body > nav .sg-brand .sg-logo:is(img, span) { margin: 0 0 0 8px !important; max-width: 100% !important; }
html[data-skin="sg26"] body > nav .nav-logo-wrapper.sg-brand { padding: 0 0 12px !important; }
html[data-skin="sg26"] body > nav .sg-rail-toggle {
  position: absolute !important; top: 21px; right: 16px; order: 0; z-index: 30; margin: 0 !important; width: 32px; height: 32px; box-sizing: border-box;
  border: 1px solid var(--border-2); border-radius: var(--r-md); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm);
}
html[data-skin="sg26"] body > nav .sg-rail-toggle:hover { background: var(--hover-fill); color: var(--text-max); }
@media (min-width: 1024px) {
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sg-brand-link { align-self: center !important; max-width: none !important; }
  html[data-skin="sg26"] body.sg-rail > nav .nav-logo-wrapper.sg-brand { padding: 0 0 10px !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark:not(.is-mono) { margin: 0 !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark.is-mono { margin: 0 !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle { position: static !important; align-self: center; flex-shrink: 0; margin: 0 0 10px !important; }
}

/* 11.T.2 Phone drawer head (Angelo's screenshot): the logo / close row sits 12px from the top; the head is sticky on the drawer
   surface with a 1px divider, so the items scroll beneath it instead of showing through; 8px before the first item. The X is its
   own 44x44 target above everything in the head, never under the logo link. */
@media (max-width: 1023.98px) {
  html[data-skin="sg26"] body.mobile-menu-open > nav { padding-top: 12px !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav .nav-logo-wrapper.sg-brand {
    position: sticky !important; top: -12px; z-index: 2; margin: -12px -12px 8px !important; padding: 12px 12px 10px !important;
    background: var(--surface) !important; border-bottom: 1px solid var(--border);
  }
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-brand .sg-brand-link { max-width: calc(100% - 56px) !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-brand .sg-logo:is(img, span) { margin: 5px 0 5px 8px !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav .sg-nav-close { position: absolute !important; top: 7px !important; right: 8px !important; z-index: 40 !important; width: 44px !important; height: 44px !important; margin: 0 !important; }
  html[data-skin="sg26"] body.mobile-menu-open > nav .nav-menu { margin-top: 0 !important; }
}

/* 11.T.3 Rail fold (Angelo approved): one instant re-layout, no animated width; the labels and the logo (unfold) or the icons and
   the mark (fold) come in with a short opacity + translate, compositor only. app.js sets .sg-rail-x on the nav (not on <body>) for 260 ms on the click. */
@keyframes sg-rail-in { from { opacity: 0; transform: translateX(-6px); } }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html[data-skin="sg26"] body:not(.sg-rail) > nav.sg-rail-x :is(.nav-menu .label, .sg-brand .sg-logo) { animation: sg-rail-in .2s var(--ease) both; }
  html[data-skin="sg26"] body.sg-rail > nav.sg-rail-x :is(.nav-menu :is(.menu-icon, .special-menu-icon), .sg-brand .sidebar-mark) { animation: sg-rail-in .2s var(--ease) both; }
}

/* 11.T.4 Rail flyout labels: ONE element reused for every item (app.js), placed with a single transform from positions read once
   when the pointer enters the sidebar; no DOM is created and nothing is measured per item; the label is an attribute shown by ::before and the shown state an attribute, so no text node or class under <body> changes (that re-checked body:has(> nav …) and restyled the page per item). The product's tippy instances on the
   rail items are not triggered any more (their .tooltip hit areas are off in the rail). Same look as 11.S.2. */
@media (min-width: 1024px) { html[data-skin="sg26"] body.sg-rail > nav .nav-menu .tooltip { display: none !important; } }
html[data-skin="sg26"] body > .sg-flyout {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 14px/20px var(--f); padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--surface-raised); color: var(--text-max); box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .12s var(--ease);
}
html[data-skin="sg26"] body > .sg-flyout[data-on] { opacity: 1; }
html[data-skin="sg26"] body > .sg-flyout::before { content: attr(data-label); }
@media (prefers-reduced-motion: reduce) { html[data-skin="sg26"] body > .sg-flyout { transition: none; } }

/* 11.T.5 Type (Angelo: «13 px è troppo piccolo come testo da desktop, 14 deve essere il minimo»): body text 15px (16px on the
   phone); the floor for every visible text is 14px (11.S.3 carriers and the app.js floor stylesheet use 14px). */
html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"], :has(> #topbar)) { font-size: 16px; line-height: 24px; } /* [A285.20] original base 16px */
@media (max-width: 767.98px) { html[data-skin="sg26"] body:is(.darkside, [data-theme="dark"], :has(> #topbar)) { font-size: 16px; line-height: 24px; } }

/* 11.T.6 One switch everywhere (Angelo: «gli switch sono ancora brutti» on Leads Finder, Repost…). Inventory 2026-10-11: 28 checkbox
   markup variants on 66 routes. The legacy .checkbox + span .icon rows are the kit switch on every page now (app.js flags every
   page sg-cb-switches; 11.P.4 covers .icon.unchecked and .icon.checked); the modules' own drawn tracks (…-slider, .st-switch__track,
   .lever, an unclassed span in a …-toggle label, the template-link switch) become the 11.P.6 kit track: 42x26, 20px knob, off
   --switch-off with a --border-strong edge, on --brand-primary; their own knob (::before) is off. Chip and option pickers (filters,
   merge options) are not switches and keep the kit chip. */
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-slider"],
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .st-switch__track,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .lever,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"] + span:not([class]),
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"] + span {
  position: relative !important; inset: auto !important; display: inline-block !important; flex: 0 0 42px !important; width: 42px !important; height: 26px !important; min-width: 42px; box-sizing: border-box; margin: 0;
  border: 1px solid var(--border-strong) !important; border-radius: var(--r-full) !important; background: var(--switch-off) !important; box-shadow: none !important; vertical-align: middle; cursor: pointer;
}
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-slider"]::before,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .st-switch__track::before,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .lever::before,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"] + span:not([class])::before,
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"] + span::before { content: none !important; display: none !important; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-slider"]::after,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .st-switch__track::after,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .lever::after,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"] + span:not([class])::after,
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"] + span::after {
  content: "" !important; display: block !important; position: absolute !important; top: 2px !important; left: 2px !important; right: auto !important; bottom: auto !important; width: 20px !important; height: 20px !important;
  margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--switch-knob) !important; box-shadow: var(--knob-shadow) !important; transform: none; transition: transform .35s var(--ease) !important;
}
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + span[class$="-slider"],
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + .st-switch__track,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + .lever,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"]:checked + span:not([class]),
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"]:checked + span { background: var(--brand-primary) !important; border-color: var(--brand-primary-border) !important; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + span[class$="-slider"]::after,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + .st-switch__track::after,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:checked + .lever::after,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"]:checked + span:not([class])::after,
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"]:checked + span::after { transform: translateX(16px) !important; background: #fff !important; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:focus-visible + span[class$="-slider"],
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:focus-visible + .st-switch__track,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:focus-visible + .lever,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"]:focus-visible + span:not([class]),
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"]:focus-visible + span { outline: 2px solid var(--brand-focus-ring) !important; outline-offset: 2px; }
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:disabled + span[class$="-slider"],
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:disabled + .st-switch__track,
html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"]:disabled + .lever,
html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"]:disabled + span:not([class]),
html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"]:disabled + span { opacity: .5; cursor: not-allowed; }
/* the wrappers that drew a track of their own around the input */
html:is([data-skin="sg26"],#sg-skin) body :is(.rp-tp-switch, label.st-toggle, label.lm-toggle, label.aff-toggle) { background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; min-height: 26px; display: inline-flex !important; align-items: center; gap: 10px; }
html:is([data-skin="sg26"],#sg-skin) body :is(.rp-tp-switch, label.st-toggle, label.lm-toggle, label.aff-toggle) > input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + span[class$="-slider"]::after, html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .st-switch__track::after, html:is([data-skin="sg26"],#sg-skin) body input[type="checkbox"] + .lever::after, html:is([data-skin="sg26"],#sg-skin) body label[class$="-toggle"] > input[type="checkbox"] + span:not([class])::after, html:is([data-skin="sg26"],#sg-skin) body .rp-tp-switch > input[type="checkbox"] + span::after { transition: none !important; } }
/* a bare checkbox (filters in chips, lists): the kit checkbox, never the browser default */
html:is([data-skin="sg26"],#sg-skin) body .skeleton-content input[type="checkbox"]:not(.checkbox):not([class*="switch"]):not([role="switch"]) {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; box-sizing: border-box; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm, 4px);
  background: var(--surface) center / 12px 12px no-repeat; vertical-align: middle; cursor: pointer;
}
html:is([data-skin="sg26"],#sg-skin) body .skeleton-content input[type="checkbox"]:not(.checkbox):not([class*="switch"]):not([role="switch"]):checked {
  border-color: var(--brand-primary); background-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
html:is([data-skin="sg26"],#sg-skin) body .skeleton-content input[type="checkbox"]:not(.checkbox):not([class*="switch"]):not([role="switch"]):focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; }

/* 11.T.7 Phone topbar: the hamburger glyph lines up with the 16px page gutter; its 44px tap target stays. */
@media (max-width: 767.98px) { html[data-skin="sg26"] body #topbar .topbar-mobile-menu-icon { margin-left: calc(-4px - (44px - 1em) / 2) !important; } }

/* 11.T.8 Tours on the phone (Growth intro was off centre): every tour card - intro and target-less steps included - is the same
   bottom card, 16px from the sides and the bottom, no arrow, scrolling inside when long. */
@media (max-width: 767.98px) {
  html[data-skin="sg26"] body :is(#rx-tour-tooltip, #gr-tour-tooltip, #aff-tour-tooltip) {
    position: fixed !important; left: 16px !important; right: 16px !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; max-width: none !important; transform: none !important; margin: 0 !important; box-sizing: border-box; max-height: calc(100dvh - 32px); overflow-y: auto;
  }
  html[data-skin="sg26"] body :is(#rx-tour-tooltip, #gr-tour-tooltip, #aff-tour-tooltip) :is(.rx-tour-tooltip-arrow, .gr-tour-tooltip-arrow, .aff-tour-tooltip-arrow) { display: none !important; }
}

html[data-skin="sg26"] body:not(#sg-f1) :is(#rx-tour-tooltip, #gr-tour-tooltip, #aff-tour-tooltip) :is(button, .button) { font-size: 14px !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-reveal.sg-reveal { width: max-content; flex-shrink: 0; white-space: nowrap; font-size: 14px; }

/* 11.T.9 Headway (the bell): an iframe from headwayapp.co, whose content cannot be styled and has no dark option (HW_config has
   no theme setting). Its container gets the kit popover frame: radius, border, shadow, the raised surface behind it; on the phone
   it is 16px from the sides. The badge is untouched. */
html[data-skin="sg26"] body #HW_frame_cont { border-radius: var(--r-lg) !important; border: 1px solid var(--border-2) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface-raised) !important; overflow: hidden !important; }
html[data-skin="sg26"] body #HW_frame_cont #HW_frame { border-radius: inherit; }
@media (max-width: 767.98px) { html[data-skin="sg26"] body #HW_frame_cont { left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; } }

/* 11.T.10 Design sweep. (a) labels that do not fit their button / chip: see 11.U.2 (pure CSS since B4.20). */
/* (b) help «?» icons: 6px from their label, centred on the line, a 24px tap area */
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content, .modal) span.tooltip.tippy:has(> .mdi) { display: inline-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 0 0 6px !important; vertical-align: middle; flex: none; position: relative; }
html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content, .modal) :is(label, span, h3, h4, .form-label, .title, div) > .mdi:is(.mdi-help-circle, .mdi-help-circle-outline, .mdi-information-outline):not(:first-child) { margin-left: 6px !important; vertical-align: middle; }
/* (c) the phone spacing scale 8 / 12 / 16: form rows, label to field, groups (the desktop 15-50px margins were kept on the phone) */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) .mb-10 { margin-bottom: 8px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.mb-15, .mb-20) { margin-bottom: 12px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.mb-25, .mb-30, .mb-40, .mb-50) { margin-bottom: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) .mt-10 { margin-top: 8px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.mt-15, .mt-20) { margin-top: 12px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.mt-25, .mt-30, .mt-40, .mt-50) { margin-top: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.pb-15, .pb-20) { padding-bottom: 12px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(.pb-25, .pb-30, .pb-40) { padding-bottom: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) label.inline-block:is(.mb-15, .mb-20) { margin-bottom: 4px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) label.inline-block:is(.mr-30, .mr-20) { margin-right: 16px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.skeleton, .skeleton-content) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { max-width: 100%; min-width: 0; }
}
/* (d) phone tab strips that scroll sideways (app.js .sg-strip): a fade on the side that hides tabs, an end peek, no snapping that
   hides it; a short strip wraps to two rows instead. */
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .sg-strip { scroll-snap-type: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body .sg-strip > * { scroll-snap-align: none !important; }
  html:is([data-skin="sg26"],#sg-skin) body .sg-strip.sg-strip--r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  html:is([data-skin="sg26"],#sg-skin) body .sg-strip.sg-strip--l { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
  html:is([data-skin="sg26"],#sg-skin) body .sg-strip.sg-strip--l.sg-strip--r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}
/* 11.T.11 Reactions (Angelo: «ottimizzazioni di velocità senza toccare il codice»): an open settings group that is off screen is
   not laid out or painted until it comes near the viewport (content-visibility: auto; its last real size is kept). Applied to the
   group bodies only: the module measures its heads, the save bar and the fields it scrolls to, which render as soon as they near
   the viewport (scrollIntoView and the tours bring them there first). */
html[data-skin="sg26"] body #reactions-pro .sg-gb:not(.none) { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* stylelint-enable no-duplicate-selectors */
/* stylelint-disable no-duplicate-selectors */
/* ===== 11.U B4.20 [A285.20] original type sizes per role, CSS-only wrapping, Azioni di Massa, rail icon column ===== */
/* 11.U.1 Type aligned to the original stack (measured 2026-10-11, core.css + module CSS with the skin blocked, 8 routes):
   section titles 14px (original 14), KPI numbers 16px (16), menu titles 16px (16), the h2.h3 page headings 24px (24),
   small buttons 14px (original 12, controls floor 14), small chips 13px (original 12-13, meta floor 13). */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .skeleton-content) :is(h2.section-title, .section-title:not(small)) { font-size: 14px !important; line-height: 20px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) :is(.skeleton, .skeleton-content) span.caption.subtle.num { font-size: 16px !important; line-height: 22px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) p.menu-title { font-size: 16px !important; line-height: 22px !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2):not(#sg-f3) h2.h3 { font-size: 24px !important; line-height: 32px !important; }
html:is([data-skin="sg26"],#sg-skin) body .button.small { font-size: 14px !important; line-height: 18px !important; }
html:is([data-skin="sg26"],#sg-skin) body .sg-chip.sg-chip--sm { font-size: 13px !important; line-height: 16px !important; }

/* 11.U.2 Labels never leave their button or chip, from the first paint (B4.19 did it by script after load, which resized them
   a moment later): the kit's fixed heights become minimum heights with the same vertical padding, so a one-line button is
   unchanged and a long label wraps inside a taller one. */
html:is([data-skin="sg26"],#sg-skin) body .button { height: auto !important; min-height: 40px; padding-top: 9px !important; padding-bottom: 9px !important; white-space: normal; text-align: center; overflow-wrap: anywhere; }
html:is([data-skin="sg26"],#sg-skin) body .button.small { min-height: 32px; padding-top: 6px !important; padding-bottom: 6px !important; }
html:is([data-skin="sg26"],#sg-skin) body .button.large { min-height: 44px; padding-top: 11px !important; padding-bottom: 11px !important; }
html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)) { height: auto !important; min-height: 30px !important; padding-top: 5px !important; padding-bottom: 5px !important; white-space: normal; overflow-wrap: anywhere; }
html:is([data-skin="sg26"],#sg-skin) body .sg-chip.sg-chip--sm { min-height: 26px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
@media (max-width: 767.98px) {
  html:is([data-skin="sg26"],#sg-skin) body .button:not(.small) { min-height: 44px; padding-top: 11px !important; padding-bottom: 11px !important; }
  html:is([data-skin="sg26"],#sg-skin) body .button.small { min-height: 40px; padding-top: 10px !important; padding-bottom: 10px !important; }
  html:is([data-skin="sg26"],#sg-skin) body :is(.sg-chip, :where(.search-box a.button.u-small)) { min-height: 36px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* 11.U.3 Reactions «Azioni di Massa» (Angelo: rows about 4px apart): one grid, 8px between rows and columns, every button the
   full width of its column (two columns where the list is wide enough, one in the narrow account aside), icon + label at the
   start. The same 8px gap for the filter lists above it. */
html:is([data-skin="sg26"],#sg-skin) body .rp-task-actions-all > .pos-r { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
html:is([data-skin="sg26"],#sg-skin) body .rp-task-actions-all > .pos-r > :is(a, button).button { width: 100% !important; margin: 0 !important; justify-content: flex-start !important; text-align: left; }
html:is([data-skin="sg26"],#sg-skin) body .reactions-bulk-actions-filters .pos-r:not(.rp-task-actions-all > .pos-r) { display: flex !important; flex-wrap: wrap; gap: 8px; }
html:is([data-skin="sg26"],#sg-skin) body .reactions-bulk-actions-filters .pos-r:not(.rp-task-actions-all > .pos-r) > .button { margin: 0 !important; }

/* 11.U.4 Rail: the «>>» expand button is the first row of the icon column, the same 48x44 cell as Home and the others, centred,
   transparent with the same hover; the mark above it is 36px, centred, 14px above and below. */
@media (min-width: 1024px) {
  html[data-skin="sg26"] body.sg-rail > nav { padding-top: 14px !important; }
  html[data-skin="sg26"] body.sg-rail > nav .nav-logo-wrapper.sg-brand { padding: 0 0 14px !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark:not(.is-mono) { height: 36px !important; max-width: 48px; margin: 0 !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-brand .sidebar-mark.is-mono { width: 36px !important; height: 36px !important; font-size: 15px !important; margin: 0 !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle {
    position: static !important; align-self: center; flex-shrink: 0; width: 48px !important; height: 44px !important; margin: 0 0 2px !important;
    border: 0 !important; border-radius: var(--r-md) !important; background: transparent !important; box-shadow: none !important; color: var(--text-2) !important;
  }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle:hover { background: var(--hover-fill) !important; color: var(--text-max) !important; }
  html[data-skin="sg26"] body.sg-rail > nav .sg-rail-toggle svg { width: 20px; height: 20px; }
}
/* stylelint-enable no-duplicate-selectors */
/* icons-generic:begin (generated by gen-icons-generic.js; decision C; do not edit by hand) */
html[data-skin="sg26"] body{--sg-ic-check: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='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--sg-ic-x: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='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");--sg-ic-x-circle: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");--sg-ic-chevron-down: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='m6 9 6 6 6-6'/%3E%3C/svg%3E");--sg-ic-chevron-left: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='m15 18-6-6 6-6'/%3E%3C/svg%3E");--sg-ic-chevron-right: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='m9 18 6-6-6-6'/%3E%3C/svg%3E");--sg-ic-help-circle: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");--sg-ic-refresh: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='M21 12a9 9 0 1 1-2.64-6.36L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");--sg-ic-alert-circle: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");--sg-ic-info: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");--sg-ic-instagram: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='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");--sg-ic-check-circle: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='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");--sg-ic-download: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='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");--sg-ic-arrow-down: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='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");--sg-ic-arrow-left: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='m12 19-7-7 7-7M19 12H5'/%3E%3C/svg%3E");--sg-ic-calendar: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='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");--sg-ic-plus: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='M12 5v14M5 12h14'/%3E%3C/svg%3E");--sg-ic-plus-circle: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");--sg-ic-image: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='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");--sg-ic-search: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%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");--sg-ic-clock: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");--sg-ic-more-vertical: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%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");--sg-ic-more-horizontal: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%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E");--sg-ic-trash: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='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");--sg-ic-pencil: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='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");--sg-ic-eye: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='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");--sg-ic-copy: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='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");--sg-ic-chart-line: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='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");--sg-ic-send: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='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");--sg-ic-menu: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 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body .mdi-check{--sg-g:var(--sg-ic-check)}
html[data-skin="sg26"] body .sli-check{--sg-g:var(--sg-ic-check)}
html[data-skin="sg26"] body .mdi-close{--sg-g:var(--sg-ic-x)}
html[data-skin="sg26"] body .sli-close{--sg-g:var(--sg-ic-x)}
html[data-skin="sg26"] body .mdi-close-circle{--sg-g:var(--sg-ic-x-circle)}
html[data-skin="sg26"] body .mdi-close-circle-outline{--sg-g:var(--sg-ic-x-circle)}
html[data-skin="sg26"] body .mdi-chevron-down{--sg-g:var(--sg-ic-chevron-down)}
html[data-skin="sg26"] body .mdi-menu-down{--sg-g:var(--sg-ic-chevron-down)}
html[data-skin="sg26"] body .sli-arrow-down{--sg-g:var(--sg-ic-chevron-down)}
html[data-skin="sg26"] body .mdi-chevron-left{--sg-g:var(--sg-ic-chevron-left)}
html[data-skin="sg26"] body .sli-arrow-left{--sg-g:var(--sg-ic-chevron-left)}
html[data-skin="sg26"] body .mdi-chevron-right{--sg-g:var(--sg-ic-chevron-right)}
html[data-skin="sg26"] body .sli-arrow-right{--sg-g:var(--sg-ic-chevron-right)}
html[data-skin="sg26"] body .mdi-help-circle{--sg-g:var(--sg-ic-help-circle)}
html[data-skin="sg26"] body .mdi-help-circle-outline{--sg-g:var(--sg-ic-help-circle)}
html[data-skin="sg26"] body .sli-question{--sg-g:var(--sg-ic-help-circle)}
html[data-skin="sg26"] body .sli-refresh{--sg-g:var(--sg-ic-refresh)}
html[data-skin="sg26"] body .mdi-refresh{--sg-g:var(--sg-ic-refresh)}
html[data-skin="sg26"] body .mdi-reload{--sg-g:var(--sg-ic-refresh)}
html[data-skin="sg26"] body .sli-reload{--sg-g:var(--sg-ic-refresh)}
html[data-skin="sg26"] body .mdi-alert-circle{--sg-g:var(--sg-ic-alert-circle)}
html[data-skin="sg26"] body .mdi-alert-circle-outline{--sg-g:var(--sg-ic-alert-circle)}
html[data-skin="sg26"] body .mdi-information{--sg-g:var(--sg-ic-info)}
html[data-skin="sg26"] body .mdi-information-outline{--sg-g:var(--sg-ic-info)}
html[data-skin="sg26"] body .sli-info{--sg-g:var(--sg-ic-info)}
html[data-skin="sg26"] body .mdi-instagram{--sg-g:var(--sg-ic-instagram)}
html[data-skin="sg26"] body .sli-social-instagram{--sg-g:var(--sg-ic-instagram)}
html[data-skin="sg26"] body .mdi-check-circle{--sg-g:var(--sg-ic-check-circle)}
html[data-skin="sg26"] body .mdi-check-circle-outline{--sg-g:var(--sg-ic-check-circle)}
html[data-skin="sg26"] body .mdi-checkbox-marked-circle-outline{--sg-g:var(--sg-ic-check-circle)}
html[data-skin="sg26"] body .mdi-download{--sg-g:var(--sg-ic-download)}
html[data-skin="sg26"] body .sli-cloud-download{--sg-g:var(--sg-ic-download)}
html[data-skin="sg26"] body .mdi-arrow-down{--sg-g:var(--sg-ic-arrow-down)}
html[data-skin="sg26"] body .mdi-arrow-left{--sg-g:var(--sg-ic-arrow-left)}
html[data-skin="sg26"] body .sli-calendar{--sg-g:var(--sg-ic-calendar)}
html[data-skin="sg26"] body .mdi-calendar{--sg-g:var(--sg-ic-calendar)}
html[data-skin="sg26"] body .sli-plus{--sg-g:var(--sg-ic-plus)}
html[data-skin="sg26"] body .mdi-plus{--sg-g:var(--sg-ic-plus)}
html[data-skin="sg26"] body .mdi-plus-circle{--sg-g:var(--sg-ic-plus-circle)}
html[data-skin="sg26"] body .mdi-plus-circle-outline{--sg-g:var(--sg-ic-plus-circle)}
html[data-skin="sg26"] body .mdi-image{--sg-g:var(--sg-ic-image)}
html[data-skin="sg26"] body .sli-picture{--sg-g:var(--sg-ic-image)}
html[data-skin="sg26"] body .mdi-magnify{--sg-g:var(--sg-ic-search)}
html[data-skin="sg26"] body .sli-magnifier{--sg-g:var(--sg-ic-search)}
html[data-skin="sg26"] body .mdi-clock-outline{--sg-g:var(--sg-ic-clock)}
html[data-skin="sg26"] body .sli-clock{--sg-g:var(--sg-ic-clock)}
html[data-skin="sg26"] body .mdi-dots-vertical{--sg-g:var(--sg-ic-more-vertical)}
html[data-skin="sg26"] body .sli-options-vertical{--sg-g:var(--sg-ic-more-vertical)}
html[data-skin="sg26"] body .mdi-dots-horizontal{--sg-g:var(--sg-ic-more-horizontal)}
html[data-skin="sg26"] body .sli-options{--sg-g:var(--sg-ic-more-horizontal)}
html[data-skin="sg26"] body .sli-trash{--sg-g:var(--sg-ic-trash)}
html[data-skin="sg26"] body .mdi-delete{--sg-g:var(--sg-ic-trash)}
html[data-skin="sg26"] body .mdi-delete-outline{--sg-g:var(--sg-ic-trash)}
html[data-skin="sg26"] body .sli-pencil{--sg-g:var(--sg-ic-pencil)}
html[data-skin="sg26"] body .mdi-pencil{--sg-g:var(--sg-ic-pencil)}
html[data-skin="sg26"] body .mdi-pencil-outline{--sg-g:var(--sg-ic-pencil)}
html[data-skin="sg26"] body .sli-eye{--sg-g:var(--sg-ic-eye)}
html[data-skin="sg26"] body .mdi-eye{--sg-g:var(--sg-ic-eye)}
html[data-skin="sg26"] body .mdi-eye-outline{--sg-g:var(--sg-ic-eye)}
html[data-skin="sg26"] body .mdi-content-copy{--sg-g:var(--sg-ic-copy)}
html[data-skin="sg26"] body .mdi-chart-line{--sg-g:var(--sg-ic-chart-line)}
html[data-skin="sg26"] body .sli-chart{--sg-g:var(--sg-ic-chart-line)}
html[data-skin="sg26"] body .mdi-send{--sg-g:var(--sg-ic-send)}
html[data-skin="sg26"] body .sli-paper-plane{--sg-g:var(--sg-ic-send)}
html[data-skin="sg26"] body .mdi-menu{--sg-g:var(--sg-ic-menu)}
html[data-skin="sg26"] body .sli-menu{--sg-g:var(--sg-ic-menu)}
html[data-skin="sg26"] body .mdi-check::before,
html[data-skin="sg26"] body .sli-check::before,
html[data-skin="sg26"] body .mdi-close::before,
html[data-skin="sg26"] body .sli-close::before,
html[data-skin="sg26"] body .mdi-close-circle::before,
html[data-skin="sg26"] body .mdi-close-circle-outline::before,
html[data-skin="sg26"] body .mdi-chevron-down::before,
html[data-skin="sg26"] body .mdi-menu-down::before,
html[data-skin="sg26"] body .sli-arrow-down::before,
html[data-skin="sg26"] body .mdi-chevron-left::before,
html[data-skin="sg26"] body .sli-arrow-left::before,
html[data-skin="sg26"] body .mdi-chevron-right::before,
html[data-skin="sg26"] body .sli-arrow-right::before,
html[data-skin="sg26"] body .mdi-help-circle::before,
html[data-skin="sg26"] body .mdi-help-circle-outline::before,
html[data-skin="sg26"] body .sli-question::before,
html[data-skin="sg26"] body .sli-refresh::before,
html[data-skin="sg26"] body .mdi-refresh::before,
html[data-skin="sg26"] body .mdi-reload::before,
html[data-skin="sg26"] body .sli-reload::before,
html[data-skin="sg26"] body .mdi-alert-circle::before,
html[data-skin="sg26"] body .mdi-alert-circle-outline::before,
html[data-skin="sg26"] body .mdi-information::before,
html[data-skin="sg26"] body .mdi-information-outline::before,
html[data-skin="sg26"] body .sli-info::before,
html[data-skin="sg26"] body .mdi-instagram::before,
html[data-skin="sg26"] body .sli-social-instagram::before,
html[data-skin="sg26"] body .mdi-check-circle::before,
html[data-skin="sg26"] body .mdi-check-circle-outline::before,
html[data-skin="sg26"] body .mdi-checkbox-marked-circle-outline::before,
html[data-skin="sg26"] body .mdi-download::before,
html[data-skin="sg26"] body .sli-cloud-download::before,
html[data-skin="sg26"] body .mdi-arrow-down::before,
html[data-skin="sg26"] body .mdi-arrow-left::before,
html[data-skin="sg26"] body .sli-calendar::before,
html[data-skin="sg26"] body .mdi-calendar::before,
html[data-skin="sg26"] body .sli-plus::before,
html[data-skin="sg26"] body .mdi-plus::before,
html[data-skin="sg26"] body .mdi-plus-circle::before,
html[data-skin="sg26"] body .mdi-plus-circle-outline::before,
html[data-skin="sg26"] body .mdi-image::before,
html[data-skin="sg26"] body .sli-picture::before,
html[data-skin="sg26"] body .mdi-magnify::before,
html[data-skin="sg26"] body .sli-magnifier::before,
html[data-skin="sg26"] body .mdi-clock-outline::before,
html[data-skin="sg26"] body .sli-clock::before,
html[data-skin="sg26"] body .mdi-dots-vertical::before,
html[data-skin="sg26"] body .sli-options-vertical::before,
html[data-skin="sg26"] body .mdi-dots-horizontal::before,
html[data-skin="sg26"] body .sli-options::before,
html[data-skin="sg26"] body .sli-trash::before,
html[data-skin="sg26"] body .mdi-delete::before,
html[data-skin="sg26"] body .mdi-delete-outline::before,
html[data-skin="sg26"] body .sli-pencil::before,
html[data-skin="sg26"] body .mdi-pencil::before,
html[data-skin="sg26"] body .mdi-pencil-outline::before,
html[data-skin="sg26"] body .sli-eye::before,
html[data-skin="sg26"] body .mdi-eye::before,
html[data-skin="sg26"] body .mdi-eye-outline::before,
html[data-skin="sg26"] body .mdi-content-copy::before,
html[data-skin="sg26"] body .mdi-chart-line::before,
html[data-skin="sg26"] body .sli-chart::before,
html[data-skin="sg26"] body .mdi-send::before,
html[data-skin="sg26"] body .sli-paper-plane::before,
html[data-skin="sg26"] body .mdi-menu::before,
html[data-skin="sg26"] body .sli-menu::before{content:""!important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;background:currentColor;-webkit-mask:var(--sg-g) center/100% 100% no-repeat;mask:var(--sg-g) center/100% 100% no-repeat}
/* icons-generic:end */
/* pagebtn:begin (generated by gen-pagebtn.js from the boards; decision C; do not edit by hand) */
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/users/new"]{--sg-pb: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='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[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/packages/new"]{--sg-pb: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='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/services/new"]{--sg-pb: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='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/plugins/install"]{--sg-pb: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='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/captions/new"]{--sg-pb: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='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/new"]{--sg-pb: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='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/proxy-bulk"]{--sg-pb: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='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5M12 3v12'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/proxy-replace-bulk"]{--sg-pb: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='m17 3 4 4-4 4'/%3E%3Cpath d='M3 7h18'/%3E%3Cpath d='m7 21-4-4 4-4'/%3E%3Cpath d='M21 17H3'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/settings/proxy"]{--sg-pb: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%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/admin/resellers/new"]{--sg-pb: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='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/accounts/new"]{--sg-pb: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='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[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href*="/renew?acc=true"]{--sg-pb: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='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[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/subscribe"]{--sg-pb: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='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[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/renew"]{--sg-pb: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='m17 11-5-5-5 5M17 18l-5-5-5 5'/%3E%3C/svg%3E")}
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/users/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/packages/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/services/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/plugins/install"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/captions/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/proxy-bulk"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/proxies/proxy-replace-bulk"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/settings/proxy"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/admin/resellers/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/accounts/new"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href*="/renew?acc=true"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/subscribe"] .icon::before,
html[data-skin="sg26"] body #topbar:not(:has(.topbar-title-text)) a.topbar-special-link[href$="/renew"] .icon::before{content:""!important;display:block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--sg-pb) center/100% 100% no-repeat;mask:var(--sg-pb) center/100% 100% no-repeat}
/* pagebtn:end */
/* kit-port:begin (generated by port-kit.js from kit-v5.css; do not edit by hand) */
/* stylelint-disable no-duplicate-selectors -- the kit itself repeats a few selectors in later sections; kept verbatim */
html[data-skin="sg26"] .sg-root a{color:var(--brand-primary-text);text-decoration:none;transition:color .2s}html[data-skin="sg26"] .sg-root a:hover{color:var(--sg-soft)}
html[data-skin="sg26"] .sg-root h1,html[data-skin="sg26"] .sg-root h2,html[data-skin="sg26"] .sg-root h3,html[data-skin="sg26"] .sg-root h4,html[data-skin="sg26"] .sg-root p{margin:0}
html[data-skin="sg26"] .sg-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html[data-skin="sg26"] .sg-root .list{list-style:none;margin:0;padding:0}
html[data-skin="sg26"] .sg-root .display-xl{font:500 56px/60px var(--f);letter-spacing:-.04em;text-wrap:balance}
html[data-skin="sg26"] .sg-root .display{font:500 38px/44px var(--f);letter-spacing:-.03em;text-wrap:balance}
html[data-skin="sg26"] .sg-root .h1{font:500 28px/34px var(--f);letter-spacing:-.027em}
html[data-skin="sg26"] .sg-root .h2,html[data-skin="sg26"] .sg-root .sec-title{font:500 20px/26px var(--f);letter-spacing:-.018em}
html[data-skin="sg26"] .sg-root .h3,html[data-skin="sg26"] .sg-root .empty-title{font:500 17px/24px var(--f);letter-spacing:-.01em}
html[data-skin="sg26"] .sg-root .body-lg{font:400 16px/25px var(--f)}
html[data-skin="sg26"] .sg-root .body-sm{font:400 13px/20px var(--f)}
html[data-skin="sg26"] .sg-root .label{font:500 13px/18px var(--f)}
html[data-skin="sg26"] .sg-root .caption{font:400 12px/16px var(--f);letter-spacing:.01em}
html[data-skin="sg26"] .sg-root .kpi,html[data-skin="sg26"] .sg-root .kpi-sm,html[data-skin="sg26"] .sg-root .price,html[data-skin="sg26"] .sg-root .strike{font-family:var(--f);font-weight:500;color:var(--text)}
html[data-skin="sg26"] .sg-root .kpi{font-size:28px;line-height:34px;letter-spacing:-.03em}
html[data-skin="sg26"] .sg-root .kpi-sm{font-size:20px;line-height:26px;letter-spacing:-.025em}
html[data-skin="sg26"] .sg-root .price{font-size:32px;line-height:38px;letter-spacing:-.035em}
html[data-skin="sg26"] .sg-root .strike{font-size:15px;line-height:20px;color:var(--text-3);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:color-mix(in srgb,var(--status-danger-line) 85%,transparent)}
html[data-skin="sg26"] .sg-root .muted{color:var(--text-muted)}html[data-skin="sg26"] .sg-root .text-2{color:var(--text-2)}html[data-skin="sg26"] .sg-root .subtle{color:var(--text-3)}html[data-skin="sg26"] .sg-root .strong{color:var(--text)}
html[data-skin="sg26"] .sg-root .accent-text{color:var(--brand-primary-text)}html[data-skin="sg26"] .sg-root .soft-text{color:var(--sg-soft)}
html[data-skin="sg26"] .sg-root .gradient-text{background:var(--sg-grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-skin="sg26"] .sg-root .up{color:var(--status-success)}html[data-skin="sg26"] .sg-root .down{color:var(--status-danger)}
html[data-skin="sg26"] .sg-root .wordmark{font:700 17px/24px var(--f);letter-spacing:-.02em;color:var(--text);white-space:nowrap}
html[data-skin="sg26"] .sg-root .card{position:relative;border-radius:var(--r-lg);border:1px solid transparent;background:var(--card-bg) padding-box,var(--card-edge) border-box;box-shadow:var(--card-shadow)}
html[data-skin="sg26"] .sg-root .card-grad{position:relative;border-radius:var(--r-xl);border:1px solid transparent;background:var(--grad-card-bg) padding-box,linear-gradient(115deg,var(--sg-accent-2),var(--brand-primary) 22%,var(--grad-card-mid) 44%,var(--grad-card-mid) 60%,var(--brand-primary) 82%,var(--sg-accent-2)) border-box;box-shadow:var(--grad-card-shadow)}
html[data-skin="sg26"] .sg-root .card-alt,html[data-skin="sg26"] .sg-root .list-row{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-inset);box-shadow:inset 0 1px 0 var(--hi)}
html[data-skin="sg26"] .sg-root .list-row{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 16px;background:var(--row-bg)}
html[data-skin="sg26"] .sg-root .inset{border-radius:var(--r-inset);background:var(--fill-3);border:1px solid var(--inset-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-skin="sg26"] .sg-root .is-hl{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-primary) var(--hl-a1),transparent),color-mix(in srgb,var(--brand-primary) var(--hl-a2),transparent));border-color:color-mix(in srgb,var(--brand-primary-text) 55%,transparent)}
html[data-skin="sg26"] .sg-root .glow-card,html[data-skin="sg26"] .sg-root .ambient{position:relative;overflow:hidden}
html[data-skin="sg26"] .sg-root .glow-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl)}
html[data-skin="sg26"] .sg-root .glow-card::after,html[data-skin="sg26"] .sg-root .ambient::before{content:"";position:absolute;border-radius:50%;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);pointer-events:none}
html[data-skin="sg26"] .sg-root .glow-card::after{right:-100px;bottom:-140px;width:380px;height:280px}
html[data-skin="sg26"] .sg-root .ambient::before{left:50%;top:-440px;width:1200px;height:820px;margin-left:-600px}
html[data-skin="sg26"] .sg-root .glow-card>*,html[data-skin="sg26"] .sg-root .ambient>*{position:relative;z-index:1}
html[data-skin="sg26"] .sg-root .divider{height:1px;background:var(--border);border:0;margin:0}
html[data-skin="sg26"] .sg-root .btn,html[data-skin="sg26"] .sg-root .badge,html[data-skin="sg26"] .sg-root .status,html[data-skin="sg26"] .sg-root .tag,html[data-skin="sg26"] .sg-root .off-badge,html[data-skin="sg26"] .sg-root .save,html[data-skin="sg26"] .sg-root .eyebrow,html[data-skin="sg26"] .sg-root .chip,html[data-skin="sg26"] .sg-root .tab,html[data-skin="sg26"] .sg-root .seg-btn{display:inline-flex;align-items:center;border-radius:var(--r-full);white-space:nowrap;box-sizing:border-box;border:1px solid transparent}
html[data-skin="sg26"] .sg-root .btn{justify-content:center;gap:8px;height:40px;padding:0 18px;background:transparent;color:var(--text);font:500 14px/20px var(--f);cursor:pointer;text-decoration:none;transition:var(--tr)}
html[data-skin="sg26"] .sg-root .btn svg{flex-shrink:0;width:16px;height:16px}
html[data-skin="sg26"] .sg-root .btn .go{transition:transform .2s var(--ease)}html[data-skin="sg26"] .sg-root .btn:hover .go{transform:translateX(3px)}
html[data-skin="sg26"] .sg-root .btn-sm{height:32px;padding:0 14px;font-size:13px;line-height:18px}
html[data-skin="sg26"] .sg-root .btn-lg{height:44px;padding:0 22px;font-size:15px}
html[data-skin="sg26"] .sg-root .btn-icon{width:40px;padding:0}html[data-skin="sg26"] .sg-root .btn-sm.btn-icon{width:32px}html[data-skin="sg26"] .sg-root .btn-lg.btn-icon{width:44px}
html[data-skin="sg26"] .sg-root .btn-block{width:100%}
html[data-skin="sg26"] .sg-root .btn-primary,html[data-skin="sg26"] .sg-root .fab{background:var(--brand-primary);color:var(--brand-on-primary);box-shadow:var(--sg-glow-rest)}
html[data-skin="sg26"] .sg-root .btn-primary:hover,html[data-skin="sg26"] .sg-root .fab:hover{color:var(--brand-on-primary);transform:translateY(-1px);box-shadow:var(--sg-glow-hover)}
html[data-skin="sg26"] .sg-root .btn-secondary,html[data-skin="sg26"] .sg-root .btn-light{background:var(--btn2-bg);color:var(--btn2-fg);box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
html[data-skin="sg26"] .sg-root .btn-secondary:hover,html[data-skin="sg26"] .sg-root .btn-light:hover{background:var(--btn2-bg-hover);color:var(--btn2-fg);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)}
html[data-skin="sg26"] .sg-root .btn-tonal{background:var(--tonal-bg);border-color:var(--border-2);box-shadow:inset 0 1px 0 var(--hi)}
html[data-skin="sg26"] .sg-root .btn-tonal:hover{color:var(--text-max);border-color:var(--border-hover)}
html[data-skin="sg26"] .sg-root .btn-outline{background:color-mix(in srgb,var(--brand-primary) 10%,transparent);color:var(--outline-fg);border-color:var(--outline-border)}
html[data-skin="sg26"] .sg-root .btn-outline:hover{color:var(--outline-fg);background:color-mix(in srgb,var(--brand-primary) 20%,transparent)}
html[data-skin="sg26"] .sg-root .btn-ghost{color:var(--text-2)}html[data-skin="sg26"] .sg-root .btn-ghost:hover{background:var(--hover-fill);color:var(--text-max)}
html[data-skin="sg26"] .sg-root .btn-danger:hover{background:rgba(var(--t),.22);color:var(--danger-hover-fg)}
html[data-skin="sg26"] .sg-root .btn:active{transform:none}
html[data-skin="sg26"] .sg-root .btn:disabled,html[data-skin="sg26"] .sg-root .btn[aria-disabled="true"],html[data-skin="sg26"] .sg-root .input:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
html[data-skin="sg26"] .sg-root .link{display:inline-flex;align-items:center;gap:6px;color:var(--sg-soft);font:500 14px/21px var(--f);text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--sg-soft) 50%,transparent)}
html[data-skin="sg26"] .sg-root .link:hover{color:var(--text-max);text-decoration-color:color-mix(in srgb,var(--sg-accent-2) 80%,transparent)}
html[data-skin="sg26"] .sg-root .fab{position:absolute;right:28px;bottom:28px;z-index:30;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;transition:var(--tr)}
html[data-skin="sg26"] .sg-root .fab.above-bar{bottom:124px}
html[data-skin="sg26"] .sg-root .fab svg{width:22px;height:22px}
html[data-skin="sg26"] .sg-root :where(.btn,.link,.fab,.nav,.chip,.tab,.seg-btn,.switch,.check,.radio,.input,.topbar-user,.tb-link):focus-visible{outline:2px solid var(--brand-focus-ring);outline-offset:2px}
html[data-skin="sg26"] .sg-root .badge,html[data-skin="sg26"] .sg-root .alert,html[data-skin="sg26"] .sg-root .toast{--t:var(--t-neutral);--tc:var(--text-2)}
html[data-skin="sg26"] .sg-root .b-success,html[data-skin="sg26"] .sg-root .status,html[data-skin="sg26"] .sg-root .is-success{--t:var(--t-success);--tc:var(--status-success)}
html[data-skin="sg26"] .sg-root .b-danger,html[data-skin="sg26"] .sg-root .status-off,html[data-skin="sg26"] .sg-root .btn-danger,html[data-skin="sg26"] .sg-root .is-danger{--t:var(--t-danger);--tc:var(--status-danger)}
html[data-skin="sg26"] .sg-root .b-warning,html[data-skin="sg26"] .sg-root .status-warn,html[data-skin="sg26"] .sg-root .is-warning{--t:var(--t-warning);--tc:var(--status-warning)}
html[data-skin="sg26"] .sg-root .b-info,html[data-skin="sg26"] .sg-root .status-info,html[data-skin="sg26"] .sg-root .is-info{--t:var(--t-info);--tc:var(--status-info)}
html[data-skin="sg26"] .sg-root .status-idle,html[data-skin="sg26"] .sg-root .is-neutral{--t:var(--t-neutral);--tc:var(--text-2)}
html[data-skin="sg26"] .sg-root .badge,html[data-skin="sg26"] .sg-root .status,html[data-skin="sg26"] .sg-root .btn-danger{background:rgba(var(--t),.1);border-color:rgba(var(--t),.3);color:var(--tc)}
html[data-skin="sg26"] .sg-root .badge,html[data-skin="sg26"] .sg-root .status{gap:5px;height:22px;padding:0 9px;font:500 12px/16px var(--f)}
html[data-skin="sg26"] .sg-root .badge svg{width:12px;height:12px;flex-shrink:0}
html[data-skin="sg26"] .sg-root .b-neutral{color:var(--text)}
html[data-skin="sg26"] .sg-root .b-accent,html[data-skin="sg26"] .sg-root .off-badge,html[data-skin="sg26"] .sg-root .eyebrow-tag,html[data-skin="sg26"] .sg-root .avatar,html[data-skin="sg26"] .sg-root .bell-badge{background:var(--sg-gradient-fill);border-color:transparent;color:var(--brand-on-primary);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sg-accent-2) 50%,transparent)}
html[data-skin="sg26"] .sg-root .tag{gap:6px;height:24px;padding:0 10px;background:color-mix(in srgb,var(--brand-primary) 14%,transparent);border-color:color-mix(in srgb,var(--brand-primary-text) 30%,transparent);color:var(--sg-soft);font:500 12px/16px var(--f)}
html[data-skin="sg26"] .sg-root .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
html[data-skin="sg26"] .sg-root .live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex-shrink:0;animation:sg-beat 2.2s ease-in-out infinite}
html[data-skin="sg26"] .sg-root .live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;animation:sg-ring 2.2s ease-out infinite}
html[data-skin="sg26"] .sg-root .live.once,html[data-skin="sg26"] .sg-root .live.once::after{animation-iteration-count:2}
html[data-skin="sg26"] .sg-root .status .live{width:6px;height:6px}
html[data-skin="sg26"] .sg-root .off-badge{position:relative;overflow:hidden;height:24px;padding:0 9px;font:700 13px/16px var(--f);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sg-accent-2) 50%,transparent),0 8px 22px -8px color-mix(in srgb,var(--brand-primary) 75%,transparent)}
html[data-skin="sg26"] .sg-root .off-badge::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);transform:skewX(-18deg);animation:sg-sheen 4s cubic-bezier(.4,0,.2,1) 1s infinite;pointer-events:none}
html[data-skin="sg26"] .sg-root .save{gap:6px;height:30px;padding:0 12px;background:color-mix(in srgb,var(--sg-accent-2) 10%,transparent);border-color:color-mix(in srgb,var(--sg-accent-2) 32%,transparent);color:var(--sg-save);font:500 14px/20px var(--f)}
html[data-skin="sg26"] .sg-root .save b{font-weight:700;color:var(--text-max)}html[data-skin="sg26"] .sg-root .save svg{color:var(--sg-ink-2)}
html[data-skin="sg26"] .sg-root .eyebrow{gap:8px;height:28px;padding:0 12px;border-color:var(--border-2);background:var(--fill-3);box-shadow:inset 0 1px 0 var(--hi);font:500 13px/18px var(--f);color:var(--text)}
html[data-skin="sg26"] .sg-root .eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--sg-gradient);box-shadow:0 0 10px color-mix(in srgb,var(--sg-accent-2) 80%,transparent);flex-shrink:0}
html[data-skin="sg26"] .sg-root .eyebrow-tag{padding:2px 8px;border-radius:var(--r-full);font:500 12px/16px var(--f)}
html[data-skin="sg26"] .sg-root .yes,html[data-skin="sg26"] .sg-root .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0}
html[data-skin="sg26"] .sg-root .yes{background:color-mix(in srgb,var(--sg-accent-2) 14%,transparent);color:var(--sg-ink-2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sg-accent-2) 28%,transparent)}
html[data-skin="sg26"] .sg-root .no{background:rgba(var(--t-danger),.14);color:var(--status-danger-line);box-shadow:inset 0 0 0 1px rgba(var(--t-danger),.26)}
html[data-skin="sg26"] .sg-root .yes svg,html[data-skin="sg26"] .sg-root .no svg{width:13px;height:13px}
html[data-skin="sg26"] .sg-root .point{display:flex;align-items:flex-start;gap:10px;font:400 14px/22px var(--f);color:var(--text)}
html[data-skin="sg26"] .sg-root .point>.yes,html[data-skin="sg26"] .sg-root .point>.no{width:20px;height:20px;margin-top:1px}html[data-skin="sg26"] .sg-root .point svg{width:11px;height:11px}
html[data-skin="sg26"] .sg-root .chip,html[data-skin="sg26"] .sg-root .tab,html[data-skin="sg26"] .sg-root .seg-btn{gap:6px;font:500 13px/18px var(--f);color:var(--text-2);cursor:pointer;transition:var(--tr)}
html[data-skin="sg26"] .sg-root .chip{height:30px;padding:0 12px;border-color:var(--border-2);background:var(--fill-3)}
html[data-skin="sg26"] .sg-root .chip svg{width:14px;height:14px}
html[data-skin="sg26"] .sg-root .chip:hover,html[data-skin="sg26"] .sg-root .seg-btn:hover{color:var(--text-max);border-color:color-mix(in srgb,var(--sg-accent-2) 40%,transparent)}
html[data-skin="sg26"] .sg-root .chip.is-on{background:var(--brand-primary-subtle);border-color:color-mix(in srgb,var(--sg-accent-2) 38%,transparent);color:var(--sg-soft)}
html[data-skin="sg26"] .sg-root .tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-full);background:var(--fill-2);border:1px solid var(--border);box-shadow:inset 0 1px 0 var(--hi)}
html[data-skin="sg26"] .sg-root .tab{height:30px;padding:0 14px;border:0;background:transparent;text-decoration:none}
html[data-skin="sg26"] .sg-root .tab:hover{color:var(--text-max);background:var(--hover-fill)}
html[data-skin="sg26"] .sg-root .tab.is-on{background:var(--surface-raised);color:var(--text-max);box-shadow:inset 0 1px 0 var(--border),var(--shadow-sm)}
html[data-skin="sg26"] .sg-root .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
html[data-skin="sg26"] .sg-root .seg-btn{position:relative;justify-content:center;height:36px;padding:0 10px;border-color:var(--border-2);background:var(--fill-2);font:700 14px/20px var(--f)}
html[data-skin="sg26"] .sg-root .seg-btn.is-on{background:var(--brand-primary-subtle);border-color:var(--brand-primary-text);color:var(--text-max);box-shadow:inset 0 1px 0 var(--border),0 0 0 1px color-mix(in srgb,var(--sg-accent-2) 30%,transparent),0 10px 30px -12px color-mix(in srgb,var(--brand-primary) 80%,transparent)}
html[data-skin="sg26"] .sg-root .seg-badge{position:absolute;left:50%;top:-11px;transform:translateX(-50%);height:18px;padding:0 7px;border-radius:var(--r-full);background:var(--sg-fill-2);border:1px solid color-mix(in srgb,var(--sg-accent-2) 40%,transparent);color:var(--brand-on-primary);font:700 12px/18px var(--f)}
html[data-skin="sg26"] .sg-root .seg-btn.is-on .seg-badge{background:var(--sg-gradient-fill);border-color:color-mix(in srgb,var(--sg-accent-2) 65%,transparent)}
html[data-skin="sg26"] .sg-root .field{display:flex;flex-direction:column;gap:6px}
html[data-skin="sg26"] .sg-root .field label,html[data-skin="sg26"] .sg-root .field-label{font:500 13px/18px var(--f);color:var(--text)}
html[data-skin="sg26"] .sg-root .input{display:block;height:40px;box-sizing:border-box;width:100%;padding:0 12px;background:var(--input-bg);border:1px solid var(--border-strong);border-radius:var(--r-md);color:var(--text);font:400 14px/22px var(--f);transition:border-color .2s}
html[data-skin="sg26"] .sg-root .input::placeholder{color:var(--text-3)}
html[data-skin="sg26"] .sg-root .input:hover{border-color:var(--border-strong-hover)}html[data-skin="sg26"] .sg-root .input:focus{border-color:var(--brand-primary-border)}
html[data-skin="sg26"] .sg-root .input.is-error{border-color:var(--status-danger-line)}
html[data-skin="sg26"] .sg-root textarea.input{height:auto;min-height:96px;padding:9px 12px;resize:vertical}
html[data-skin="sg26"] .sg-root .hint{font:400 12px/16px var(--f);color:var(--text-3)}
html[data-skin="sg26"] .sg-root .hint.is-error{color:var(--status-danger)}
html[data-skin="sg26"] .sg-root .switch{position:relative;display:inline-block;width:42px;height:26px;flex-shrink:0;padding:0;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--switch-off);cursor:pointer;box-sizing:border-box;transition:var(--tr)}
html[data-skin="sg26"] .sg-root .switch::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"] .sg-root .switch.is-on,html[data-skin="sg26"] .sg-root .check.is-on{background:var(--brand-primary);border-color:var(--brand-primary-border);color:var(--brand-on-primary)}
html[data-skin="sg26"] .sg-root .switch.is-on::after{transform:translateX(16px);background:#fff}
html[data-skin="sg26"] .sg-root .check,html[data-skin="sg26"] .sg-root .radio{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-sm);border:1.5px solid var(--border-strong);color:transparent;flex-shrink:0;box-sizing:border-box;cursor:pointer}
html[data-skin="sg26"] .sg-root .check svg{width:12px;height:12px}
html[data-skin="sg26"] .sg-root .radio{border-radius:50%}html[data-skin="sg26"] .sg-root .radio.is-on{border:5px solid var(--brand-primary);background:#fff}
html[data-skin="sg26"] .sg-root .theme-toggle>svg{width:24px;height:24px}
html[data-skin="sg26"] .sg-root .bell-badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);box-sizing:border-box;font:700 12px/18px var(--f);text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}
html[data-skin="sg26"] .sg-root .theme-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--text-3);cursor:pointer}
html[data-skin="sg26"] .sg-root .theme-toggle>svg{flex-shrink:0}
html[data-skin="sg26"] .sg-root .theme-toggle:hover{color:var(--text-max)}
html[data-skin="sg26"] .sg-root .menu{position:absolute;z-index:40;min-width:200px;padding:6px;border-radius:var(--r-menu);background:var(--surface-raised);border:1px solid var(--menu-line);box-shadow:0 24px 60px -20px var(--shadow-c)}
html[data-skin="sg26"] .sg-root .icon-tile{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-md);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));color:var(--sg-soft);box-shadow:inset 0 1px 0 var(--border);flex-shrink:0}
html[data-skin="sg26"] .sg-root .icon-tile[class*="is-"],html[data-skin="sg26"] .sg-root .t-ico{background:rgba(var(--t),.14);color:var(--tc)}
html[data-skin="sg26"] .sg-root .icon-tile svg{width:18px;height:18px}
html[data-skin="sg26"] .sg-root .icon-tile.sm{width:28px;height:28px;border-radius:8px}html[data-skin="sg26"] .sg-root .icon-tile.sm svg{width:15px;height:15px}
html[data-skin="sg26"] .sg-root .icon-tile.lg{width:44px;height:44px;border-radius:13px}html[data-skin="sg26"] .sg-root .icon-tile.lg svg{width:22px;height:22px}
html[data-skin="sg26"] .sg-root .avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:700 13px/1 var(--f);letter-spacing:.02em;flex-shrink:0}
html[data-skin="sg26"] .sg-root .avatar.sm{width:28px;height:28px;font-size:12px}html[data-skin="sg26"] .sg-root .avatar.lg{width:48px;height:48px;font-size:16px}
html[data-skin="sg26"] .sg-root .table{width:100%;border-collapse:separate;border-spacing:0}
html[data-skin="sg26"] .sg-root .table th{text-align:left;padding:10px 16px;background:var(--fill-2);border-bottom:1px solid var(--border);font:500 12px/16px var(--f);letter-spacing:.02em;color:var(--text-3);white-space:nowrap}
html[data-skin="sg26"] .sg-root .table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
html[data-skin="sg26"] .sg-root .table tbody tr:last-child td{border-bottom:0}
html[data-skin="sg26"] .sg-root .table tbody tr:hover td{background:var(--fill-1)}
html[data-skin="sg26"] .sg-root .table tr.is-selected td{background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}
html[data-skin="sg26"] .sg-root .table .num{text-align:right}
html[data-skin="sg26"] .sg-root .r-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
html[data-skin="sg26"] .sg-root .progress{height:6px;border-radius:var(--r-full);background:var(--border);overflow:hidden}
html[data-skin="sg26"] .sg-root .progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-primary),var(--sg-accent-2))}
html[data-skin="sg26"] .sg-root .progress.is-warn>span{background:var(--status-warning)}html[data-skin="sg26"] .sg-root .progress.is-full>span{background:var(--status-danger-line)}
html[data-skin="sg26"] .sg-root .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
html[data-skin="sg26"] .sg-root .sec-head>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
html[data-skin="sg26"] .sg-root .sec-desc,html[data-skin="sg26"] .sg-root .empty-text{font:400 14px/21px var(--f);color:var(--text-2)}
html[data-skin="sg26"] .sg-root .empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;text-align:center;border-radius:var(--r-lg);border:1px dashed var(--border-dash);background:var(--fill-1)}
html[data-skin="sg26"] .sg-root .empty-text{max-width:420px}
html[data-skin="sg26"] .sg-root .alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-inset);border:1px solid rgba(var(--t),.28);background:rgba(var(--t),.06);font:400 14px/21px var(--f);color:var(--text)}
html[data-skin="sg26"] .sg-root .alert>svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--tc)}
html[data-skin="sg26"] .sg-root .scrim{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:var(--scrim)}
html[data-skin="sg26"] .sg-root .modal{width:480px;max-width:calc(100% - 48px);box-sizing:border-box;border-radius:var(--r-xl);border:1px solid var(--border-2);background:var(--modal-bg);box-shadow:inset 0 1px 0 var(--border),var(--shadow-lg);animation:sg-pop .28s var(--ease) both}
html[data-skin="sg26"] .sg-root .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 0}
html[data-skin="sg26"] .sg-root .modal-body{padding:16px 24px}
html[data-skin="sg26"] .sg-root .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:8px 24px 22px}
html[data-skin="sg26"] .sg-root .sheet{position:absolute;top:0;right:0;bottom:0;z-index:50;width:420px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border-2);animation:sg-slide .35s var(--ease) both}
html[data-skin="sg26"] .sg-root .toast{display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:var(--r-inset);background:var(--surface-raised);border:1px solid var(--border-2);box-shadow:0 20px 50px -20px var(--shadow-c);font:500 14px/20px var(--f);color:var(--text);animation:sg-rise .4s var(--ease) both}
html[data-skin="sg26"] .sg-root .t-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0}html[data-skin="sg26"] .sg-root .t-ico svg{width:14px;height:14px}
html[data-skin="sg26"] .sg-root .mono,html[data-skin="sg26"] .sg-root .num,html[data-skin="sg26"] .sg-root .badge,html[data-skin="sg26"] .sg-root .status,html[data-skin="sg26"] .sg-root .tag,html[data-skin="sg26"] .sg-root .off-badge,html[data-skin="sg26"] .sg-root .save,html[data-skin="sg26"] .sg-root .seg-badge,html[data-skin="sg26"] .sg-root .table th{font-variant-numeric:tabular-nums}
html[data-skin="sg26"] .sg-root .auth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-skin="sg26"] .sg-root .auth-brand{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:64px;background:var(--surface)}
html[data-skin="sg26"] .sg-root .auth-form{display:grid;place-items:center;padding:48px 24px;background:var(--bg)}
html[data-skin="sg26"] .sg-root .auth-form>.card{width:100%;max-width:420px;padding:32px;box-sizing:border-box}
html[data-skin="sg26"] .sg-root .page-col{width:100%;max-width:1040px;margin:0 auto;padding:var(--pad-page);box-sizing:border-box}
html[data-skin="sg26"] .sg-root{container:sg/inline-size}
@media (max-width:1023.98px){
html[data-skin="sg26"] .sg-root>*{--pad-page:24px;--gap-block:20px;--pad-card:20px}}
@media (max-width:767.98px){
html[data-skin="sg26"] .sg-root>*{--pad-page:16px;--gap-block:16px;--pad-card:16px}
html[data-skin="sg26"] .sg-root .sec-head{flex-direction:column;align-items:stretch;gap:12px}
html[data-skin="sg26"] .sg-root .sec-head>div+div{display:flex;flex-wrap:wrap;gap:8px}
html[data-skin="sg26"] .sg-root .display-xl{font-size:34px;line-height:38px}html[data-skin="sg26"] .sg-root .display{font-size:28px;line-height:34px}html[data-skin="sg26"] .sg-root .h1{font-size:24px;line-height:30px}html[data-skin="sg26"] .sg-root .kpi{font-size:24px;line-height:30px}
html[data-skin="sg26"] .sg-root .btn{height:44px}html[data-skin="sg26"] .sg-root .btn-sm{height:40px}html[data-skin="sg26"] .sg-root .btn-icon{width:44px}html[data-skin="sg26"] .sg-root .btn-sm.btn-icon{width:40px}
html[data-skin="sg26"] .sg-root .input{height:44px;font-size:16px}html[data-skin="sg26"] .sg-root textarea.input{font-size:16px}
html[data-skin="sg26"] .sg-root .list-row{min-height:56px}
html[data-skin="sg26"] .sg-root .chip,html[data-skin="sg26"] .sg-root .tab{height:36px}html[data-skin="sg26"] .sg-root .seg-btn{height:44px}html[data-skin="sg26"] .sg-root .tabs{max-width:100%;overflow-x:auto;box-sizing:border-box}
html[data-skin="sg26"] .sg-root :where(.btn-sm,.chip,.tab,.switch,.check,.radio,.link){position:relative}
html[data-skin="sg26"] .sg-root :where(.btn-sm,.chip,.tab,.switch,.check,.radio,.link)::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
html[data-skin="sg26"] .sg-root .g-stack{grid-template-columns:minmax(0,1fr)!important}
html[data-skin="sg26"] .sg-root .g-2up{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html[data-skin="sg26"] .sg-root .g-stack>*,html[data-skin="sg26"] .sg-root .g-2up>*{grid-column:auto!important}
html[data-skin="sg26"] .sg-root .r-row{flex-direction:column!important;align-items:stretch!important}
html[data-skin="sg26"] .sg-root .r-row>*{flex-basis:auto!important;width:auto!important;max-width:100%!important}
html[data-skin="sg26"] .sg-root .r-wrap{flex-wrap:wrap!important}
html[data-skin="sg26"] .sg-root .r-scroll>.table{min-width:640px}
html[data-skin="sg26"] .sg-root .table.is-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[data-skin="sg26"] .sg-root .table.is-stack,html[data-skin="sg26"] .sg-root .table.is-stack tbody,html[data-skin="sg26"] .sg-root .table.is-stack tr,html[data-skin="sg26"] .sg-root .table.is-stack td{display:block}
html[data-skin="sg26"] .sg-root .table.is-stack tr{padding:12px 16px;border-bottom:1px solid var(--border)}
html[data-skin="sg26"] .sg-root .table.is-stack tbody tr:last-child{border-bottom:0}
html[data-skin="sg26"] .sg-root .table.is-stack td{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px;padding:4px 0;border:0;text-align:right}
html[data-skin="sg26"] .sg-root .table.is-stack td::before{content:attr(data-label);flex-shrink:0;font:500 12px/16px var(--f);letter-spacing:.02em;color:var(--text-3);text-align:left}
html[data-skin="sg26"] .sg-root .table.is-stack td:not([data-label]){display:block;text-align:left}
html[data-skin="sg26"] .sg-root .table.is-stack td:not([data-label])::before{content:none}
html[data-skin="sg26"] .sg-root .table.is-stack tbody tr:hover td,html[data-skin="sg26"] .sg-root .table.is-stack tr.is-selected td{background:transparent}
html[data-skin="sg26"] .sg-root .table.is-stack tr.is-selected{background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}
html[data-skin="sg26"] .sg-root .scrim{place-items:end stretch;padding:0 var(--pad-page) calc(var(--pad-page) + env(safe-area-inset-bottom,0px));box-sizing:border-box}
html[data-skin="sg26"] .sg-root .modal{width:100%;max-width:none;border-radius:var(--r-xl);animation:sg-up .32s var(--ease) both}
html[data-skin="sg26"] .sg-root .modal::before{content:"";display:block;width:36px;height:5px;margin:8px auto 0;border-radius:3px;background:var(--border-2)}
html[data-skin="sg26"] .sg-root .modal-head{padding:12px 16px 0}html[data-skin="sg26"] .sg-root .modal-body{padding:12px 16px}
html[data-skin="sg26"] .sg-root .modal-foot{flex-direction:column-reverse;padding:8px 16px 16px}
html[data-skin="sg26"] .sg-root .modal-foot .btn{width:100%}
html[data-skin="sg26"] .sg-root .sheet{top:auto;left:0;width:auto;max-height:92%;border-left:0;border-top:1px solid var(--border-2);border-radius:var(--r-xl) var(--r-xl) 0 0;animation:sg-up .35s var(--ease) both}
html[data-skin="sg26"] .sg-root .fab{right:16px;bottom:16px}html[data-skin="sg26"] .sg-root .fab.above-bar{bottom:96px}
html[data-skin="sg26"] .sg-root .auth{grid-template-columns:minmax(0,1fr)}
html[data-skin="sg26"] .sg-root .auth-brand{padding:32px 16px 24px;gap:16px}
html[data-skin="sg26"] .sg-root .auth-brand .display-xl,html[data-skin="sg26"] .sg-root .auth-brand .display{font-size:30px;line-height:36px}
html[data-skin="sg26"] .sg-root .auth-form{padding:8px 16px 32px}html[data-skin="sg26"] .sg-root .auth-form>.card{padding:24px 20px}}
@media (max-width:479.98px){
html[data-skin="sg26"] .sg-root .seg{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}}
html[data-skin="sg26"] .sg-root .rise{animation:sg-rise .6s var(--ease) both}
@keyframes sg-rise{from{transform:translateY(12px)}to{transform:none}}
@keyframes sg-pop{from{transform:scale(.96)}to{transform:none}}
@keyframes sg-slide{from{transform:translateX(24px)}to{transform:none}}
@keyframes sg-up{from{transform:translateY(24px)}to{transform:none}}
@keyframes sg-beat{0%,20%,46%,100%{transform:scale(1)}10%{transform:scale(1.32)}30%{transform:scale(1.2)}}
@keyframes sg-ring{0%{transform:scale(1);opacity:.5}46%,100%{transform:scale(2.6);opacity:0}}
@keyframes sg-sheen{0%,60%{transform:translateX(0) skewX(-18deg)}85%,100%{transform:translateX(360%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){html[data-skin="sg26"] .sg-root *,html[data-skin="sg26"] .sg-root *::before,html[data-skin="sg26"] .sg-root *::after{animation:none!important;transition:none!important}html[data-skin="sg26"] .sg-root .live::after{display:none}}
html[data-skin="sg26"] .sg-root>*{--gap-topbar:29px}
@media (max-width:992px){html[data-skin="sg26"] .sg-root>*{--gap-topbar:18px}}
@media (min-width:768px) and (max-width:1023.98px){
html[data-skin="sg26"] .sg-root img.sidebar-mark{width:auto;max-width:100%;object-fit:contain}}
@media (max-width:1279.98px){html[data-skin="sg26"] .sg-root .tabs{max-width:100%;overflow-x:auto;box-sizing:border-box}}
html[data-skin="sg26"] .sg-root :where(.badge,.status):not(.b-accent){background:color-mix(in srgb,rgb(var(--t)) 10%,var(--chip-under))}
html[data-skin="sg26"] .sg-root .tag{background:color-mix(in srgb,var(--brand-primary) 14%,var(--chip-under))}
html[data-skin="sg26"] .sg-root:has(.fab) :is(.content,.page-col){padding-bottom:calc(var(--pad-page) + 68px)}
html[data-skin="sg26"] .sg-root .r-scroll{position:relative}
@media (max-width:767.98px){
html[data-skin="sg26"] .sg-root .table.is-stack{position:relative}
html[data-skin="sg26"] .sg-root .table.is-stack thead{display:block;padding:0;margin:-1px;border:0;white-space:nowrap}}
@media (min-width:768px) and (max-width:1279.98px){
html[data-skin="sg26"] .sg-root .t-stack{grid-template-columns:minmax(0,1fr)!important}
html[data-skin="sg26"] .sg-root .t-2up{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html[data-skin="sg26"] .sg-root .t-3up{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html[data-skin="sg26"] .sg-root .t-stack>*,html[data-skin="sg26"] .sg-root .t-2up>*,html[data-skin="sg26"] .sg-root .t-3up>*{grid-column:auto!important}}
@media (max-width:1023.98px){
html[data-skin="sg26"] .sg-root .split{grid-template-columns:minmax(0,1fr)!important;flex-direction:column!important;align-items:stretch!important}
html[data-skin="sg26"] .sg-root .split>*{grid-column:auto!important;flex-basis:auto!important;width:auto!important;max-width:100%!important}}
html[data-skin="sg26"] .sg-root .menu-item{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;box-sizing:border-box;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-2);font:500 14px/20px var(--f);text-align:left;cursor:pointer;text-decoration:none;transition:var(--tr)}
html[data-skin="sg26"] .sg-root .menu-item:hover{background:var(--hover-fill);color:var(--text-max)}
html[data-skin="sg26"] .sg-root .menu-item:focus-visible{outline:2px solid var(--brand-focus-ring);outline-offset:2px}
html[data-skin="sg26"] .sg-root .menu-item svg{width:18px;height:18px;flex-shrink:0;color:var(--text-3)}
html[data-skin="sg26"] .sg-root .menu-item[aria-current="page"]{background:var(--brand-primary-subtle);color:var(--sg-soft);box-shadow:inset 3px 0 0 currentColor}
@media (max-width:767.98px){html[data-skin="sg26"] .sg-root .menu-item{height:44px}}
html[data-skin="sg26"] .sg-root :where(.kpi-row){--kpi-grid:repeat(auto-fill,minmax(min(100%,max(var(--kpi-min,0px),calc(100% / (var(--kpi-cols,1) + 1) + .1px))),1fr));grid-template-columns:var(--kpi-grid)!important}
@media (max-width:767.98px){html[data-skin="sg26"] .sg-root .g-2up.kpi-row{--kpi-cols:2!important;grid-template-columns:var(--kpi-grid)!important}}
@media (min-width:768px) and (max-width:1279.98px){html[data-skin="sg26"] .sg-root .t-2up.kpi-row{--kpi-cols:2!important;grid-template-columns:var(--kpi-grid)!important}html[data-skin="sg26"] .sg-root .t-3up.kpi-row{--kpi-cols:3!important;grid-template-columns:var(--kpi-grid)!important}}

/* kit-port:end */