/**
 * Famylio global day/night palette
 * Shared final layer for public site, app, backoffice, resellers, Ylio Touch
 * and Ylio Satellite.
 */

:root {
  --fam-night-canvas: #03111F;
  --fam-night-canvas-soft: #041A2D;
  --fam-night-surface: #08243A;
  --fam-night-surface-strong: #0B3151;
  --fam-night-surface-soft: rgba(8, 36, 58, .82);
  --fam-night-text: #E8EEF4;
  --fam-night-text-soft: #C8D6E4;
  --fam-night-muted: #9FB2C5;
  --fam-night-faint: #7890A8;
  --fam-night-border: rgba(138, 200, 247, .16);
  --fam-night-border-strong: rgba(0, 97, 170, .48);
  --fam-night-accent: #0061AA;
  --fam-night-accent-soft: #8AC8F7;
  --fam-night-accent-deep: #003B68;
  --fam-night-shadow: 0 24px 70px rgba(0, 0, 0, .48);
  --fam-night-shadow-soft: 0 16px 44px rgba(0, 0, 0, .34);
}

html.dark,
html.dark-mode,
[data-theme="dark"],
html[data-touch-theme="night"],
body.dark-mode {
  color-scheme: dark;

  --bg: var(--fam-night-canvas);
  --bg2: var(--fam-night-canvas-soft);
  --warm-bg: var(--fam-night-canvas);
  --warm-cream: var(--fam-night-surface);
  --warm-sand: var(--fam-night-surface-strong);
  --white: var(--fam-night-surface);
  --cream: var(--fam-night-surface-strong);
  --paper: var(--fam-night-surface);
  --porcelain: var(--fam-night-surface);
  --card-bg: var(--fam-night-surface);
  --dark-card: var(--fam-night-surface);
  --input-bg: rgba(3, 17, 31, .72);
  --input-border: var(--fam-night-border);
  --cloud: var(--fam-night-border);
  --line: var(--fam-night-border);
  --border: var(--fam-night-border);
  --border-subtle: var(--fam-night-border);
  --card-border: var(--fam-night-border);

  --navy: var(--fam-night-text);
  --navy-soft: var(--fam-night-text-soft);
  --ink: var(--fam-night-text);
  --text: var(--fam-night-text);
  --text-primary: var(--fam-night-text);
  --text-secondary: var(--fam-night-muted);
  --text-muted: var(--fam-night-muted);
  --text-dark: var(--fam-night-text);
  --text-light: var(--fam-night-muted);
  --text-lighter: var(--fam-night-faint);
  --ink-soft: var(--fam-night-text-soft);
  --slate: var(--fam-night-muted);
  --slate-light: var(--fam-night-faint);
  --muted: var(--fam-night-muted);

  --terra: var(--fam-night-accent);
  --terracotta: var(--fam-night-accent);
  --terra-soft: var(--fam-night-accent-soft);
  --terracotta-soft: var(--fam-night-accent-soft);
  --terra-dark: var(--fam-night-accent-deep);
  --terra-glow: rgba(0, 97, 170, .18);
  --terracotta-glow: rgba(0, 97, 170, .18);
  --terra-light: rgba(0, 97, 170, .16);
  --olive: var(--fam-night-accent);
  --olive-soft: var(--fam-night-accent-soft);
  --sage: var(--fam-night-accent);
  --sage-soft: rgba(0, 97, 170, .18);
  --mint: var(--fam-night-accent);
  --green: var(--fam-night-accent);

  --bar-bg: rgba(4, 26, 45, .9);
  --bar-border: var(--fam-night-border);
  --shadow: var(--fam-night-shadow-soft);
  --shadow-lg: var(--fam-night-shadow);
  --card-shadow: var(--fam-night-shadow-soft);
  --card-hover: var(--fam-night-shadow);

  --bo-canvas: var(--fam-night-canvas);
  --bo-canvas-soft: var(--fam-night-canvas-soft);
  --bo-sidebar: #061927;
  --bo-surface: var(--fam-night-surface);
  --bo-surface-soft: var(--fam-night-surface-strong);
  --bo-surface-muted: rgba(8, 36, 58, .74);
  --bo-border: var(--fam-night-border);
  --bo-border-soft: rgba(138, 200, 247, .11);
  --bo-ink: var(--fam-night-text);
  --bo-text: var(--fam-night-text-soft);
  --bo-muted: var(--fam-night-muted);
  --bo-faint: var(--fam-night-faint);
  --bo-orange: var(--fam-night-accent);
  --bo-orange-deep: var(--fam-night-accent-soft);
  --bo-green: var(--fam-night-accent);
  --bo-shadow-card: var(--fam-night-shadow-soft);
  --bo-shadow-hover: var(--fam-night-shadow);

  --init-canvas: var(--fam-night-canvas);
  --init-cream: #061A2B;
  --init-paper: var(--fam-night-surface);
  --init-paper-soft: var(--fam-night-surface-strong);
  --init-text: var(--fam-night-text);
  --init-muted: var(--fam-night-muted);
  --init-blue: var(--fam-night-text);
  --init-blue-ink: #DCE6EF;
  --init-border: var(--fam-night-border);
  --init-border-strong: var(--fam-night-border-strong);
  --init-orange: var(--fam-night-accent);
  --init-orange-deep: var(--fam-night-accent-soft);
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) {
  background:
    linear-gradient(135deg, rgba(0, 97, 170, .16) 0%, transparent 34%),
    linear-gradient(225deg, rgba(148, 163, 184, .07) 0%, transparent 30%),
    linear-gradient(180deg, var(--fam-night-canvas) 0%, var(--fam-night-canvas-soft) 50%, #050D14 100%) !important;
  color: var(--fam-night-text-soft);
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  h1, h2, h3, h4,
  .section-title, .page-title, .topbar-title h1,
  .card-header h3, .app-help-title, .sd-user-name,
  .brand-text, .rs-topbar-title h1
) {
  color: var(--fam-night-text) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  p, small, label,
  .subtitle, .section-intro, .section-label,
  .app-help-subtitle, .app-help-a,
  .topbar-title p, .tb-sub, .sd-user-role,
  .rs-topbar-title p, .rs-sidebar-section
) {
  color: var(--fam-night-muted) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  .card, .app-card, .app-kpi, .app-list-item,
  .topbar, .sidebar, .bnav, .more-sheet, .app-sheet, .app-help-panel,
  .modal, .modal-content, .dropdown, .dropdown-menu,
  .sa-card, .sa-kpi-card, .sa-topbar, .sa-modal, .sa-toast,
  .mkt-card, .mkt-kpi, .mkt-topbar, .mkt-toast, .login-card,
  .rs-card, .rs-topbar, .rs-sidebar, .rs-panel,
  .beta-card, .bf-card, .bfaq-item, .form-card,
  .pair-card, .error-card,
  .reset-card, .msg, .gdpr,
  .reg-card, .reg-panel, .reg-side, .reg-form, .reg-step, .reg-code-card,
  .content-card, .section-card, .benefit-card, .faq-item, .step,
  .legal-section, .legal-toc, .ln-more-drop, .ln-lang-drop,
  .av-card, .mod-card, .testi-card, .contact-info-item,
  .lang-dropdown, .mobile-nav, .sticky-trial
) {
  background: linear-gradient(180deg, rgba(8, 36, 58, .92), rgba(3, 17, 31, .94)) !important;
  border-color: var(--fam-night-border) !important;
  box-shadow: var(--fam-night-shadow-soft);
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  input, textarea, select,
  .app-input, .app-select, .form-control, .form-select, .search-input,
  .sa-input, .sa-select, .sa-textarea, .login-input, .mkt-input
) {
  background: rgba(3, 17, 31, .72) !important;
  border-color: var(--fam-night-border) !important;
  color: var(--fam-night-text) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  input, textarea
)::placeholder {
  color: rgba(159, 178, 197, .72) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  .btn:not(.btn-terra):not(.btn-primary):not(.login-btn):not(.primary),
  .sa-btn-outline, .sa-btn-icon, .mkt-btn-outline, .sso-btn, .btn-passkey,
  .tb-btn, .topbar-btn, .theme-btn, .icon-btn,
  .chip, .pill, .badge, .app-pill, .lang-trigger, .lang-btn, .rs-lang-btn
) {
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--fam-night-border) !important;
  color: var(--fam-night-text-soft) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  a, .text-terra, .more-link, .ch-action,
  .section-label, .app-tab.active, .bn.active i, .bn.active span
) {
  color: var(--fam-night-accent-soft) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  .btn-terra, .btn-primary, .login-btn, .app-btn-primary,
  .sa-btn-terra, .mkt-btn-terra, .btn-submit,
  .primary, .sidebar .nav-item.active, .bn-badge, .badge-terra
) {
  background: linear-gradient(135deg, var(--fam-night-accent-deep), var(--fam-night-accent), #0A74C4) !important;
  color: #FFFFFF !important;
  border-color: rgba(0, 97, 170, .52) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  [style*="#5B8A72"], [style*="#5b8a72"],
  [style*="#5C6B4F"], [style*="#5c6b4f"],
  [style*="91,138,114"], [style*="91, 138, 114"],
  [style*="92,107,79"], [style*="92, 107, 79"]
) {
  color: var(--fam-night-accent-soft) !important;
  border-color: rgba(0, 97, 170, .32) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  [style*="background:rgba(91,138,114"], [style*="background: rgba(91,138,114"],
  [style*="background:rgba(91, 138, 114"], [style*="background: rgba(91, 138, 114"],
  [style*="background:rgba(92,107,79"], [style*="background: rgba(92,107,79"],
  [style*="background:rgba(92, 107, 79"], [style*="background: rgba(92, 107, 79"],
  [style*="background:#5B8A72"], [style*="background: #5B8A72"],
  [style*="background:#5C6B4F"], [style*="background: #5C6B4F"],
  [style*="background:#5b8a72"], [style*="background: #5b8a72"],
  [style*="background:#5c6b4f"], [style*="background: #5c6b4f"]
) {
  background: rgba(0, 97, 170, .18) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  .nav-logo-img, .login-logo-wordmark, .sd-brand img,
  .brand-icon-square img, .rs-sidebar-logo img,
  .sa-sidebar-logo img, .mkt-sidebar-logo-text img,
  .inf-shell-brand img, .nav-logo img, .logo-section img,
  .reg-logo, .reset-logo, .legal-nav-logo-img,
  img[data-famylio-logo]
) {
  filter: brightness(0) invert(1) contrast(1.04) drop-shadow(0 10px 18px rgba(0, 97, 170, .18));
  opacity: .84;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  table, .data-table
) {
  background: var(--fam-night-surface) !important;
  color: var(--fam-night-text-soft) !important;
}

:is(:where(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell, body.dark-mode.famylio-shell) :where(
  th, td, .timeline-item, .app-help-item
) {
  border-color: var(--fam-night-border) !important;
}

/* ==========================================================================
   YLIO TOUCH + YLIO SATELLITE
   Global, annotated layer for premium responsive PWA surfaces.

   Strategy:
   - Mobile-first base from 320px.
   - Five explicit Ylio Touch breakpoints: 480 / 640 / 900 / 1180 / 1440.
   - Five explicit Ylio Satellite breakpoints mirror Touch for perceived
     polish on phone, tablet portrait, tablet landscape, kiosk and wide views.
   - Day/night is driven by html[data-ylio-theme].
   - All selectors are scoped to body.ylio-surface to avoid bleeding into app,
     backoffice, marketing or reseller screens.
   ========================================================================== */

body.ylio-surface {
  --ylio-vh: 100svh;
  --ylio-safe-top: env(safe-area-inset-top, 0px);
  --ylio-safe-right: env(safe-area-inset-right, 0px);
  --ylio-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ylio-safe-left: env(safe-area-inset-left, 0px);

  /* Brand contract: reseller CSS may override the three source colors only. */
  --ylio-brand-primary: var(--brand-primary, #D4654A);
  --ylio-brand-secondary: var(--brand-secondary, #5B8A72);
  --ylio-brand-tertiary: var(--brand-tertiary, #5C6B4F);

  /* Day palette: warm, readable and derived from primary/secondary/tertiary. */
  --ylio-day-accent: var(--ylio-brand-primary);
  --ylio-day-accent-soft: var(--brand-primary-soft, #F3C1B4);
  --ylio-day-accent-ink: #7C3526;
  --ylio-day-accent-fg: var(--brand-primary-fg, #FFFFFF);
  --ylio-day-secondary: var(--ylio-brand-secondary);
  --ylio-day-secondary-soft: var(--brand-secondary-soft, #EAF5EF);
  --ylio-day-tertiary: var(--ylio-brand-tertiary);
  --ylio-day-tertiary-soft: var(--brand-tertiary-soft, #E9EDE6);
  --ylio-day-border-strong: var(--brand-primary-strong-glow, rgba(212, 101, 74, .28));
  --ylio-day-canvas-glow: var(--brand-primary-glow, rgba(212, 101, 74, .10));

  /* Night palette defaults. BrandingService replaces these for reseller pages. */
  --ylio-night-accent: var(--fam-night-accent);
  --ylio-night-accent-soft: var(--fam-night-accent-soft);
  --ylio-night-accent-deep: var(--fam-night-accent-deep);
  --ylio-night-accent-ink: #FFFFFF;
  --ylio-night-accent-fg: #FFFFFF;
  --ylio-night-secondary: var(--fam-night-accent);
  --ylio-night-secondary-soft: rgba(0, 97, 170, .20);
  --ylio-night-tertiary: #F5B84B;
  --ylio-night-tertiary-soft: rgba(245, 184, 75, .14);
  --ylio-night-border-strong: var(--fam-night-border-strong);
  --ylio-night-canvas-glow: rgba(0, 97, 170, .16);

  --ylio-canvas: #F7F2EC;
  --ylio-canvas-soft: #FFF8F0;
  --ylio-surface: #FFFFFF;
  --ylio-surface-strong: #FFFDFB;
  --ylio-surface-soft: rgba(255, 255, 255, .88);
  --ylio-text: #172B42;
  --ylio-text-soft: #3E4A58;
  --ylio-muted: #657387;
  --ylio-faint: #8994A3;
  --ylio-border: rgba(91, 74, 55, .14);
  --ylio-border-strong: var(--ylio-day-border-strong);
  --ylio-accent: var(--ylio-day-accent);
  --ylio-accent-soft: var(--ylio-day-accent-soft);
  --ylio-accent-ink: var(--ylio-day-accent-ink);
  --ylio-accent-fg: var(--ylio-day-accent-fg);
  --ylio-green: var(--ylio-day-secondary);
  --ylio-green-soft: var(--ylio-day-secondary-soft);
  --ylio-amber: var(--ylio-day-tertiary);
  --ylio-shadow: 0 18px 54px rgba(23, 43, 66, .12);
  --ylio-shadow-strong: 0 28px 86px rgba(23, 43, 66, .16);
  --ylio-logo-filter: none;
  margin: 0;
  position: relative;
  min-height: var(--ylio-vh);
  overflow-x: hidden;
  background:
    radial-gradient(circle at top left, var(--ylio-day-canvas-glow), transparent 32%),
    linear-gradient(180deg, var(--ylio-surface-strong) 0%, var(--ylio-canvas) 100%);
  color: var(--ylio-text);
  font-family: "Poppins", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  color-scheme: light;
}

@supports (height: 100dvh) {
  body.ylio-surface { --ylio-vh: 100dvh; }
}

html:not([data-ylio-theme])[data-ylio-default-theme="night"] body.ylio-surface,
html[data-ylio-theme="night"] body.ylio-surface {
  --ylio-canvas: var(--fam-night-canvas);
  --ylio-canvas-soft: var(--fam-night-canvas-soft);
  --ylio-surface: var(--fam-night-surface);
  --ylio-surface-strong: var(--fam-night-surface-strong);
  --ylio-surface-soft: rgba(8, 36, 58, .88);
  --ylio-text: var(--fam-night-text);
  --ylio-text-soft: var(--fam-night-text-soft);
  --ylio-muted: var(--fam-night-muted);
  --ylio-faint: var(--fam-night-faint);
  --ylio-border: var(--fam-night-border);
  --ylio-border-strong: var(--ylio-night-border-strong);
  --ylio-accent: var(--ylio-night-accent);
  --ylio-accent-soft: var(--ylio-night-accent-soft);
  --ylio-accent-ink: var(--ylio-night-accent-ink);
  --ylio-accent-fg: var(--ylio-night-accent-fg);
  --ylio-green: var(--ylio-night-secondary);
  --ylio-green-soft: var(--ylio-night-secondary-soft);
  --ylio-amber: var(--ylio-night-tertiary);
  --ylio-shadow: var(--fam-night-shadow-soft);
  --ylio-shadow-strong: var(--fam-night-shadow);
  --ylio-logo-filter: brightness(0) invert(1) contrast(1.05) drop-shadow(0 10px 18px rgba(0, 97, 170, .18));
  background:
    linear-gradient(135deg, var(--ylio-night-canvas-glow) 0%, transparent 34%),
    linear-gradient(225deg, rgba(148, 163, 184, .07) 0%, transparent 30%),
    linear-gradient(180deg, var(--ylio-canvas) 0%, var(--ylio-canvas-soft) 52%, #050D14 100%);
  color-scheme: dark;
}

body.ylio-surface *,
body.ylio-surface *::before,
body.ylio-surface *::after {
  box-sizing: border-box;
}

body.ylio-surface :where(img, svg, video, canvas, iframe) {
  max-width: 100%;
  height: auto;
}

body.ylio-surface :where(button, input, select, textarea) {
  font: inherit;
}

body.ylio-surface :where(a, button) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.ylio-surface :where(h1, h2, h3, p) {
  overflow-wrap: anywhere;
}

body.ylio-surface::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199, 224, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 224, 255, .035) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .16;
}

body.ylio-surface > * {
  position: relative;
  z-index: 1;
}

html[data-ylio-theme="day"] body.ylio-surface::before {
  background-image:
    linear-gradient(rgba(91, 74, 55, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 74, 55, .028) 1px, transparent 1px);
  opacity: .22;
}

/* Shared Ylio controls ---------------------------------------------------- */
body.ylio-surface .ylio-theme-toggle {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ylio-border);
  border-radius: 14px;
  background: var(--ylio-surface-soft);
  color: var(--ylio-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 900;
  text-decoration: none;
}

body.ylio-surface .ylio-theme-toggle i {
  color: var(--ylio-accent);
  width: 16px;
  text-align: center;
}

body.ylio-surface .ylio-theme-toggle span {
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

body.ylio-surface .ylio-theme-toggle:focus-visible,
body.ylio-surface :where(.btn, .icon-btn, .text-btn):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ylio-accent) 34%, transparent);
  outline-offset: 3px;
}

@media (max-width: 420px) {
  body.ylio-surface .ylio-theme-toggle span { display: none; }
}

/* Ylio Touch home ---------------------------------------------------------
   Base is phone portrait / very small tablet preview. It scrolls first, then
   becomes a fixed kiosk grid only when width and height are available.
   ---------------------------------------------------------------------- */
body.ylio-touch-home {
  --ylio-touch-pad-x: 14px;
  --ylio-touch-pad-y: 14px;
  --ylio-touch-gap: 16px;
  --ylio-touch-panel-gap: 16px;
  --ylio-touch-panel-pad: 18px;
  --ylio-touch-panel-radius: 22px;
  --ylio-touch-logo-size: 56px;
  --ylio-touch-logo-radius: 18px;
  --ylio-touch-logo-img: 42px;
  --ylio-touch-title-size: 30px;
  --ylio-touch-clock-size: 38px;
  --ylio-touch-panel-title-size: 19px;
  --ylio-touch-item-title-size: 15px;
  --ylio-touch-icon-size: 38px;
  --ylio-touch-item-pad: 13px;
  overflow-y: auto;
}

body.ylio-touch-home .touch {
  position: relative;
  min-height: var(--ylio-vh);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--ylio-touch-gap);
  padding: calc(var(--ylio-touch-pad-y) + var(--ylio-safe-top)) calc(var(--ylio-touch-pad-x) + var(--ylio-safe-right)) calc(var(--ylio-touch-pad-y) + var(--ylio-safe-bottom)) calc(var(--ylio-touch-pad-x) + var(--ylio-safe-left));
}

body.ylio-touch-home .touch > header {
  display: grid;
  gap: 14px;
}

body.ylio-touch-home .brand,
body.ylio-touch-install .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ylio-text);
  text-decoration: none;
}

body.ylio-touch-home .logo {
  width: var(--ylio-touch-logo-size);
  height: var(--ylio-touch-logo-size);
  border-radius: var(--ylio-touch-logo-radius);
  background: linear-gradient(180deg, var(--ylio-surface-soft), color-mix(in srgb, var(--ylio-surface) 82%, #000 18%));
  border: 1px solid var(--ylio-border-strong);
  display: grid;
  place-items: center;
  box-shadow: var(--ylio-shadow);
  flex: 0 0 auto;
}

body.ylio-touch-home .logo img,
body.ylio-touch-install .brand img,
body.ylio-satellite-home .brand,
body.ylio-satellite-install .brand,
body.ylio-satellite-entry .sat-entry-logo {
  filter: var(--ylio-logo-filter);
}

/* Reseller logos keep their own colors; the light chip protects night mode. */
body.ylio-surface img[data-ylio-reseller-logo="1"] {
  filter: none;
  background: rgba(255, 255, 255, .94);
  border: 1px solid color-mix(in srgb, var(--ylio-border-strong) 72%, rgba(255, 255, 255, .34));
  border-radius: 12px;
  padding: 5px;
  object-fit: contain;
}

body.ylio-touch-home .logo img {
  width: var(--ylio-touch-logo-img);
  height: var(--ylio-touch-logo-img);
  object-fit: contain;
  opacity: .9;
}

body.ylio-touch-home .logo img[data-ylio-reseller-logo="1"] {
  width: 46px;
  height: 46px;
  opacity: 1;
}

body.ylio-touch-install .brand img[data-ylio-reseller-logo="1"] {
  height: 46px;
  max-width: min(220px, 100%);
  opacity: 1;
}

body.ylio-satellite-home .brand[data-ylio-reseller-logo="1"],
body.ylio-satellite-install .brand[data-ylio-reseller-logo="1"] {
  height: var(--ylio-sat-reseller-logo-height, var(--ylio-sat-brand-height, 42px));
  max-width: var(--ylio-sat-brand-max, 220px);
}

body.ylio-satellite-entry .sat-entry-logo[data-ylio-reseller-logo="1"] {
  width: var(--ylio-sat-entry-logo-width, 190px);
  max-width: 100%;
}

body.ylio-touch-home .kicker,
body.ylio-touch-install .kicker,
body.ylio-touch-install .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--ylio-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ylio-accent) 14%, transparent);
  color: var(--ylio-accent-soft);
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

html[data-ylio-theme="day"] body.ylio-touch-home .kicker,
html[data-ylio-theme="day"] body.ylio-touch-install .kicker,
html[data-ylio-theme="day"] body.ylio-touch-install .badge {
  color: var(--ylio-accent-ink);
}

body.ylio-touch-home h1 {
  margin: 7px 0 0;
  color: var(--ylio-text);
  font-size: var(--ylio-touch-title-size);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

body.ylio-touch-home .touch-top-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.ylio-touch-home .clock {
  text-align: right;
  min-width: max-content;
}

body.ylio-touch-home .time {
  color: var(--ylio-text);
  font-size: var(--ylio-touch-clock-size);
  line-height: 1;
  font-weight: 950;
}

body.ylio-touch-home .date {
  color: var(--ylio-muted);
  font-size: 13px;
  font-weight: 800;
}

body.ylio-touch-home .grid {
  display: grid;
  gap: var(--ylio-touch-panel-gap);
  min-height: 0;
}

body.ylio-touch-home .main-col,
body.ylio-touch-home .side-col {
  display: grid;
  gap: var(--ylio-touch-panel-gap);
  min-height: 0;
}

body.ylio-touch-home .panel,
body.ylio-touch-install .panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--ylio-border);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ylio-surface) 92%, transparent), color-mix(in srgb, var(--ylio-canvas-soft) 86%, transparent));
  box-shadow: var(--ylio-shadow-strong), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.ylio-touch-home .panel {
  padding: var(--ylio-touch-panel-pad);
  border-radius: var(--ylio-touch-panel-radius);
}

body.ylio-touch-home .panel::before,
body.ylio-touch-install .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ylio-accent) 8%, transparent), transparent 42%),
    linear-gradient(225deg, rgba(255, 255, 255, .035), transparent 34%);
}

body.ylio-touch-home .panel > *,
body.ylio-touch-install .panel > * {
  position: relative;
}

body.ylio-touch-home .panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--ylio-text);
  font-size: var(--ylio-touch-panel-title-size);
  line-height: 1.12;
  letter-spacing: 0;
}

body.ylio-touch-home .panel h2 i {
  color: var(--ylio-accent);
  width: 24px;
  text-align: center;
}

body.ylio-touch-home .list {
  display: grid;
  gap: 10px;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

body.ylio-touch-home .item {
  display: grid;
  grid-template-columns: var(--ylio-touch-icon-size) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--ylio-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ylio-surface) 78%, transparent);
  padding: var(--ylio-touch-item-pad);
}

body.ylio-touch-home .icon {
  width: var(--ylio-touch-icon-size);
  height: var(--ylio-touch-icon-size);
  border-radius: 13px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ylio-border-strong);
  background: color-mix(in srgb, var(--ylio-accent) 14%, transparent);
  color: var(--ylio-accent);
}

body.ylio-touch-home .item strong {
  display: block;
  color: var(--ylio-text);
  font-size: var(--ylio-touch-item-title-size);
  line-height: 1.24;
}

body.ylio-touch-home .item span {
  display: block;
  color: var(--ylio-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.32;
  margin-top: 2px;
}

body.ylio-touch-home .pill {
  grid-column: 1 / -1;
  justify-self: start;
  border: 1px solid var(--ylio-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ylio-accent) 14%, transparent);
  color: var(--ylio-accent);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

html[data-ylio-theme="night"] body.ylio-touch-home .pill,
html:not([data-ylio-theme])[data-ylio-default-theme="night"] body.ylio-touch-home .pill {
  color: var(--ylio-accent-soft);
}

body.ylio-touch-home .touch-task-item {
  --touch-task-color: var(--ylio-accent);
}

body.ylio-touch-home .touch-task-item.priority-high {
  --touch-task-color: #D4654A;
}

body.ylio-touch-home .touch-task-item.priority-medium {
  --touch-task-color: #D9A441;
}

body.ylio-touch-home .touch-task-item.priority-low {
  --touch-task-color: var(--ylio-green);
}

body.ylio-touch-home .touch-task-item .icon {
  background: color-mix(in srgb, var(--touch-task-color) 16%, transparent);
  color: var(--touch-task-color);
}

body.ylio-touch-home .touch-task-item .pill {
  background: color-mix(in srgb, var(--touch-task-color) 14%, transparent);
  color: var(--touch-task-color);
}

body.ylio-touch-home .empty {
  border: 1px solid var(--ylio-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ylio-surface) 72%, transparent);
  padding: 16px;
  color: var(--ylio-muted);
  font-weight: 800;
  line-height: 1.48;
}

body.ylio-touch-home footer {
  display: grid;
  gap: 12px;
  color: var(--ylio-muted);
  font-weight: 800;
}

body.ylio-touch-home .actions,
body.ylio-touch-install .actions,
body.ylio-satellite-install .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.ylio-touch-home .btn,
body.ylio-touch-install .btn {
  min-height: 44px;
  border: 1px solid var(--ylio-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ylio-surface) 76%, transparent);
  color: var(--ylio-text);
  text-decoration: none;
  padding: 12px 15px;
  font-weight: 900;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  cursor: pointer;
}

body.ylio-touch-home .btn.primary,
body.ylio-touch-install .btn.primary {
  border-color: var(--ylio-border-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ylio-accent) 68%, #123 32%) 0%, var(--ylio-accent) 58%, var(--ylio-accent-soft) 100%);
  color: var(--ylio-accent-fg);
}

/* Ylio Touch BP1 - 480px: large phone / small landscape.
   The content stays single-column, but touch rows become denser and labels
   return inline so the screen stops feeling like stacked phone cards. */
@media (min-width: 480px) {
  body.ylio-touch-home {
    --ylio-touch-pad-x: 18px;
    --ylio-touch-pad-y: 18px;
    --ylio-touch-logo-size: 60px;
    --ylio-touch-logo-img: 44px;
    --ylio-touch-title-size: 34px;
    --ylio-touch-clock-size: 44px;
    --ylio-touch-panel-title-size: 20px;
    --ylio-touch-icon-size: 42px;
    --ylio-touch-item-pad: 14px;
  }

  body.ylio-touch-home .item { grid-template-columns: var(--ylio-touch-icon-size) minmax(0, 1fr) auto; }
  body.ylio-touch-home .pill { grid-column: auto; justify-self: end; }
}

/* Ylio Touch BP2 - 640px: tablet portrait.
   The header and footer lock into balanced rails, with slightly larger visual
   anchors but no viewport-based font scaling. */
@media (min-width: 640px) {
  body.ylio-touch-home {
    --ylio-touch-gap: 18px;
    --ylio-touch-panel-gap: 18px;
    --ylio-touch-panel-pad: 20px;
    --ylio-touch-logo-size: 64px;
    --ylio-touch-logo-radius: 20px;
    --ylio-touch-logo-img: 48px;
    --ylio-touch-title-size: 42px;
    --ylio-touch-clock-size: 50px;
    --ylio-touch-panel-title-size: 21px;
    --ylio-touch-item-title-size: 16px;
  }

  body.ylio-touch-home .touch > header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  body.ylio-touch-home footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  body.ylio-touch-home .actions { justify-content: flex-end; }
}

/* Ylio Touch BP3 - 900px: Touch portrait / compact landscape.
   The dashboard becomes a two-column operating surface while preserving enough
   width in the side rail for badges, labels and empty states. */
@media (min-width: 900px) {
  body.ylio-touch-home {
    --ylio-touch-gap: 20px;
    --ylio-touch-panel-gap: 20px;
    --ylio-touch-panel-radius: 24px;
    --ylio-touch-title-size: 48px;
    --ylio-touch-clock-size: 54px;
    --ylio-touch-panel-title-size: 22px;
    --ylio-touch-item-title-size: 17px;
  }

  body.ylio-touch-home .grid { grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); }
}

/* Ylio Touch BP4 - 1180px: main kiosk grid.
   Fixed-height behavior starts only when height is available; this is the
   "wall tablet" posture with no wasted vertical space. */
@media (min-width: 1180px) and (min-height: 720px) {
  body.ylio-touch-home {
    --ylio-touch-pad-x: 24px;
    --ylio-touch-pad-y: 24px;
    --ylio-touch-title-size: 52px;
    --ylio-touch-clock-size: 56px;
  }

  body.ylio-touch-home { overflow: hidden; }
  body.ylio-touch-home .touch {
    height: var(--ylio-vh);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  body.ylio-touch-home .grid,
  body.ylio-touch-home .main-col,
  body.ylio-touch-home .side-col { min-height: 0; }

  body.ylio-touch-home .main-col,
  body.ylio-touch-home .side-col {
    grid-template-rows: none;
    align-content: start;
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 2px;
  }
}

/* Ylio Touch BP5 - 1440px: wide wall / kitchen tablet.
   The layout gains air, not bloat: gaps and panels expand while typography
   remains deliberately capped for a premium appliance feel. */
@media (min-width: 1440px) {
  body.ylio-touch-home {
    --ylio-touch-pad-x: 32px;
    --ylio-touch-gap: 24px;
    --ylio-touch-panel-gap: 24px;
    --ylio-touch-panel-pad: 24px;
    --ylio-touch-panel-radius: 26px;
    --ylio-touch-title-size: 58px;
    --ylio-touch-clock-size: 60px;
    --ylio-touch-panel-title-size: 24px;
  }
}

/* Ylio Touch install ------------------------------------------------------ */
body.ylio-touch-install {
  --ylio-install-wrap-max: 1120px;
  --ylio-install-gutter: 14px;
  --ylio-install-pad-top: 22px;
  --ylio-install-pad-bottom: 28px;
  --ylio-install-top-gap: 12px;
  --ylio-install-top-margin: 20px;
  --ylio-install-shell-gap: 18px;
  --ylio-install-panel-pad: 18px;
  --ylio-install-panel-radius: 22px;
  --ylio-install-title-size: 34px;
  --ylio-install-title-line: 1;
  --ylio-install-h2-size: 21px;
  --ylio-install-lead-size: 16px;
  --ylio-install-row-gap: 10px;
  --ylio-install-step-pad: 12px;
  --ylio-install-card-pad: 13px 14px;
  --ylio-install-code-size: 24px;
  --ylio-install-qr-size: 176px;
}

body.ylio-touch-install .wrap {
  width: min(var(--ylio-install-wrap-max), calc(100% - (var(--ylio-install-gutter) * 2)));
  margin: 0 auto;
  padding: calc(var(--ylio-install-pad-top) + var(--ylio-safe-top)) 0 calc(var(--ylio-install-pad-bottom) + var(--ylio-safe-bottom));
}

body.ylio-touch-install .top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ylio-install-top-gap);
  margin-bottom: var(--ylio-install-top-margin);
}

body.ylio-touch-install .top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.ylio-touch-install .top-actions > *,
body.ylio-touch-install .actions > * {
  min-width: 0;
}

body.ylio-touch-install .actions .btn {
  flex: 1 1 100%;
}

body.ylio-touch-install .brand {
  font-weight: 900;
  font-size: 17px;
}

body.ylio-touch-install .brand img {
  height: 40px;
  width: auto;
  opacity: .9;
}

body.ylio-touch-install .shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ylio-install-shell-gap);
  align-items: start;
}

body.ylio-touch-install .panel {
  padding: var(--ylio-install-panel-pad);
  border-radius: var(--ylio-install-panel-radius);
}

body.ylio-touch-install .hero {
  background: linear-gradient(150deg, color-mix(in srgb, var(--ylio-canvas) 82%, #000 18%) 0%, color-mix(in srgb, var(--ylio-surface) 74%, var(--ylio-accent) 26%) 58%, var(--ylio-canvas-soft) 100%);
}

body.ylio-touch-install h1 {
  color: var(--ylio-text);
  font-size: var(--ylio-install-title-size);
  line-height: var(--ylio-install-title-line);
  margin: 18px 0 16px;
  letter-spacing: 0;
}

body.ylio-satellite-install h1 {
  color: var(--ylio-text);
  font-size: var(--ylio-sat-install-title-size, 34px);
  line-height: var(--ylio-sat-install-title-line, 1);
  margin: 18px 0 16px;
  letter-spacing: 0;
}

body.ylio-touch-install h2 {
  color: var(--ylio-text);
  font-size: var(--ylio-install-h2-size);
  margin: 0 0 8px;
  letter-spacing: 0;
}

body.ylio-touch-install p {
  color: var(--ylio-muted);
  line-height: 1.65;
}

body.ylio-touch-install .hero p {
  color: var(--ylio-text-soft);
  font-size: var(--ylio-install-lead-size);
  max-width: 620px;
}

body.ylio-touch-install .truth,
body.ylio-touch-install .device-card,
body.ylio-touch-install .checklist,
body.ylio-touch-install .instructions {
  display: grid;
  gap: var(--ylio-install-row-gap);
}

body.ylio-touch-install .truth {
  margin-top: 20px;
}

body.ylio-touch-install .instructions {
  margin: var(--ylio-install-shell-gap) 0;
}

body.ylio-touch-install .checklist {
  margin-top: var(--ylio-install-shell-gap);
}

body.ylio-touch-install .actions {
  margin-top: var(--ylio-install-top-margin);
}

body.ylio-touch-install .truth div,
body.ylio-touch-install .check,
body.ylio-touch-install .step {
  border: 1px solid var(--ylio-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ylio-surface) 72%, transparent);
}

body.ylio-touch-install .truth div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--ylio-install-card-pad);
}

body.ylio-touch-install .truth i {
  color: var(--ylio-accent);
  margin-top: 3px;
}

body.ylio-touch-install .device-card {
  margin-bottom: var(--ylio-install-shell-gap);
}

body.ylio-touch-install .badge {
  color: var(--ylio-accent);
}

body.ylio-touch-install .check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 15px;
}

body.ylio-touch-install .check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ylio-accent);
}

body.ylio-touch-install .check strong,
body.ylio-touch-install .step strong {
  display: block;
  color: var(--ylio-text);
}

body.ylio-touch-install .check span span {
  display: block;
  color: var(--ylio-muted);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 2px;
}

body.ylio-touch-install .step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: var(--ylio-install-step-pad);
}

body.ylio-touch-install .step b {
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ylio-accent) 14%, transparent);
  border: 1px solid var(--ylio-border-strong);
  color: var(--ylio-accent);
  display: grid;
  place-items: center;
}

body.ylio-touch-install .code-box {
  display: none;
  margin-top: var(--ylio-install-shell-gap);
  background: color-mix(in srgb, var(--ylio-canvas) 64%, transparent);
  border: 1px solid var(--ylio-border);
  color: var(--ylio-text);
  border-radius: 20px;
  padding: var(--ylio-install-panel-pad);
}

body.ylio-touch-install .code-box.is-open {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

body.ylio-touch-install .code {
  font-size: var(--ylio-install-code-size);
  font-weight: 950;
  letter-spacing: .08em;
  margin: 8px 0;
}

body.ylio-touch-install #newTabletQr {
  width: var(--ylio-install-qr-size);
  height: var(--ylio-install-qr-size);
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  display: grid;
  place-items: center;
}

body.ylio-touch-install .error {
  background: rgba(244, 63, 94, .13);
  border: 1px solid rgba(251, 113, 133, .26);
  color: #FECDD3;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
}

body.ylio-touch-install .small {
  color: var(--ylio-muted);
  font-size: 13px;
  font-weight: 650;
}

/* Ylio Touch Install BP1 - 480px: comfortable large phone.
   The layout remains vertical, but cards and titles gain precision so the
   setup flow feels intentional rather than stretched mobile. */
@media (min-width: 480px) {
  body.ylio-touch-install {
    --ylio-install-gutter: 18px;
    --ylio-install-panel-pad: 20px;
    --ylio-install-title-size: 38px;
    --ylio-install-lead-size: 17px;
    --ylio-install-row-gap: 11px;
    --ylio-install-step-pad: 13px;
  }
}

/* Ylio Touch Install BP2 - 640px: tablet portrait.
   Header actions move onto the same rail and action buttons return to natural
   widths once there is enough room to scan them without wrapping. */
@media (min-width: 640px) {
  body.ylio-touch-install {
    --ylio-install-gutter: 22px;
    --ylio-install-pad-top: 24px;
    --ylio-install-shell-gap: 20px;
    --ylio-install-panel-pad: 22px;
    --ylio-install-title-size: 44px;
    --ylio-install-h2-size: 22px;
    --ylio-install-code-size: 26px;
  }

  body.ylio-touch-install .top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  body.ylio-touch-install .actions .btn {
    flex: 0 1 auto;
  }

  body.ylio-touch-install .code-box.is-open {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

/* Ylio Touch Install BP3 - 900px: tablet landscape.
   The instructional hero and checklist become two balanced columns. */
@media (min-width: 900px) {
  body.ylio-touch-install {
    --ylio-install-panel-pad: 26px;
    --ylio-install-panel-radius: 24px;
    --ylio-install-shell-gap: 22px;
    --ylio-install-title-size: 54px;
    --ylio-install-h2-size: 23px;
    --ylio-install-lead-size: 18px;
  }

  body.ylio-touch-install .shell {
    grid-template-columns: 1.05fr .95fr;
  }
}

/* Ylio Touch Install BP4 - 1180px: kiosk/tablet setup posture.
   Height-aware polish: the shell fills the viewport only when it can breathe,
   keeping long checklist content scroll-safe on shorter screens. */
@media (min-width: 1180px) and (min-height: 720px) {
  body.ylio-touch-install {
    --ylio-install-gutter: 28px;
    --ylio-install-pad-top: 28px;
    --ylio-install-pad-bottom: 30px;
    --ylio-install-shell-gap: 24px;
    --ylio-install-panel-pad: 28px;
    --ylio-install-title-size: 58px;
  }

  body.ylio-touch-install .wrap {
    min-height: var(--ylio-vh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.ylio-touch-install .shell {
    align-items: stretch;
  }
}

/* Ylio Touch Install BP5 - 1440px: wide setup station.
   The canvas widens slightly and gains air without turning into a marketing
   hero; the checklist remains an operational tool. */
@media (min-width: 1440px) {
  body.ylio-touch-install {
    --ylio-install-wrap-max: 1240px;
    --ylio-install-gutter: 32px;
    --ylio-install-shell-gap: 26px;
    --ylio-install-panel-pad: 32px;
    --ylio-install-panel-radius: 26px;
    --ylio-install-title-size: 62px;
    --ylio-install-h2-size: 24px;
    --ylio-install-qr-size: 190px;
  }

  body.ylio-touch-install .hero p {
    max-width: 680px;
  }
}

/* Ylio Satellite shared mobile-first PWA ----------------------------------
   Base is the strict 320px phone posture: no horizontal scroll, 44px touch
   targets, compact logos and action labels that remain accessible when hidden.
   ---------------------------------------------------------------------- */
body.ylio-satellite-entry,
body.ylio-satellite-install,
body.ylio-satellite-home {
  --ylio-sat-page-x: 14px;
  --ylio-sat-page-y: 14px;
  --ylio-sat-entry-card-pad: 24px;
  --ylio-sat-entry-logo-width: 148px;
  --ylio-sat-entry-title-size: 30px;
  --ylio-sat-entry-copy-size: 14px;
  --ylio-sat-brand-height: 30px;
  --ylio-sat-reseller-logo-height: 42px;
  --ylio-sat-brand-max: 154px;
  --ylio-sat-home-max: 1180px;
  --ylio-sat-home-top-y: 10px;
  --ylio-sat-home-wrap-top: 18px;
  --ylio-sat-home-wrap-bottom: 34px;
  --ylio-sat-home-hero-gap: 16px;
  --ylio-sat-home-title-size: 32px;
  --ylio-sat-home-title-line: 1.02;
  --ylio-sat-home-lead-size: 15px;
  --ylio-sat-home-panel-pad: 16px;
  --ylio-sat-home-grid-gap: 12px;
  --ylio-sat-home-metric-pad: 15px;
  --ylio-sat-home-metric-size: 28px;
  --ylio-sat-install-max: 1060px;
  --ylio-sat-install-title-size: 34px;
  --ylio-sat-install-title-line: 1;
  --ylio-sat-install-lead-size: 16px;
  --ylio-sat-install-panel-pad: 22px;
  --ylio-sat-install-device-pad: 18px;
  --ylio-sat-install-card-pad: 18px;
  --ylio-sat-install-orb-size: 132px;
  --ylio-sat-install-hero-min: auto;
  font-family: "Poppins", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ylio-satellite-entry .btn,
body.ylio-satellite-home .text-btn,
body.ylio-satellite-home .icon-btn,
body.ylio-satellite-install .btn {
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  color: var(--ylio-text);
  text-decoration: none;
  font-weight: 900;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: center;
}

body.ylio-satellite-entry .btn,
body.ylio-satellite-install .btn {
  padding: 13px 18px;
}

body.ylio-satellite-entry .btn.primary,
body.ylio-satellite-home .primary,
body.ylio-satellite-install .primary {
  background: var(--ylio-accent);
  border-color: var(--ylio-accent);
  color: var(--ylio-accent-fg);
}

html[data-ylio-theme="night"] body.ylio-satellite-entry .btn.primary,
html[data-ylio-theme="night"] body.ylio-satellite-home .primary,
html[data-ylio-theme="night"] body.ylio-satellite-install .primary {
  color: var(--ylio-accent-fg);
}

body.ylio-satellite-home .eyebrow,
body.ylio-satellite-install .badge,
body.ylio-satellite-install .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ylio-green) 26%, transparent);
  background: var(--ylio-green-soft);
  color: var(--ylio-green);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

body.ylio-satellite-home .eyebrow,
body.ylio-satellite-install .badge {
  text-transform: uppercase;
}

/* Ylio Satellite entry -----------------------------------------------------
   Login/invitation landing keeps one calm card and accepts horizontal or
   vertical reseller marks without forcing a night-mode color transform.
   ---------------------------------------------------------------------- */
body.ylio-satellite-entry {
  display: grid;
  place-items: center;
  padding: calc(var(--ylio-sat-page-y) + var(--ylio-safe-top)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-right)) calc(var(--ylio-sat-page-y) + var(--ylio-safe-bottom)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-left));
}

body.ylio-satellite-entry .sat-entry-card {
  width: min(560px, 100%);
  min-width: 0;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  box-shadow: var(--ylio-shadow);
  padding: var(--ylio-sat-entry-card-pad);
  text-align: center;
}

body.ylio-satellite-entry .sat-entry-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

body.ylio-satellite-entry .sat-entry-logo {
  width: var(--ylio-sat-entry-logo-width);
  max-height: 86px;
  object-fit: contain;
  margin: 0 auto 22px;
}

body.ylio-satellite-entry h1 {
  color: var(--ylio-text);
  font-size: var(--ylio-sat-entry-title-size);
  line-height: 1.08;
  margin: 0 0 12px;
  letter-spacing: 0;
}

body.ylio-satellite-entry p {
  color: var(--ylio-muted);
  font-size: var(--ylio-sat-entry-copy-size);
  line-height: 1.65;
  margin: 0 0 24px;
}

body.ylio-satellite-entry .btn {
  width: 100%;
}

body.ylio-satellite-offline .offline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--ylio-amber) 34%, transparent);
  background: color-mix(in srgb, var(--ylio-amber) 13%, var(--ylio-surface));
  color: var(--ylio-text);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  margin-bottom: 16px;
}

body.ylio-satellite-offline .sat-offline-actions {
  display: grid;
  gap: 10px;
}

/* Ylio Satellite home ------------------------------------------------------
   Dashboard surface: the first viewport privileges logo, status, primary
   actions and household signal before denser cards take over on desktop.
   ---------------------------------------------------------------------- */
body.ylio-satellite-home .top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--ylio-surface) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ylio-border);
}

body.ylio-satellite-home .top-inner {
  width: min(var(--ylio-sat-home-max), 100%);
  margin: 0 auto;
  padding: calc(var(--ylio-sat-home-top-y) + var(--ylio-safe-top)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-right)) var(--ylio-sat-home-top-y) calc(var(--ylio-sat-page-x) + var(--ylio-safe-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.ylio-satellite-home .brand {
  height: var(--ylio-sat-brand-height);
  width: auto;
  max-width: var(--ylio-sat-brand-max);
  object-fit: contain;
  flex: 0 1 var(--ylio-sat-brand-max);
}

body.ylio-satellite-home .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

body.ylio-satellite-home .icon-btn,
body.ylio-satellite-home .text-btn {
  position: relative;
  width: 44px;
  padding: 0;
}

body.ylio-satellite-home .text-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.ylio-satellite-home .wrap {
  width: min(var(--ylio-sat-home-max), 100%);
  margin: 0 auto;
  padding: var(--ylio-sat-home-wrap-top) calc(var(--ylio-sat-page-x) + var(--ylio-safe-right)) calc(var(--ylio-sat-home-wrap-bottom) + var(--ylio-safe-bottom)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-left));
}

body.ylio-satellite-home .hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ylio-sat-home-hero-gap);
  align-items: end;
  margin-bottom: 18px;
}

body.ylio-satellite-home .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ylio-green);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ylio-green) 13%, transparent);
  flex: 0 0 auto;
}

body.ylio-satellite-home h1 {
  color: var(--ylio-text);
  font-size: var(--ylio-sat-home-title-size);
  line-height: var(--ylio-sat-home-title-line);
  margin: 14px 0 8px;
  letter-spacing: 0;
}

body.ylio-satellite-home .lead {
  margin: 0;
  color: var(--ylio-muted);
  line-height: 1.6;
  font-size: var(--ylio-sat-home-lead-size);
  max-width: 760px;
}

body.ylio-satellite-home .signal,
body.ylio-satellite-home .metric,
body.ylio-satellite-home .panel,
body.ylio-satellite-home .item,
body.ylio-satellite-home .empty {
  min-width: 0;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  box-shadow: var(--ylio-shadow);
}

body.ylio-satellite-home .signal {
  padding: 14px 16px;
}

body.ylio-satellite-home .signal strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

body.ylio-satellite-home .signal span {
  display: block;
  font-size: 13px;
  line-height: 1.42;
  margin-top: 5px;
}

body.ylio-satellite-home .signal strong,
body.ylio-satellite-home .metric b,
body.ylio-satellite-home .panel h2,
body.ylio-satellite-home .access-row b {
  color: var(--ylio-text);
}

body.ylio-satellite-home .signal span,
body.ylio-satellite-home .metric span,
body.ylio-satellite-home .item span,
body.ylio-satellite-home .small-copy,
body.ylio-satellite-home .footer-line,
body.ylio-satellite-home .access-row {
  color: var(--ylio-muted);
}

body.ylio-satellite-home .metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 18px 0;
}

body.ylio-satellite-home .metric {
  padding: var(--ylio-sat-home-metric-pad);
}

body.ylio-satellite-home .metric b {
  display: block;
  font-size: var(--ylio-sat-home-metric-size);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

body.ylio-satellite-home .metric span {
  display: block;
  font-size: 13px;
  line-height: 1.32;
  margin-top: 6px;
}

body.ylio-satellite-home .grid,
body.ylio-satellite-home .sat-main,
body.ylio-satellite-home .side,
body.ylio-satellite-home .list,
body.ylio-satellite-home .access {
  display: grid;
  gap: var(--ylio-sat-home-grid-gap);
}

body.ylio-satellite-home .panel {
  padding: var(--ylio-sat-home-panel-pad);
}

body.ylio-satellite-home .panel h2 {
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: 0;
}

body.ylio-satellite-home .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}

body.ylio-satellite-home .panel-head h2 {
  margin: 0;
}

body.ylio-satellite-home .mini-action {
  min-height: 44px;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ylio-surface);
  color: var(--ylio-text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

body.ylio-satellite-home .mini-action.primary {
  background: var(--ylio-accent);
  border-color: var(--ylio-accent);
  color: var(--ylio-accent-fg);
}

body.ylio-satellite-home .item {
  padding: 13px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

body.ylio-satellite-home .item strong {
  display: block;
  color: var(--ylio-text);
  font-size: 14px;
  line-height: 1.35;
}

body.ylio-satellite-home .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 28px;
  max-width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ylio-accent) 12%, transparent);
  color: var(--ylio-accent);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.12;
  padding: 5px 8px;
  overflow-wrap: anywhere;
}

body.ylio-satellite-home .contact-call {
  text-decoration: none;
  gap: 6px;
}

body.ylio-satellite-home .contact-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

body.ylio-satellite-home .icon-btn.compact {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 13px;
}

body.ylio-satellite-home .icon-btn.compact.danger {
  color: #B91C1C;
  background: rgba(220, 38, 38, .08);
}

body.ylio-satellite-home .sat-notes-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

body.ylio-satellite-home .sat-note-dot {
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.92);
  background: #F4C542;
  color: #5C4310;
  box-shadow: 0 12px 28px rgba(121,84,0,.22);
  font: 950 14px/1 "Poppins", Inter, ui-sans-serif, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 10px;
}

body.ylio-satellite-home .sat-notes-list {
  display: grid;
  gap: 9px;
}

body.ylio-satellite-home .sat-note-card {
  width: 100%;
  border: 1px solid rgba(121,84,0,.14);
  border-radius: 8px;
  background: linear-gradient(180deg,#FFF7C7,#FFEFA3);
  color: #40300B;
  padding: 12px 13px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(121,84,0,.10);
}

body.ylio-satellite-home .sat-note-card span {
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

body.ylio-satellite-home .sat-note-card small {
  display: block;
  margin-top: 5px;
  color: rgba(64,48,11,.72);
  font-size: 11px;
  font-weight: 850;
}

body.ylio-satellite-home .sat-notes-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: min(82vh, 760px);
  overflow-y: auto;
  border: 1px solid var(--ylio-border);
  border-radius: 14px;
  background: var(--ylio-surface);
  box-shadow: 0 26px 70px rgba(20, 24, 30, .24);
  padding: 18px;
}

body.ylio-satellite-home .sat-notes-stack {
  display: grid;
  gap: 12px;
}

body.ylio-satellite-home .sat-note-full {
  border: 1px solid rgba(121,84,0,.16);
  border-radius: 8px;
  background: linear-gradient(180deg,#FFF7C7,#FFEFA3);
  color: #40300B;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(121,84,0,.12);
}

body.ylio-satellite-home .sat-note-full p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 850;
  overflow-wrap: anywhere;
}

body.ylio-satellite-home .sat-note-full span {
  display: block;
  margin-top: 10px;
  color: rgba(64,48,11,.72);
  font-size: 12px;
  font-weight: 850;
}

body.ylio-satellite-home .sat-notes-dialog .sat-modal-head p {
  margin: 0 0 5px;
  color: var(--ylio-muted);
  font-size: 12px;
  font-weight: 850;
}

body.ylio-satellite-home .sat-modal[hidden] {
  display: none;
}

body.ylio-satellite-home .sat-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: end center;
  padding: calc(12px + var(--ylio-safe-top)) calc(12px + var(--ylio-safe-right)) calc(12px + var(--ylio-safe-bottom)) calc(12px + var(--ylio-safe-left));
}

body.ylio-satellite-home .sat-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(20, 24, 30, .42);
}

body.ylio-satellite-home .sat-contact-form {
  position: relative;
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 24px - var(--ylio-safe-top) - var(--ylio-safe-bottom)));
  overflow: auto;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  box-shadow: 0 26px 70px rgba(20, 24, 30, .24);
  padding: 16px;
}

body.ylio-satellite-home .sat-modal-head,
body.ylio-satellite-home .sat-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.ylio-satellite-home .sat-modal-head {
  margin-bottom: 14px;
}

body.ylio-satellite-home .sat-modal-head h2 {
  margin: 0;
  color: var(--ylio-text);
  font-size: 18px;
  line-height: 1.2;
}

body.ylio-satellite-home .sat-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

body.ylio-satellite-home .sat-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--ylio-text);
  font-size: 12px;
  font-weight: 900;
}

body.ylio-satellite-home .sat-form-grid input,
body.ylio-satellite-home .sat-form-grid select,
body.ylio-satellite-home .sat-form-grid textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ylio-surface) 94%, var(--ylio-bg));
  color: var(--ylio-text);
  font: inherit;
  font-size: 14px;
  padding: 10px 11px;
}

body.ylio-satellite-home .sat-form-grid textarea {
  resize: vertical;
  min-height: 76px;
}

body.ylio-satellite-home .sat-form-actions {
  margin-top: 14px;
}

body.ylio-satellite-home .sat-form-actions .text-btn,
body.ylio-satellite-home .sat-modal-head .icon-btn {
  position: static;
}

body.ylio-satellite-home .sat-form-actions .text-btn {
  width: auto;
  flex: 1 1 0;
  padding: 0 12px;
}

body.ylio-satellite-home .sat-form-actions .text-btn span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: nowrap;
}

body.ylio-satellite-home .empty {
  border-style: dashed;
  padding: 18px;
  color: var(--ylio-muted);
  line-height: 1.55;
  box-shadow: none;
}

body.ylio-satellite-home .access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--ylio-border);
  padding-bottom: 9px;
  font-size: 13px;
}

body.ylio-satellite-home .access-row span,
body.ylio-satellite-home .access-row b {
  min-width: 0;
}

body.ylio-satellite-home .access-row b {
  text-align: right;
  overflow-wrap: anywhere;
}

body.ylio-satellite-home .access-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.ylio-satellite-home .soft {
  background: color-mix(in srgb, var(--ylio-accent) 6%, var(--ylio-surface));
}

body.ylio-satellite-home .small-copy {
  line-height: 1.55;
  font-size: 13px;
  margin: 0;
}

body.ylio-satellite-home .footer-line {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.45;
}

body.ylio-satellite-home .sat-tasks-panel {
  margin: 18px 0;
}

body.ylio-satellite-home .sat-task-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

body.ylio-satellite-home .sat-task-head p,
body.ylio-satellite-home .sat-task-form .sat-modal-head p {
  margin: 6px 0 0;
  color: var(--ylio-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.ylio-satellite-home .sat-task-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

body.ylio-satellite-home .sat-task-flow span {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ylio-green) 8%, var(--ylio-surface));
  color: var(--ylio-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  padding: 0 8px;
}

body.ylio-satellite-home .sat-task-flow i {
  color: var(--ylio-green);
  font-size: 12px;
}

body.ylio-satellite-home .sat-task-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body.ylio-satellite-home .sat-task-card {
  --sat-task-color: var(--ylio-accent);
  min-width: 0;
  border: 1px solid var(--ylio-border);
  border-left: 4px solid var(--sat-task-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sat-task-color) 6%, var(--ylio-surface));
  box-shadow: var(--ylio-shadow);
  padding: 12px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  transition: opacity .18s ease, transform .18s ease;
}

body.ylio-satellite-home .sat-task-card.priority-high {
  --sat-task-color: #D4654A;
}

body.ylio-satellite-home .sat-task-card.priority-medium {
  --sat-task-color: #D9A441;
}

body.ylio-satellite-home .sat-task-card.priority-low {
  --sat-task-color: var(--ylio-green);
}

body.ylio-satellite-home .sat-task-card.is-done {
  opacity: .62;
  transform: translateY(2px) scale(.99);
}

body.ylio-satellite-home .sat-task-check {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 2px solid color-mix(in srgb, var(--sat-task-color) 40%, var(--ylio-border));
  border-radius: 999px;
  background: var(--ylio-surface);
  color: var(--sat-task-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
}

body.ylio-satellite-home .sat-task-check:disabled {
  cursor: wait;
  opacity: .58;
}

body.ylio-satellite-home .sat-task-check:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sat-task-color) 28%, transparent);
  outline-offset: 2px;
}

body.ylio-satellite-home .sat-task-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body.ylio-satellite-home .sat-task-main strong {
  color: var(--ylio-text);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.ylio-satellite-home .sat-task-main span {
  color: var(--ylio-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.ylio-satellite-home .sat-task-scope {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sat-task-color) 12%, transparent);
  color: var(--sat-task-color);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.12;
  padding: 5px 8px;
}

body.ylio-satellite-home .sat-task-empty[hidden] {
  display: none;
}

body.ylio-satellite-home .sat-loyalty-panel {
  margin: 18px 0;
}

body.ylio-satellite-home .sat-loyalty-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

body.ylio-satellite-home .sat-loyalty-head p {
  margin: 6px 0 0;
  color: var(--ylio-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.ylio-satellite-home .sat-loyalty-view {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 260px);
}

body.ylio-satellite-home .sat-loyalty-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

body.ylio-satellite-home .sat-loyalty-flow span {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ylio-accent) 8%, var(--ylio-surface));
  color: var(--ylio-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  padding: 0 8px;
}

body.ylio-satellite-home .sat-loyalty-flow i {
  color: var(--ylio-accent);
  font-size: 12px;
}

body.ylio-satellite-home .sat-loyalty-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

body.ylio-satellite-home .sat-loyalty-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ylio-surface) 94%, var(--ylio-bg));
  color: var(--ylio-muted);
  padding: 0 12px;
}

body.ylio-satellite-home .sat-loyalty-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ylio-text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
}

body.ylio-satellite-home .sat-loyalty-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1px 0 8px;
  scrollbar-width: thin;
}

body.ylio-satellite-home .sat-loyalty-cat {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid var(--ylio-border);
  border-radius: 999px;
  background: var(--ylio-surface);
  color: var(--ylio-text);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
  cursor: pointer;
}

body.ylio-satellite-home .sat-loyalty-cat.active {
  border-color: var(--ylio-accent);
  background: color-mix(in srgb, var(--ylio-accent) 13%, var(--ylio-surface));
  color: var(--ylio-accent);
}

body.ylio-satellite-home .sat-loyalty-results {
  display: grid;
  gap: 10px;
}

body.ylio-satellite-home .sat-loyalty-results[data-view="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(174px, 1fr));
}

body.ylio-satellite-home .sat-loyalty-results[data-view="list"] {
  grid-template-columns: 1fr;
}

body.ylio-satellite-home .sat-loyalty-card {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sat-loyalty-color, var(--ylio-accent)) 7%, var(--ylio-surface));
  color: var(--ylio-text);
  box-shadow: var(--ylio-shadow);
  cursor: pointer;
  text-align: left;
  min-height: 116px;
  padding: 13px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font: inherit;
}

body.ylio-satellite-home .sat-loyalty-card:active {
  transform: scale(.985);
}

body.ylio-satellite-home .sat-loyalty-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ylio-accent) 26%, transparent);
  outline-offset: 2px;
}

body.ylio-satellite-home .sat-loyalty-card[hidden] {
  display: none;
}

body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-card {
  min-height: 70px;
  grid-template-columns: 42px minmax(0, 1fr) minmax(92px, auto) minmax(128px, auto);
}

body.ylio-satellite-home .sat-loyalty-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--sat-loyalty-color, var(--ylio-accent));
  color: #fff;
  font-size: 17px;
}

body.ylio-satellite-home .sat-loyalty-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.ylio-satellite-home .sat-loyalty-main strong {
  color: var(--ylio-text);
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.ylio-satellite-home .sat-loyalty-main span,
body.ylio-satellite-home .sat-loyalty-code {
  color: var(--ylio-muted);
  font-size: 12px;
  line-height: 1.35;
}

body.ylio-satellite-home .sat-loyalty-code {
  grid-column: 1 / -1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 900;
  overflow-wrap: anywhere;
}

body.ylio-satellite-home .sat-loyalty-hint {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  color: color-mix(in srgb, var(--ylio-text) 62%, transparent);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

body.ylio-satellite-home .sat-loyalty-hint i {
  color: var(--sat-loyalty-color, var(--ylio-accent));
  font-size: 10px;
}

body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-code {
  grid-column: auto;
  text-align: right;
}

body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-hint {
  grid-column: auto;
  justify-self: end;
  text-align: right;
}

@media (max-width: 479px) {
  body.ylio-satellite-home .sat-task-flow {
    grid-template-columns: 1fr;
  }

  body.ylio-satellite-home .sat-loyalty-flow {
    grid-template-columns: 1fr;
  }

  body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-code {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: left;
  }

  body.ylio-satellite-home .sat-loyalty-results[data-view="list"] .sat-loyalty-hint {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

body.ylio-satellite-home .sat-loyalty-empty[hidden] {
  display: none;
}

body.ylio-satellite-home .sat-loyalty-code-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: min(820px, calc(100dvh - 24px - var(--ylio-safe-top) - var(--ylio-safe-bottom)));
  overflow: auto;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  box-shadow: 0 26px 70px rgba(20, 24, 30, .24);
  padding: 16px;
}

body.ylio-satellite-home .sat-loyalty-code-dialog .sat-modal-head p {
  margin: 4px 0 0;
  color: var(--ylio-muted);
  font-size: 12px;
  font-weight: 800;
}

body.ylio-satellite-home .sat-loyalty-code-stage {
  min-height: 252px;
  border: 1px solid color-mix(in srgb, #111827 12%, transparent);
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}

body.ylio-satellite-home .sat-loyalty-qr-render {
  width: min(320px, 72vw);
  height: min(320px, 72vw);
  display: grid;
  place-items: center;
}

body.ylio-satellite-home .sat-loyalty-qr-render[hidden],
body.ylio-satellite-home .sat-loyalty-barcode-svg[hidden],
body.ylio-satellite-home .sat-loyalty-code-fallback[hidden] {
  display: none;
}

body.ylio-satellite-home .sat-loyalty-qr-render canvas,
body.ylio-satellite-home .sat-loyalty-qr-render img {
  width: 100% !important;
  height: 100% !important;
}

body.ylio-satellite-home .sat-loyalty-barcode-svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

body.ylio-satellite-home .sat-loyalty-code-fallback,
body.ylio-satellite-home .sat-loyalty-code-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: center;
}

body.ylio-satellite-home .sat-loyalty-code-fallback {
  color: #111827;
  font-size: clamp(24px, 8vw, 54px);
  line-height: 1.05;
}

body.ylio-satellite-home .sat-loyalty-code-number {
  margin-top: 12px;
  color: var(--ylio-text);
  font-size: clamp(16px, 4vw, 24px);
  letter-spacing: 0;
}

body.ylio-satellite-home .sat-loyalty-code-dialog:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: calc(16px + var(--ylio-safe-top)) calc(16px + var(--ylio-safe-right)) calc(16px + var(--ylio-safe-bottom)) calc(16px + var(--ylio-safe-left));
}

body.ylio-satellite-home .sat-loyalty-code-dialog:fullscreen .sat-loyalty-code-stage {
  min-height: 0;
}

body.ylio-satellite-home .sat-loyalty-code-dialog:fullscreen .sat-loyalty-qr-render {
  width: min(72vh, 82vw);
  height: min(72vh, 82vw);
}

/* Ylio Satellite install ---------------------------------------------------
   Install view keeps the action path visible on mobile and turns into a
   polished two-column device story once width and height can support it.
   ---------------------------------------------------------------------- */
body.ylio-satellite-install {
  display: grid;
  align-items: start;
  justify-items: center;
  padding: calc(var(--ylio-sat-page-y) + var(--ylio-safe-top)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-right)) calc(var(--ylio-sat-page-y) + var(--ylio-safe-bottom)) calc(var(--ylio-sat-page-x) + var(--ylio-safe-left));
}

body.ylio-satellite-install .shell {
  width: min(var(--ylio-sat-install-max), 100%);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ylio-surface) 92%, transparent);
  box-shadow: var(--ylio-shadow-strong);
}

body.ylio-satellite-install .shell.invalid {
  max-width: 620px;
  text-align: center;
  padding: var(--ylio-sat-install-panel-pad);
}

body.ylio-satellite-install .hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: var(--ylio-sat-install-hero-min);
}

body.ylio-satellite-install .panel,
body.ylio-satellite-install .device {
  padding: var(--ylio-sat-install-panel-pad);
}

body.ylio-satellite-install .brand {
  height: var(--ylio-sat-brand-height);
  width: auto;
  max-width: var(--ylio-sat-brand-max);
  object-fit: contain;
  margin-bottom: 28px;
}

body.ylio-satellite-install .install-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-bottom: 18px;
}

body.ylio-satellite-install .install-head .brand {
  flex: 0 1 var(--ylio-sat-brand-max);
  margin-bottom: 0;
}

body.ylio-satellite-install .install-head .ylio-theme-toggle {
  flex: 0 0 auto;
}

body.ylio-satellite-install h1 {
  font-size: var(--ylio-sat-install-title-size);
  line-height: var(--ylio-sat-install-title-line);
}

body.ylio-satellite-install p {
  color: var(--ylio-muted);
  line-height: 1.65;
}

body.ylio-satellite-install .lead {
  font-size: var(--ylio-sat-install-lead-size);
  max-width: 570px;
}

body.ylio-satellite-install .secondary {
  background: var(--ylio-surface);
  color: var(--ylio-text);
}

body.ylio-satellite-install .actions {
  margin: 28px 0;
}

body.ylio-satellite-install .actions .btn {
  flex: 1 1 100%;
}

body.ylio-satellite-install .ghost {
  background: var(--ylio-green-soft);
  color: var(--ylio-green);
  border-color: color-mix(in srgb, var(--ylio-green) 24%, transparent);
}

body.ylio-satellite-install .steps {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

body.ylio-satellite-install .step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  border: 1px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  padding: 14px;
}

body.ylio-satellite-install .num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ylio-green-soft);
  color: var(--ylio-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 0 0 auto;
}

body.ylio-satellite-install .step strong {
  display: block;
  color: var(--ylio-text);
  font-size: 14px;
  line-height: 1.28;
}

body.ylio-satellite-install .step span {
  display: block;
  color: var(--ylio-muted);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.45;
}

body.ylio-satellite-install .device {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ylio-sat-install-device-pad);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ylio-text) 48%, #061928 52%), #061928);
  color: #fff;
}

body.ylio-satellite-install .sat-card {
  width: min(380px, 100%);
  min-width: 0;
  border-radius: 8px;
  background: #fff;
  padding: var(--ylio-sat-install-card-pad);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
  color: #172B42;
}

body.ylio-satellite-install .sat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

body.ylio-satellite-install .sat-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffefe9, #e7fbfb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 950;
  color: #0B3A66;
  flex: 0 0 auto;
}

body.ylio-satellite-install .status {
  max-width: 150px;
  font-size: 12px;
  line-height: 1.12;
  font-weight: 900;
  color: #109866;
  background: #e9fbf2;
  border-radius: 999px;
  padding: 7px 10px;
  text-align: center;
  overflow-wrap: anywhere;
}

body.ylio-satellite-install .screen {
  border-radius: 8px;
  background: linear-gradient(145deg, #f8fbff, #fff7f2);
  border: 1px solid #e8edf3;
  padding: var(--ylio-sat-install-card-pad);
  text-align: center;
}

body.ylio-satellite-install .orb {
  margin: 0 auto 18px;
  width: var(--ylio-sat-install-orb-size);
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#18AEB8, #F0C74A, #D4654A, #18AEB8);
  padding: 12px;
}

body.ylio-satellite-install .orb-inner {
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

body.ylio-satellite-install .orb strong {
  font-size: 44px;
  color: #0B3A66;
  line-height: 1;
}

body.ylio-satellite-install .orb span {
  font-size: 11px;
  color: #657387;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

body.ylio-satellite-install .sat-screen-title {
  margin: 0;
  color: #0B3A66;
  line-height: 1.15;
  letter-spacing: 0;
}

body.ylio-satellite-install .sat-screen-copy {
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
  color: #657387;
}

body.ylio-satellite-install .tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

body.ylio-satellite-install .tile {
  min-width: 0;
  background: #fff;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  padding: 12px;
  text-align: left;
}

body.ylio-satellite-install .tile b {
  font-size: 13px;
  color: #0B3A66;
}

body.ylio-satellite-install .tile small {
  display: block;
  color: #657387;
  margin-top: 3px;
  line-height: 1.35;
}

body.ylio-satellite-install .notice,
body.ylio-satellite-install .manual {
  border: 1px solid var(--ylio-border-strong);
  background: color-mix(in srgb, var(--ylio-accent) 7%, var(--ylio-surface));
  color: var(--ylio-text-soft);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  margin-top: 18px;
}

body.ylio-satellite-install .manual {
  display: none;
  border-style: dashed;
}

body.ylio-satellite-install .activation-form {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  max-width: 420px;
}

body.ylio-satellite-install .activation-form .btn {
  width: 100%;
}

body.ylio-satellite-install .code-input {
  width: 100%;
  height: 58px;
  border: 2px solid var(--ylio-border);
  border-radius: 8px;
  background: var(--ylio-surface);
  color: var(--ylio-text);
  font: 900 24px/1 "Poppins", Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  letter-spacing: 0;
}

body.ylio-satellite-install .code-input:focus {
  outline: none;
  border-color: var(--ylio-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ylio-accent) 14%, transparent);
}

body.ylio-satellite-install .activation-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}

body.ylio-satellite-install .activation-error {
  min-height: 18px;
  color: #B42318;
  font-size: 13px;
  font-weight: 800;
}

/* Ylio Satellite BP1 - 480px: large phone / compact portrait.
   Opens the card rhythm and allows dashboard metrics to breathe in two cols. */
@media (min-width: 480px) {
  body.ylio-satellite-entry,
  body.ylio-satellite-install,
  body.ylio-satellite-home {
    --ylio-sat-page-x: 18px;
    --ylio-sat-page-y: 18px;
    --ylio-sat-entry-card-pad: 28px;
    --ylio-sat-entry-logo-width: 162px;
    --ylio-sat-entry-title-size: 32px;
    --ylio-sat-brand-height: 32px;
    --ylio-sat-reseller-logo-height: 44px;
    --ylio-sat-brand-max: 176px;
    --ylio-sat-home-wrap-top: 22px;
    --ylio-sat-home-title-size: 36px;
    --ylio-sat-home-lead-size: 16px;
    --ylio-sat-home-panel-pad: 18px;
    --ylio-sat-home-metric-size: 30px;
    --ylio-sat-install-title-size: 38px;
    --ylio-sat-install-lead-size: 17px;
    --ylio-sat-install-panel-pad: 26px;
    --ylio-sat-install-device-pad: 20px;
    --ylio-sat-install-card-pad: 20px;
    --ylio-sat-install-orb-size: 148px;
  }

  body.ylio-satellite-entry .btn {
    width: auto;
  }

  body.ylio-satellite-home .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ylio-satellite-home .sat-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ylio-satellite-home .sat-form-grid .wide {
    grid-column: 1 / -1;
  }
}

/* Ylio Satellite BP2 - 640px: tablet portrait.
   Restores text labels in the header and starts side tags without overflow. */
@media (min-width: 640px) {
  body.ylio-satellite-entry,
  body.ylio-satellite-install,
  body.ylio-satellite-home {
    --ylio-sat-page-x: 22px;
    --ylio-sat-page-y: 22px;
    --ylio-sat-entry-card-pad: 34px;
    --ylio-sat-entry-logo-width: 176px;
    --ylio-sat-entry-title-size: 34px;
    --ylio-sat-brand-height: 36px;
    --ylio-sat-reseller-logo-height: 46px;
    --ylio-sat-brand-max: 198px;
    --ylio-sat-home-top-y: 12px;
    --ylio-sat-home-title-size: 40px;
    --ylio-sat-home-panel-pad: 18px;
    --ylio-sat-home-grid-gap: 14px;
    --ylio-sat-install-title-size: 44px;
    --ylio-sat-install-panel-pad: 30px;
    --ylio-sat-install-device-pad: 24px;
    --ylio-sat-install-card-pad: 22px;
    --ylio-sat-install-orb-size: 164px;
  }

  body.ylio-satellite-home .item {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 124px);
    align-items: start;
  }

  body.ylio-satellite-home .sat-loyalty-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  body.ylio-satellite-home .sat-task-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  body.ylio-satellite-home .sat-task-card {
    grid-template-columns: 44px minmax(0, 1fr) minmax(88px, auto);
  }

  body.ylio-satellite-home .sat-task-scope {
    grid-column: auto;
    justify-self: end;
    align-self: center;
  }

  body.ylio-satellite-home .tag {
    width: 100%;
    justify-self: end;
  }

  body.ylio-satellite-install .actions .btn {
    flex: 0 1 auto;
  }

  body.ylio-satellite-install .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ylio Satellite BP3 - 900px: tablet landscape / small desktop.
   Hero and content become two-column, while install earns its device panel. */
@media (min-width: 900px) {
  body.ylio-satellite-entry,
  body.ylio-satellite-install,
  body.ylio-satellite-home {
    --ylio-sat-page-x: 28px;
    --ylio-sat-page-y: 24px;
    --ylio-sat-entry-card-pad: 42px;
    --ylio-sat-home-wrap-top: 28px;
    --ylio-sat-home-hero-gap: 24px;
    --ylio-sat-home-title-size: 48px;
    --ylio-sat-home-lead-size: 17px;
    --ylio-sat-home-panel-pad: 20px;
    --ylio-sat-install-title-size: 52px;
    --ylio-sat-install-title-line: .98;
    --ylio-sat-install-lead-size: 18px;
    --ylio-sat-install-panel-pad: 34px;
    --ylio-sat-install-device-pad: 30px;
    --ylio-sat-install-card-pad: 24px;
    --ylio-sat-install-orb-size: 172px;
    --ylio-sat-install-hero-min: 600px;
  }

  body.ylio-satellite-home .hero {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 310px);
  }

  body.ylio-satellite-home .metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.ylio-satellite-home .grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
    gap: 16px;
  }

  body.ylio-satellite-install {
    align-items: center;
  }

  body.ylio-satellite-install .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  }

  body.ylio-satellite-home .text-btn {
    width: auto;
    padding: 0 12px;
  }

  body.ylio-satellite-home .text-btn span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: nowrap;
  }
}

/* Ylio Satellite BP4 - 1180px: kiosk / desktop comfort.
   Raises the sensory scale without losing the dense operational scan. */
@media (min-width: 1180px) {
  body.ylio-satellite-entry,
  body.ylio-satellite-install,
  body.ylio-satellite-home {
    --ylio-sat-page-x: 32px;
    --ylio-sat-brand-height: 40px;
    --ylio-sat-reseller-logo-height: 48px;
    --ylio-sat-brand-max: 220px;
    --ylio-sat-home-title-size: 54px;
    --ylio-sat-home-lead-size: 18px;
    --ylio-sat-home-panel-pad: 22px;
    --ylio-sat-home-grid-gap: 16px;
    --ylio-sat-home-metric-size: 32px;
    --ylio-sat-install-max: 1120px;
    --ylio-sat-install-title-size: 58px;
    --ylio-sat-install-lead-size: 19px;
    --ylio-sat-install-panel-pad: 40px;
    --ylio-sat-install-device-pad: 38px;
    --ylio-sat-install-hero-min: 620px;
  }

  body.ylio-satellite-home .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }
}

/* Ylio Satellite BP5 - 1440px: wide desktop / presentation surface.
   Adds just enough air for premium perception while keeping content anchored. */
@media (min-width: 1440px) {
  body.ylio-satellite-entry,
  body.ylio-satellite-install,
  body.ylio-satellite-home {
    --ylio-sat-home-max: 1220px;
    --ylio-sat-home-title-size: 58px;
    --ylio-sat-home-panel-pad: 24px;
    --ylio-sat-home-grid-gap: 18px;
    --ylio-sat-install-max: 1180px;
    --ylio-sat-install-title-size: 62px;
    --ylio-sat-install-panel-pad: 44px;
    --ylio-sat-install-device-pad: 44px;
    --ylio-sat-install-orb-size: 180px;
  }
}

/* Touch calendar night pass.
   The agenda module ships many inline and module-owned colors, so this layer is
   intentionally loaded last and scoped to the calendar page only. */
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar,
body.dark-mode.famylio-touch.bo-page-calendar {
  --fam-calendar-canvas: #020B14;
  --fam-calendar-canvas-2: #03111F;
  --fam-calendar-surface: #041A2D;
  --fam-calendar-surface-2: #05233C;
  --fam-calendar-panel: #062B49;
  --fam-calendar-panel-2: #08243A;
  --fam-calendar-accent: #0061AA;
  --fam-calendar-accent-hover: #004D86;
  --fam-calendar-accent-deep: #003B68;
  --fam-calendar-accent-soft: #8AC8F7;
  --fam-calendar-border: rgba(138, 200, 247, .18);
  --fam-calendar-border-strong: rgba(138, 200, 247, .34);
  --fam-calendar-glow: rgba(0, 97, 170, .26);
  --terra: var(--fam-calendar-accent);
  --terra-soft: var(--fam-calendar-accent-soft);
  --terra-glow: rgba(0, 97, 170, .18);
  --olive: var(--fam-calendar-accent);
  --sage: var(--fam-calendar-accent-soft);
  --bo-green: var(--fam-calendar-accent);
  background:
    radial-gradient(circle at 16% -10%, rgba(0, 97, 170, .16), transparent 340px),
    radial-gradient(circle at 90% 2%, rgba(0, 59, 104, .18), transparent 420px),
    linear-gradient(180deg, var(--fam-calendar-canvas) 0%, var(--fam-calendar-canvas-2) 54%, #020910 100%) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.main, .page-content, #main-content),
body.dark-mode.famylio-touch.bo-page-calendar :where(.main, .page-content, #main-content) {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 97, 170, .13), transparent 380px),
    radial-gradient(circle at 94% 8%, rgba(0, 59, 104, .16), transparent 460px),
    linear-gradient(180deg, var(--fam-calendar-canvas) 0%, var(--fam-calendar-canvas-2) 52%, #020910 100%) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .sidebar,
body.dark-mode.famylio-touch.bo-page-calendar .sidebar {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 97, 170, .16), transparent 260px),
    linear-gradient(180deg, #031423 0%, #020B14 100%) !important;
  border-right-color: rgba(138, 200, 247, .14) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar,
body.dark-mode.famylio-touch.bo-page-calendar .topbar {
  min-height: 84px !important;
  align-items: center !important;
  padding-block: 12px !important;
  background: rgba(2, 11, 20, .92) !important;
  border-bottom-color: rgba(138, 200, 247, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-title,
body.dark-mode.famylio-touch.bo-page-calendar .topbar-title {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 56px !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-title h1,
body.dark-mode.famylio-touch.bo-page-calendar .topbar-title h1 {
  margin: 0 !important;
  line-height: 1 !important;
  align-items: center !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-title h1 i,
body.dark-mode.famylio-touch.bo-page-calendar .topbar-title h1 i {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: rgba(0, 97, 170, .20) !important;
  color: var(--fam-calendar-accent-soft) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-title p,
body.dark-mode.famylio-touch.bo-page-calendar .topbar-title p {
  margin: 0 !important;
  line-height: 1.34 !important;
  color: rgba(215, 234, 248, .78) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-actions,
body.dark-mode.famylio-touch.bo-page-calendar .topbar-actions {
  align-items: center !important;
  align-self: center !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.topbar-btn, .topbar-lang-btn, .topbar-call-btn, .topbar-user, .theme-toggle, .agenda-week-nav-btn, .agenda-filter-reset, .agenda-switch-btn, .btn-outline),
body.dark-mode.famylio-touch.bo-page-calendar :where(.topbar-btn, .topbar-lang-btn, .topbar-call-btn, .topbar-user, .theme-toggle, .agenda-week-nav-btn, .agenda-filter-reset, .agenda-switch-btn, .btn-outline) {
  background: rgba(5, 35, 60, .90) !important;
  border-color: var(--fam-calendar-border) !important;
  color: #D7EAF8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 8px 20px rgba(0, 0, 0, .28) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.topbar-btn:hover, .topbar-lang-btn:hover, .topbar-call-btn:hover, .theme-toggle:hover, .agenda-week-nav-btn:hover, .agenda-filter-reset:hover, .agenda-switch-btn:hover, .btn-outline:hover, .sidebar .nav-item:hover),
body.dark-mode.famylio-touch.bo-page-calendar :where(.topbar-btn:hover, .topbar-lang-btn:hover, .topbar-call-btn:hover, .theme-toggle:hover, .agenda-week-nav-btn:hover, .agenda-filter-reset:hover, .agenda-switch-btn:hover, .btn-outline:hover, .sidebar .nav-item:hover) {
  background: rgba(0, 97, 170, .24) !important;
  border-color: var(--fam-calendar-border-strong) !important;
  color: #F4FAFF !important;
  box-shadow: 0 12px 28px rgba(0, 59, 104, .38), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.sidebar .nav-item.active, .mep-item.active, .agenda-switch-btn.active, .btn-terra, .btn-primary-sm, .btn-add, .agenda-day-cell.is-today .agenda-day-count, .agenda-day-cell.is-selected .agenda-day-count),
body.dark-mode.famylio-touch.bo-page-calendar :where(.sidebar .nav-item.active, .mep-item.active, .agenda-switch-btn.active, .btn-terra, .btn-primary-sm, .btn-add, .agenda-day-cell.is-today .agenda-day-count, .agenda-day-cell.is-selected .agenda-day-count) {
  background: linear-gradient(135deg, var(--fam-calendar-accent-deep) 0%, var(--fam-calendar-accent) 100%) !important;
  border-color: rgba(138, 200, 247, .28) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 32px rgba(0, 59, 104, .42) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.btn-terra:hover, .btn-primary-sm:hover, .btn-add:hover, .sidebar .nav-item.active:hover, .agenda-switch-btn.active:hover),
body.dark-mode.famylio-touch.bo-page-calendar :where(.btn-terra:hover, .btn-primary-sm:hover, .btn-add:hover, .sidebar .nav-item.active:hover, .agenda-switch-btn.active:hover) {
  background: linear-gradient(135deg, #002E52 0%, var(--fam-calendar-accent-hover) 100%) !important;
  box-shadow: 0 18px 42px rgba(0, 59, 104, .48) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-filter-shell,
  .agenda-filter-group,
  .agenda-switch,
  .agenda-toolbar,
  .agenda-toolbar--primary,
  .agenda-week-card,
  .agenda-list-card,
  .agenda-month-card,
  .agenda-day-strip-card,
  .agenda-upcoming-wide,
  .agenda-upcoming-panel,
  .agenda-detail-shell,
  .agenda-large-shell
),
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-filter-shell,
  .agenda-filter-group,
  .agenda-switch,
  .agenda-toolbar,
  .agenda-toolbar--primary,
  .agenda-week-card,
  .agenda-list-card,
  .agenda-month-card,
  .agenda-day-strip-card,
  .agenda-upcoming-wide,
  .agenda-upcoming-panel,
  .agenda-detail-shell,
  .agenda-large-shell
) {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 97, 170, .11), transparent 34%),
    linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(3, 17, 31, .98)) !important;
  border-color: var(--fam-calendar-border) !important;
  color: #EAF6FF !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-filter-chip,
  .agenda-day-count,
  .agenda-week-range,
  .agenda-list-day-head,
  .agenda-week-day-head strong,
  .agenda-week-empty,
  .agenda-day-empty,
  .agenda-upcoming-empty,
  .agenda-action-trigger,
  .agenda-action-popover,
  .agenda-action-item,
  .dt-status,
  .tag,
  .badge
),
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-filter-chip,
  .agenda-day-count,
  .agenda-week-range,
  .agenda-list-day-head,
  .agenda-week-day-head strong,
  .agenda-week-empty,
  .agenda-day-empty,
  .agenda-upcoming-empty,
  .agenda-action-trigger,
  .agenda-action-popover,
  .agenda-action-item,
  .dt-status,
  .tag,
  .badge
) {
  background: rgba(4, 26, 45, .86) !important;
  border-color: var(--fam-calendar-border) !important;
  color: #D7EAF8 !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-filter-chip:hover, .agenda-action-trigger:hover, .agenda-action-item:hover, .agenda-list-open:hover, .agenda-week-open:hover),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-filter-chip:hover, .agenda-action-trigger:hover, .agenda-action-item:hover, .agenda-list-open:hover, .agenda-week-open:hover) {
  background: rgba(0, 97, 170, .22) !important;
  border-color: var(--fam-calendar-border-strong) !important;
  color: #F4FAFF !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-week-day,
  .agenda-day-cell,
  .agenda-list-event,
  .agenda-week-event,
  .ev-card,
  .agenda-event-card-inner,
  .agenda-upcoming-mini,
  .agenda-upcoming-wide.is-cards .agenda-upcoming-table tr.upcoming-row
),
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-week-day,
  .agenda-day-cell,
  .agenda-list-event,
  .agenda-week-event,
  .ev-card,
  .agenda-event-card-inner,
  .agenda-upcoming-mini,
  .agenda-upcoming-wide.is-cards .agenda-upcoming-table tr.upcoming-row
) {
  background: linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(5, 35, 60, .98)) !important;
  border-color: rgba(138, 200, 247, .14) !important;
  color: #EAF6FF !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-day-cell.is-today, .agenda-day-cell.is-selected, .agenda-week-day.is-today, .cal-day-cell.drag-over),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-day-cell.is-today, .agenda-day-cell.is-selected, .agenda-week-day.is-today, .cal-day-cell.drag-over) {
  background: linear-gradient(180deg, rgba(0, 97, 170, .24), rgba(3, 59, 104, .20)) !important;
  box-shadow: 0 14px 32px rgba(0, 59, 104, .34), inset 0 0 0 1px rgba(138, 200, 247, .20) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-list-event:hover, .agenda-week-event:hover, .ev-card:hover, .agenda-upcoming-mini:hover, .agenda-day-cell:hover),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-list-event:hover, .agenda-week-event:hover, .ev-card:hover, .agenda-upcoming-mini:hover, .agenda-day-cell:hover) {
  background: linear-gradient(180deg, rgba(8, 50, 84, .98), rgba(4, 26, 45, .98)) !important;
  border-color: var(--fam-calendar-border-strong) !important;
  box-shadow: 0 18px 42px rgba(0, 59, 104, .38), inset 0 0 0 1px rgba(138, 200, 247, .08) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .ch-icon,
  .agenda-filter-heading > span,
  .agenda-day-strip-icon,
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-list-empty-icon,
  .agenda-large-heading > span,
  .agenda-detail-icon
),
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .ch-icon,
  .agenda-filter-heading > span,
  .agenda-day-strip-icon,
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-list-empty-icon,
  .agenda-large-heading > span,
  .agenda-detail-icon
) {
  background: rgba(0, 97, 170, .20) !important;
  border-color: rgba(138, 200, 247, .20) !important;
  color: var(--fam-calendar-accent-soft) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-cat-pill, .agenda-filter-check, .agenda-week-day.is-today .agenda-week-day-head, .agenda-list-day-head strong, .agenda-up-time, .agenda-month-expand),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-cat-pill, .agenda-filter-check, .agenda-week-day.is-today .agenda-week-day-head, .agenda-list-day-head strong, .agenda-up-time, .agenda-month-expand) {
  background: rgba(0, 97, 170, .18) !important;
  color: var(--fam-calendar-accent-soft) !important;
  border-color: rgba(138, 200, 247, .22) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#003B68" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#0061AA" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#047857" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#059669" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#5C6B4F" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="#3D5A2E" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(92,107,79" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(0, 97, 170" i],
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(5,150,105" i],
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(92,107,79" i],
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(0, 97, 170" i],
body.dark-mode.famylio-touch.bo-page-calendar :where(
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-cat-pill,
  .dt-status,
  .agenda-day-event-chip,
  .agenda-filter-chip
)[style*="rgba(5,150,105" i] {
  background: rgba(0, 97, 170, .18) !important;
  color: var(--fam-calendar-accent-soft) !important;
  border-color: rgba(138, 200, 247, .22) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-list-event-title, .agenda-week-event-title, .agenda-week-event-link, .agenda-week-title-action, .agenda-up-title, .agenda-event-title, .agenda-month-head h3, .agenda-list-empty strong),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-list-event-title, .agenda-week-event-title, .agenda-week-event-link, .agenda-week-title-action, .agenda-up-title, .agenda-event-title, .agenda-month-head h3, .agenda-list-empty strong) {
  color: #F1F8FF !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar :where(.agenda-list-event-meta, .agenda-week-event-meta, .agenda-filter-head p, .agenda-filter-heading small, .agenda-month-weekdays div, .agenda-week-day-head span, .agenda-event-time, .agenda-event-location, .agenda-upcoming-mini-body span),
body.dark-mode.famylio-touch.bo-page-calendar :where(.agenda-list-event-meta, .agenda-week-event-meta, .agenda-filter-head p, .agenda-filter-heading small, .agenda-month-weekdays div, .agenda-week-day-head span, .agenda-event-time, .agenda-event-location, .agenda-upcoming-mini-body span) {
  color: rgba(215, 234, 248, .72) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .agenda-gdpr-footer,
body.dark-mode.famylio-touch.bo-page-calendar .agenda-gdpr-footer {
  clear: both !important;
  display: block !important;
  position: static !important;
  z-index: 0 !important;
  width: 100% !important;
  margin: clamp(30px, 4vh, 48px) 0 calc(var(--radio-bar-h, 72px) + 34px) !important;
  padding: 0 !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .agenda-gdpr-footer .gdpr-notice-box,
body.dark-mode.famylio-touch.bo-page-calendar .agenda-gdpr-footer .gdpr-notice-box {
  position: static !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 97, 170, .12), transparent 34%),
    linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(3, 17, 31, .98)) !important;
  border-color: var(--fam-calendar-border) !important;
  color: rgba(215, 234, 248, .88) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  animation: none !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .agenda-gdpr-footer :where(.gdpr-icon, .gdpr-title, strong),
body.dark-mode.famylio-touch.bo-page-calendar .agenda-gdpr-footer :where(.gdpr-icon, .gdpr-title, strong) {
  color: #F1F8FF !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .agenda-gdpr-footer a,
body.dark-mode.famylio-touch.bo-page-calendar .agenda-gdpr-footer a {
  color: var(--fam-calendar-accent-soft) !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .agenda-gdpr-footer .gdpr-dismiss,
body.dark-mode.famylio-touch.bo-page-calendar .agenda-gdpr-footer .gdpr-dismiss {
  color: rgba(215, 234, 248, .70) !important;
}

@media (max-width: 900px) {
  :is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar,
  body.dark-mode.famylio-touch.bo-page-calendar .topbar {
    min-height: 76px !important;
    padding-block: 10px !important;
  }

  :is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-touch.bo-page-calendar .topbar-title,
  body.dark-mode.famylio-touch.bo-page-calendar .topbar-title {
    min-height: 50px !important;
  }
}

/* Backoffice Touch night polish: final layer loaded after legacy backoffice CSS. */
html.dark body.famylio-shell.famylio-touch {
  color-scheme: dark;
  --fam-night-canvas: #020B14;
  --fam-night-canvas-soft: #03111F;
  --fam-night-surface: #041A2D;
  --fam-night-surface-strong: #05233C;
  --fam-night-surface-soft: rgba(20, 29, 32, .92);
  --fam-night-text: #F1F8FF;
  --fam-night-text-soft: #D7EAF8;
  --fam-night-muted: #AFC6D8;
  --fam-night-faint: #6F90A8;
  --fam-night-border: rgba(138, 200, 247, .14);
  --fam-night-border-strong: rgba(0, 97, 170, .38);
  --fam-night-accent: #0061AA;
  --fam-night-accent-soft: #8AC8F7;
  --fam-night-accent-deep: #003B68;
  --bg: #020B14;
  --bg2: #03111F;
  --sidebar-bg: #031423;
  --sidebar-hover: rgba(0, 97, 170, .13);
  --white: #041A2D;
  --cream: #05233C;
  --cloud: rgba(138, 200, 247, .14);
  --navy: #F1F8FF;
  --navy-soft: #D7EAF8;
  --slate: #AFC6D8;
  --slate-light: #6F90A8;
  --terra: #0061AA;
  --terra-soft: #8AC8F7;
  --terra-dark: #003B68;
  --terra-glow: rgba(0, 97, 170, .16);
  --terracotta: #F39A74;
  --terracotta-soft: #F7B79A;
  --terracotta-glow: rgba(243, 154, 116, .15);
  --olive: #0061AA;
  --olive-soft: #8AC8F7;
  --sage: #8AC8F7;
  --sky: #82CBE8;
  --honey: #E6BC5A;
  --peach: #F1A17F;
  --lavender: #BFA8E7;
  --card-shadow: 0 16px 42px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .035);
  --card-hover: 0 22px 58px rgba(0, 0, 0, .42), 0 0 0 1px rgba(0, 97, 170, .16);
  --bo-canvas: #020B14;
  --bo-canvas-soft: #03111F;
  --bo-sidebar: #031423;
  --bo-surface: #041A2D;
  --bo-surface-soft: #05233C;
  --bo-surface-muted: #08243A;
  --bo-border: rgba(138, 200, 247, .14);
  --bo-border-soft: rgba(138, 200, 247, .09);
  --bo-ink: #F1F8FF;
  --bo-text: #D7EAF8;
  --bo-muted: #AFC6D8;
  --bo-faint: #6F90A8;
  --bo-orange: #F39A74;
  --bo-orange-deep: #D97858;
  --bo-green: #0061AA;
  --bo-shadow-card: var(--card-shadow);
  --bo-shadow-hover: var(--card-hover);
  --bo-shadow-float: 0 30px 82px rgba(0, 0, 0, .56), 0 0 0 1px rgba(0, 97, 170, .16);
}

html.dark body.famylio-shell.famylio-touch {
  background: linear-gradient(180deg, #020B14 0%, #03111F 46%, #03111F 100%) !important;
  color: var(--bo-text) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.main, .page-content, #main-content) {
  background:
    repeating-linear-gradient(90deg, rgba(138, 200, 247, .025) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, #020B14 0%, #03111F 100%) !important;
  color: var(--bo-text) !important;
}

html.dark body.famylio-shell.famylio-touch .sidebar {
  background: linear-gradient(180deg, #031423 0%, #020B14 100%) !important;
  border-right-color: rgba(138, 200, 247, .10) !important;
  box-shadow: 8px 0 30px rgba(0, 0, 0, .28) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.topbar, .bottom-player, .radio-player, .player-bar) {
  background: rgba(3, 17, 31, .92) !important;
  border-color: rgba(138, 200, 247, .10) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.brand-icon-square, .nav-logo-img) {
  background: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.brand-icon-square img, .nav-logo-img, .logo-section img) {
  filter: none !important;
  opacity: 1 !important;
}

html.dark body.famylio-shell.famylio-touch :where(.family-selector, .sidebar-footer, .mep-manage) {
  background: rgba(20, 29, 32, .78) !important;
  border-color: rgba(138, 200, 247, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.sidebar .nav-item, .sidebar-more-btn, .mep-item) {
  color: var(--bo-text) !important;
  border-color: transparent !important;
}

html.dark body.famylio-shell.famylio-touch :where(.sidebar .nav-item:hover, .sidebar-more-btn:hover, .mep-item:hover) {
  background: rgba(0, 97, 170, .11) !important;
  color: var(--bo-ink) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.sidebar .nav-item.active, .sidebar .nav-item.is-active, .sidebar-more-btn.has-active, .mep-item.active) {
  background: linear-gradient(135deg, #003B68 0%, #0061AA 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(138, 200, 247, .30) !important;
  box-shadow: 0 12px 28px rgba(0, 97, 170, .20) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.topbar-btn, .topbar-lang-btn, .topbar-call-btn, .topbar-user, .theme-toggle, .month-nav button, .btn-secondary, .btn-outline, .icon-btn, .tab-btn, .chip, .pill, .badge) {
  background: rgba(20, 29, 32, .90) !important;
  color: var(--bo-text) !important;
  border: 1px solid rgba(138, 200, 247, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 8px 18px rgba(0, 0, 0, .20) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.topbar-btn:hover, .topbar-lang-btn:hover, .topbar-call-btn:hover, .theme-toggle:hover, .month-nav button:hover, .btn-secondary:hover, .btn-outline:hover, .icon-btn:hover) {
  background: rgba(0, 97, 170, .16) !important;
  border-color: rgba(138, 200, 247, .32) !important;
  color: var(--bo-ink) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.btn-terra, .btn-primary, .btn-primary-sm, .btn-add, .primary, .fab-scan, .agenda-sync-action, #btnSubmitModal) {
  background: linear-gradient(135deg, #003B68 0%, #0061AA 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(138, 200, 247, .28) !important;
  box-shadow: 0 14px 30px rgba(0, 97, 170, .20) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.btn-terra:hover, .btn-primary:hover, .btn-primary-sm:hover, .btn-add:hover, .primary:hover, .fab-scan:hover, .agenda-sync-action:hover, #btnSubmitModal:hover) {
  background: linear-gradient(135deg, #004D86 0%, #0061AA 100%) !important;
  box-shadow: 0 18px 40px rgba(0, 97, 170, .25) !important;
}

html.dark body.famylio-shell.famylio-touch :where(
  .card, .stat-card, .dashboard-card, .dash-bento-card, .dash-core-shortcuts,
  .module-card, .widget-card, .app-card, .contact-card, .setting-card,
  .agenda-month-card, .agenda-day-panel, .agenda-upcoming-wide,
  .agenda-upcoming-panel, .agenda-week-card, .agenda-list-card,
  .agenda-filter-shell, .agenda-filter-group, .agenda-toolbar--primary,
  .agenda-day-strip-card, .agenda-sync-shell, .agenda-sync-provider-card,
  .agenda-sync-resource, .agenda-alert-card, .agenda-detail-shell,
  .agenda-large-shell, .modal, .modal-content, .dropdown, .dropdown-menu,
  .notif-dropdown, .quickadd-dropdown, .tu-dropdown
) {
  background: linear-gradient(180deg, rgba(20, 29, 32, .98), rgba(3, 17, 31, .99)) !important;
  border-color: rgba(138, 200, 247, .11) !important;
  color: var(--bo-text) !important;
  box-shadow: var(--card-shadow) !important;
}

html.dark body.famylio-shell.famylio-touch :where(
  .agenda-day-cell, .agenda-list-event, .agenda-week-event, .agenda-upcoming-mini,
  .agenda-filter-chip, .agenda-switch, .agenda-switch-btn, .agenda-day-count,
  .agenda-alert-row, .agenda-alert-presets button, .agenda-action-trigger,
  .agenda-action-popover, .agenda-action-item
) {
  background: rgba(11, 17, 19, .70) !important;
  border-color: rgba(138, 200, 247, .10) !important;
  color: var(--bo-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

html.dark body.famylio-shell.famylio-touch :where(.agenda-switch-btn.active, .agenda-modal-tab.is-active, .agenda-filter-chip:not(.inactive)) {
  background: rgba(0, 97, 170, .15) !important;
  border-color: rgba(138, 200, 247, .26) !important;
  color: var(--terra-soft) !important;
}

html.dark body.bo-page-calendar #calModal,
html.dark body.bo-page-calendar #moveModal,
html.dark body.bo-page-calendar #seriesScopeModal,
html.dark body.bo-page-calendar #icsImportModal,
html.dark body.bo-page-calendar #upDeleteModal,
html.dark body.bo-page-calendar #dayDeleteModal,
html.dark body.bo-page-calendar #shareModal,
html.dark body.bo-page-calendar .agenda-large-modal,
html.dark body.bo-page-calendar .agenda-detail-modal,
html.dark body.bo-page-calendar .agenda-sync-modal {
  background: rgba(4, 8, 9, .76) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

html.dark body.bo-page-calendar #calModalInner,
html.dark body.bo-page-calendar #moveModal > div,
html.dark body.bo-page-calendar #seriesScopeModal > div,
html.dark body.bo-page-calendar #icsImportModal > div,
html.dark body.bo-page-calendar #upDeleteModal > div,
html.dark body.bo-page-calendar #dayDeleteModal > div,
html.dark body.bo-page-calendar #shareModal > div {
  background: linear-gradient(180deg, #062B49 0%, #03111F 100%) !important;
  border: 1px solid rgba(138, 200, 247, .12) !important;
  color: var(--bo-text) !important;
  box-shadow: 0 34px 96px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html.dark body.bo-page-calendar #calModalInner::-webkit-scrollbar {
  width: 8px;
}

html.dark body.bo-page-calendar #calModalInner::-webkit-scrollbar-thumb {
  background: rgba(138, 200, 247, .24);
  border-radius: 999px;
}

html.dark body.bo-page-calendar .agenda-modal-tabs {
  background: rgba(2, 11, 20, .64) !important;
  border: 1px solid rgba(138, 200, 247, .10) !important;
  border-radius: 16px !important;
  padding: 6px !important;
}

html.dark body.bo-page-calendar .agenda-modal-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--bo-muted) !important;
}

html.dark body.bo-page-calendar .agenda-modal-tab:hover {
  background: rgba(0, 97, 170, .10) !important;
  border-color: rgba(138, 200, 247, .18) !important;
}

html.dark body.bo-page-calendar .agenda-modal-tab span,
html.dark body.bo-page-calendar :where(#modalTitle, .agenda-alert-head strong, .agenda-filter-heading, .agenda-up-title, .agenda-event-title) {
  color: var(--bo-ink) !important;
}

html.dark body.bo-page-calendar .agenda-modal-tab small,
html.dark body.bo-page-calendar :where(#modalSubtitle, .agenda-alert-head span, .agenda-alert-empty, .agenda-filter-head p, .agenda-up-source, .agenda-event-time, .agenda-event-location) {
  color: var(--bo-muted) !important;
}

html.dark body.famylio-shell.famylio-touch :where(input, textarea, select, .form-input, .form-select, .search-input),
html.dark body.bo-page-calendar #calForm :where(input:not([type="color"]), textarea, select),
html.dark body.bo-page-calendar #moveForm :where(input:not([type="color"]), textarea, select) {
  background: #020B14 !important;
  color: var(--bo-ink) !important;
  border-color: rgba(138, 200, 247, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.dark body.famylio-shell.famylio-touch :where(input, textarea, select, .form-input, .form-select, .search-input):focus,
html.dark body.bo-page-calendar #calForm :where(input:not([type="color"]), textarea, select):focus,
html.dark body.bo-page-calendar #moveForm :where(input:not([type="color"]), textarea, select):focus {
  border-color: rgba(138, 200, 247, .62) !important;
  box-shadow: 0 0 0 3px rgba(0, 97, 170, .14) !important;
  outline: 0 !important;
}

html.dark body.famylio-shell.famylio-touch :where(input, textarea)::placeholder {
  color: rgba(168, 184, 177, .70) !important;
}

html.dark body.bo-page-calendar #btnCloseModal {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--bo-muted) !important;
  border: 1px solid rgba(138, 200, 247, .10) !important;
}

html.dark body.bo-page-calendar #btnCloseModal:hover {
  background: rgba(243, 154, 116, .13) !important;
  color: #F7B79A !important;
}

html.dark body.bo-page-calendar #modalActions {
  border-top-color: rgba(138, 200, 247, .10) !important;
}

html.dark body.bo-page-calendar :where(.calendar-toast, .bo-notif-toast, .bo-flash, .flash) {
  background: rgba(20, 29, 32, .96) !important;
  color: var(--bo-ink) !important;
  border-color: rgba(138, 200, 247, .14) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .36) !important;
}

html.dark body.bo-page-calendar .calendar-toast-error {
  background: rgba(82, 28, 29, .96) !important;
  color: #FFD8D4 !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

html.dark body.bo-page-calendar .calendar-toast-success {
  background: rgba(0, 59, 104, .96) !important;
  color: #D7EAF8 !important;
  border-color: rgba(0, 97, 170, .44) !important;
}

/* Agenda modal: final night polish, loaded with higher specificity than late responsive CSS. */
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModal {
  padding: clamp(16px, 3vw, 34px) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModalInner {
  width: min(720px, calc(100vw - 32px)) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 97, 170, .10), transparent 34%),
    linear-gradient(180deg, #062B49 0%, #03111F 100%) !important;
  overflow: auto !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModalInner > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 24px 28px 12px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModalInner > div:first-child > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModalInner > div:first-child > div:first-child > div:first-child {
  background: linear-gradient(135deg, rgba(0, 97, 170, .20), rgba(243, 154, 116, .13)) !important;
  color: #8AC8F7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .22) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #btnCloseModal {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  margin-left: auto !important;
  border-radius: 12px !important;
  background: rgba(2, 11, 20, .78) !important;
  color: #D7EAF8 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm {
  padding: 12px 28px 28px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  background: rgba(2, 11, 20, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-tab {
  min-height: 64px !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-tab.is-active {
  background: linear-gradient(180deg, rgba(0, 97, 170, .20), rgba(0, 97, 170, .11)) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-tab.is-active span {
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm label {
  color: var(--bo-text) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm label i,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #moveForm label i {
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm :where(input[type="text"], input[type="date"], input[type="time"], input[type="number"], textarea, select),
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #moveForm :where(input[type="date"], input[type="time"], input[type="text"], textarea, select) {
  min-height: 44px !important;
  width: 100% !important;
  border-radius: 12px !important;
  padding: 10px 13px !important;
  background: rgba(6, 11, 13, .92) !important;
  border: 1px solid rgba(138, 200, 247, .16) !important;
  color: #F1F8FF !important;
  box-sizing: border-box !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm textarea {
  min-height: 96px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm input[type="color"] {
  height: 44px !important;
  border-radius: 12px !important;
  border-color: rgba(138, 200, 247, .18) !important;
  background: rgba(6, 11, 13, .92) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm input[type="checkbox"] {
  accent-color: #0061AA !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-card {
  padding: 15px !important;
  background:
    linear-gradient(180deg, rgba(6, 43, 73, .92), rgba(3, 17, 31, .94)) !important;
  border-color: rgba(138, 200, 247, .13) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-add,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-presets button,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-remove {
  background: rgba(0, 97, 170, .10) !important;
  border-color: rgba(138, 200, 247, .20) !important;
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-row {
  background: rgba(7, 12, 14, .82) !important;
  border-color: rgba(138, 200, 247, .12) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-alert-check {
  background: rgba(138, 200, 247, .07) !important;
  color: var(--bo-text) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .mcl {
  background: rgba(7, 12, 14, .70) !important;
  border-color: rgba(138, 200, 247, .12) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .mcl:hover,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .mcl.checked {
  background: rgba(0, 97, 170, .12) !important;
  border-color: rgba(138, 200, 247, .30) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .mcl span {
  color: var(--bo-ink) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #modalActions {
  margin-top: 4px !important;
  padding-top: 18px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar #btnCancelModal,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #btnCancelMove {
  background: rgba(138, 200, 247, .07) !important;
  color: var(--bo-text) !important;
  border-color: rgba(138, 200, 247, .12) !important;
}

@media (max-width: 760px) {
  html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calModalInner {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
  }

  html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-tabs {
    grid-template-columns: 1fr !important;
  }

  html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-grid--time,
  html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-modal-grid--source {
    grid-template-columns: 1fr !important;
  }
}

/* Calendar blue lock: must stay after the generic touch night layer. */
html.dark body.famylio-shell.famylio-touch.bo-page-calendar {
  --fam-night-canvas: #020B14;
  --fam-night-canvas-soft: #03111F;
  --fam-night-surface: #041A2D;
  --fam-night-surface-strong: #05233C;
  --fam-night-surface-soft: rgba(5, 35, 60, .94);
  --fam-night-text: #F1F8FF;
  --fam-night-text-soft: #D7EAF8;
  --fam-night-muted: rgba(215, 234, 248, .72);
  --fam-night-border: rgba(138, 200, 247, .18);
  --fam-night-border-strong: rgba(138, 200, 247, .34);
  --fam-night-accent: #0061AA;
  --fam-night-accent-soft: #8AC8F7;
  --fam-night-accent-deep: #003B68;
  --bg: #020B14;
  --bg2: #03111F;
  --sidebar-bg: #031423;
  --sidebar-hover: rgba(0, 97, 170, .18);
  --white: #041A2D;
  --cream: #05233C;
  --cloud: rgba(138, 200, 247, .18);
  --navy: #F1F8FF;
  --slate: rgba(215, 234, 248, .72);
  --slate-light: rgba(215, 234, 248, .54);
  --terra: #0061AA;
  --terra-soft: #8AC8F7;
  --terra-dark: #003B68;
  --terra-glow: rgba(0, 97, 170, .18);
  --olive: #0061AA;
  --olive-soft: #8AC8F7;
  --sage: #8AC8F7;
  --bo-green: #0061AA;
  --bo-ink: #F1F8FF;
  --bo-text: #D7EAF8;
  --bo-muted: rgba(215, 234, 248, .72);
  --bo-border: rgba(138, 200, 247, .18);
  --card-shadow: 0 18px 48px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .035);
  --card-hover: 0 24px 62px rgba(0, 0, 0, .48), 0 0 0 1px rgba(138, 200, 247, .18);
  background:
    radial-gradient(circle at 16% -8%, rgba(0, 97, 170, .16), transparent 340px),
    radial-gradient(circle at 92% 4%, rgba(0, 59, 104, .18), transparent 420px),
    linear-gradient(180deg, #020B14 0%, #03111F 54%, #020910 100%) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(.main, .page-content, #main-content) {
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 97, 170, .13), transparent 380px),
    radial-gradient(circle at 96% 6%, rgba(0, 59, 104, .16), transparent 460px),
    linear-gradient(180deg, #020B14 0%, #03111F 52%, #020910 100%) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .sidebar {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 97, 170, .14), transparent 260px),
    linear-gradient(180deg, #031423 0%, #020B14 100%) !important;
  border-right-color: rgba(138, 200, 247, .14) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar {
  min-height: 84px !important;
  align-items: center !important;
  padding-block: 12px !important;
  background: rgba(2, 11, 20, .93) !important;
  border-bottom-color: rgba(138, 200, 247, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar-title {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 56px !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar-title h1 {
  margin: 0 !important;
  line-height: 1 !important;
  align-items: center !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar-title h1 i {
  background: rgba(0, 97, 170, .20) !important;
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar-title p {
  margin: 0 !important;
  line-height: 1.34 !important;
  color: rgba(215, 234, 248, .78) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .topbar-actions {
  align-items: center !important;
  align-self: center !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .family-selector,
  .sidebar-footer,
  .mep-manage,
  .bo-company-footer,
  .bottom-player,
  .radio-player,
  .player-bar,
  .grp,
  .grp-inner
) {
  background: linear-gradient(180deg, rgba(4, 26, 45, .94), rgba(2, 11, 20, .96)) !important;
  border-color: rgba(138, 200, 247, .16) !important;
  color: #D7EAF8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 26px rgba(0, 0, 0, .28) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .family-selector:hover,
  .sidebar-footer:hover,
  .mep-manage:hover,
  .sidebar-more-btn:hover
) {
  background: rgba(0, 97, 170, .20) !important;
  border-color: rgba(138, 200, 247, .30) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .topbar-btn,
  .topbar-lang-btn,
  .topbar-call-btn,
  .topbar-user,
  .theme-toggle,
  .agenda-week-nav-btn,
  .agenda-filter-reset,
  .agenda-switch-btn,
  .btn-outline,
  .agenda-action-trigger,
  .agenda-action-popover,
  .agenda-action-item,
  .agenda-filter-chip,
  .agenda-day-count,
  .agenda-week-range,
  .agenda-list-day-head,
  .agenda-week-day-head strong,
  .dt-status,
  .tag,
  .badge,
  .mcl,
  .agenda-alert-check
) {
  background: rgba(4, 26, 45, .88) !important;
  border-color: rgba(138, 200, 247, .18) !important;
  color: #D7EAF8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 20px rgba(0, 0, 0, .28) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .topbar-btn:hover,
  .topbar-lang-btn:hover,
  .topbar-call-btn:hover,
  .theme-toggle:hover,
  .agenda-week-nav-btn:hover,
  .agenda-filter-reset:hover,
  .agenda-switch-btn:hover,
  .btn-outline:hover,
  .sidebar .nav-item:hover,
  .sidebar-more-btn:hover,
  .mep-item:hover,
  .agenda-filter-chip:hover,
  .agenda-action-trigger:hover,
  .agenda-action-item:hover,
  .mcl:hover
) {
  background: rgba(0, 97, 170, .24) !important;
  border-color: rgba(138, 200, 247, .36) !important;
  color: #F4FAFF !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .sidebar .nav-item.active,
  .sidebar .nav-item.is-active,
  .sidebar-more-btn.has-active,
  .mep-item.active,
  .agenda-switch-btn.active,
  .agenda-modal-tab.is-active,
  .agenda-filter-chip:not(.inactive),
  .btn-terra,
  .btn-primary,
  .btn-primary-sm,
  .btn-add,
  .primary,
  .fab-scan,
  .agenda-sync-action,
  #btnSubmitModal,
  .mcl.checked
) {
  background: linear-gradient(135deg, #003B68 0%, #0061AA 100%) !important;
  border-color: rgba(138, 200, 247, .30) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 32px rgba(0, 59, 104, .44) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .btn-terra:hover,
  .btn-primary:hover,
  .btn-primary-sm:hover,
  .btn-add:hover,
  .primary:hover,
  .fab-scan:hover,
  .agenda-sync-action:hover,
  #btnSubmitModal:hover,
  .agenda-switch-btn.active:hover,
  .sidebar .nav-item.active:hover
) {
  background: linear-gradient(135deg, #002E52 0%, #004D86 100%) !important;
  box-shadow: 0 18px 42px rgba(0, 59, 104, .50) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .card,
  .agenda-filter-shell,
  .agenda-filter-group,
  .agenda-switch,
  .agenda-toolbar,
  .agenda-toolbar--primary,
  .agenda-week-card,
  .agenda-list-card,
  .agenda-month-card,
  .agenda-day-strip-card,
  .agenda-upcoming-wide,
  .agenda-upcoming-panel,
  .agenda-sync-shell,
  .agenda-sync-provider-card,
  .agenda-sync-resource,
  .agenda-alert-card,
  .agenda-detail-shell,
  .agenda-large-shell,
  .modal,
  .modal-content
) {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 97, 170, .11), transparent 34%),
    linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(3, 17, 31, .98)) !important;
  border-color: rgba(138, 200, 247, .18) !important;
  color: #EAF6FF !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-week-day,
  .agenda-day-cell,
  .agenda-list-event,
  .agenda-week-event,
  .ev-card,
  .agenda-event-card-inner,
  .agenda-upcoming-mini,
  .agenda-upcoming-wide.is-cards .agenda-upcoming-table tr.upcoming-row
) {
  background: linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(5, 35, 60, .98)) !important;
  border-color: rgba(138, 200, 247, .14) !important;
  color: #EAF6FF !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-day-cell.is-today,
  .agenda-day-cell.is-selected,
  .agenda-week-day.is-today,
  .cal-day-cell.drag-over
) {
  background: linear-gradient(180deg, rgba(0, 97, 170, .24), rgba(3, 59, 104, .20)) !important;
  box-shadow: 0 14px 32px rgba(0, 59, 104, .34), inset 0 0 0 1px rgba(138, 200, 247, .20) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-list-event:hover,
  .agenda-week-event:hover,
  .ev-card:hover,
  .agenda-upcoming-mini:hover,
  .agenda-day-cell:hover
) {
  background: linear-gradient(180deg, rgba(8, 50, 84, .98), rgba(4, 26, 45, .98)) !important;
  border-color: rgba(138, 200, 247, .36) !important;
  box-shadow: 0 18px 42px rgba(0, 59, 104, .40), inset 0 0 0 1px rgba(138, 200, 247, .08) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .ch-icon,
  .agenda-filter-heading > span,
  .agenda-day-strip-icon,
  .agenda-event-icon,
  .agenda-mini-icon,
  .agenda-list-empty-icon,
  .agenda-large-heading > span,
  .agenda-detail-icon
) {
  background: rgba(0, 97, 170, .20) !important;
  border-color: rgba(138, 200, 247, .20) !important;
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-cat-pill,
  .agenda-filter-check,
  .agenda-week-day.is-today .agenda-week-day-head,
  .agenda-list-day-head strong,
  .agenda-up-time,
  .agenda-month-expand
) {
  background: rgba(0, 97, 170, .18) !important;
  color: #8AC8F7 !important;
  border-color: rgba(138, 200, 247, .22) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-list-event-title,
  .agenda-week-event-title,
  .agenda-week-event-link,
  .agenda-week-title-action,
  .agenda-up-title,
  .agenda-event-title,
  .agenda-month-head h3,
  .agenda-list-empty strong,
  #modalTitle,
  .agenda-alert-head strong
) {
  color: #F1F8FF !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(
  .agenda-list-event-meta,
  .agenda-week-event-meta,
  .agenda-filter-head p,
  .agenda-filter-heading small,
  .agenda-month-weekdays div,
  .agenda-week-day-head span,
  .agenda-event-time,
  .agenda-event-location,
  .agenda-upcoming-mini-body span,
  #modalSubtitle,
  .agenda-alert-head span
) {
  color: rgba(215, 234, 248, .72) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(input, textarea, select, .form-input, .form-select, .search-input),
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm :where(input:not([type="color"]), textarea, select),
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #moveForm :where(input:not([type="color"]), textarea, select) {
  background: #020B14 !important;
  color: #F1F8FF !important;
  border-color: rgba(138, 200, 247, .20) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar :where(input, textarea, select, .form-input, .form-select, .search-input):focus,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #calForm :where(input:not([type="color"]), textarea, select):focus,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar #moveForm :where(input:not([type="color"]), textarea, select):focus {
  border-color: rgba(138, 200, 247, .62) !important;
  box-shadow: 0 0 0 3px rgba(0, 97, 170, .18) !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-gdpr-footer {
  clear: both !important;
  display: block !important;
  position: static !important;
  z-index: 0 !important;
  width: 100% !important;
  margin: clamp(30px, 4vh, 48px) 0 calc(var(--radio-bar-h, 72px) + 34px) !important;
  padding: 0 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-gdpr-footer .gdpr-notice-box {
  position: static !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 97, 170, .12), transparent 34%),
    linear-gradient(180deg, rgba(6, 43, 73, .96), rgba(3, 17, 31, .98)) !important;
  border-color: rgba(138, 200, 247, .18) !important;
  color: rgba(215, 234, 248, .88) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  animation: none !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-gdpr-footer :where(.gdpr-icon, .gdpr-title, strong) {
  color: #F1F8FF !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-gdpr-footer a {
  color: #8AC8F7 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .calendar-toast-success {
  background: rgba(0, 59, 104, .96) !important;
  color: #D7EAF8 !important;
  border-color: rgba(138, 200, 247, .44) !important;
}


/* Night tooltips: event previews and participant popovers must stay readable. */
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .ev-tooltip,
html.dark body.famylio-shell.famylio-touch .bo-sidebar-tooltip {
  background:
    linear-gradient(180deg, rgba(20, 29, 32, .98), rgba(8, 13, 15, .98)) !important;
  color: #F6F2EA !important;
  border: 1px solid rgba(138, 200, 247, .24) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  text-shadow: none !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip {
  padding: 11px 13px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}

html.dark body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip::after,
html.dark body.famylio-shell.famylio-touch.bo-page-calendar .ev-tooltip::after {
  border-top-color: #081012 !important;
}

html.dark body.famylio-shell.famylio-touch .bo-sidebar-tooltip::before {
  border-right-color: #081012 !important;
}

/* Calendar tooltip contrast fix.
   The base agenda tooltip uses background:var(--navy); in night, that variable
   can be remapped to a light text color, producing white-on-white previews. */
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip,
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell.famylio-touch.bo-page-calendar .ev-tooltip {
  background-color: #081012 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 97, 170, .16), transparent 58%),
    linear-gradient(180deg, rgba(20, 29, 32, .99), rgba(8, 13, 15, .99)) !important;
  color: #F6F2EA !important;
  -webkit-text-fill-color: #F6F2EA !important;
  border: 1px solid rgba(138, 200, 247, .28) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .52), 0 0 0 1px rgba(0, 97, 170, .14) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip {
  max-width: min(360px, calc(100vw - 28px)) !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  font-weight: 760 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell.famylio-touch.bo-page-calendar .agenda-tooltip::after,
:is(html.dark, html.dark-mode, [data-theme="dark"], html[data-touch-theme="night"]) body.famylio-shell.famylio-touch.bo-page-calendar .ev-tooltip::after {
  border-top-color: #081012 !important;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .22)) !important;
}

/* Global radio player safety.
   Any Famylio page with the bottom player keeps notices and final actions
   scrollable above the player, without forcing each module to invent spacing. */
body.famylio-shell.grp-active,
body.famylio-shell.has-global-radio-player,
body.famylio-shell[data-player-safe="true"] {
  --famylio-player-safe-bottom: max(88px, var(--radio-bar-h, 64px));
}

body.famylio-shell.grp-active :where(main, #main-content, .main, .content, .page-content, .touch-main, .bo-main),
body.famylio-shell.has-global-radio-player :where(main, #main-content, .main, .content, .page-content, .touch-main, .bo-main),
body.famylio-shell[data-player-safe="true"] :where(main, #main-content, .main, .content, .page-content, .touch-main, .bo-main) {
  scroll-padding-bottom: calc(var(--famylio-player-safe-bottom) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

body.famylio-shell.grp-active :where(.gdpr-notice, .gdpr-footer, .gdpr-card, .loyalty-checkout-tip, .module-warning, .module-disable-card, .modal-footer, .app-sheet),
body.famylio-shell.has-global-radio-player :where(.gdpr-notice, .gdpr-footer, .gdpr-card, .loyalty-checkout-tip, .module-warning, .module-disable-card, .modal-footer, .app-sheet),
body.famylio-shell[data-player-safe="true"] :where(.gdpr-notice, .gdpr-footer, .gdpr-card, .loyalty-checkout-tip, .module-warning, .module-disable-card, .modal-footer, .app-sheet) {
  scroll-margin-bottom: calc(var(--famylio-player-safe-bottom) + env(safe-area-inset-bottom, 0px) + 24px) !important;
}

@media (max-width: 760px) {
  body.famylio-shell.grp-active,
  body.famylio-shell.has-global-radio-player,
  body.famylio-shell[data-player-safe="true"] {
    --famylio-player-safe-bottom: max(112px, var(--radio-bar-h, 96px));
  }
}