/* Shared design tokens for the full site. */
:root {
  color-scheme: dark;

  --pipsy-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ─── Typography (landing + dashboard + modulok) — méret / leading / tracking tokenek */
  --pipsy-type-display-landing: clamp(2.75rem, 5.5vw, 4.5rem);
  --pipsy-type-hero-xl: clamp(1.85rem, 4.5vw, 2.75rem);
  --pipsy-type-hero-lg: clamp(1.85rem, 4vw, 2.6rem);
  --pipsy-type-hero-md: clamp(1.85rem, 4vw, 2.4rem);
  --pipsy-type-hero: clamp(1.75rem, 4vw, 2.65rem);
  --pipsy-type-hero-compact: clamp(1.75rem, 4vw, 2.55rem);
  --pipsy-type-profile-title: clamp(1.85rem, 3vw, 2.35rem);
  --pipsy-type-profile-lead: 0.95rem;
  --pipsy-type-h2: clamp(1.85rem, 3.5vw, 2.5rem);
  --pipsy-type-h2-compact: clamp(1.35rem, 2.5vw, 1.75rem);
  --pipsy-type-screen-title: clamp(1.95rem, 3vw, 2.7rem);
  --pipsy-type-h3: 1.1rem;
  --pipsy-type-title: 1.05rem;
  --pipsy-type-title-md: 1.06rem;
  --pipsy-type-title-lg: 1.15rem;
  --pipsy-type-brand-wordmark: 1.1rem;
  --pipsy-type-modal-title: 1.65rem;
  --pipsy-type-stat-value: 1.85rem;
  --pipsy-type-kpi-value: clamp(1.35rem, 2.8vw, 1.85rem);
  --pipsy-type-kpi-hero-value: clamp(1.5rem, 3.2vw, 2.05rem);
  --pipsy-type-lead: 1.02rem;
  --pipsy-type-lead-lg: 1.12rem;
  --pipsy-type-body: 1rem;
  --pipsy-type-body-muted: 0.9375rem;
  --pipsy-type-section-lead: 0.98rem;
  --pipsy-type-body-sm: 0.875rem;
  --pipsy-type-ui: 0.9rem;
  --pipsy-type-compact: 0.88rem;
  --pipsy-type-guidance-sub: 0.84rem;
  --pipsy-type-value-prop: 0.92rem;
  --pipsy-type-caption: 0.8125rem;
  --pipsy-type-helper: 0.78rem;
  --pipsy-type-meta: 0.76rem;
  --pipsy-type-micro: 0.75rem;
  --pipsy-type-overline-size: 0.72rem;
  --pipsy-type-overline-tight: 0.7rem;
  --pipsy-type-label-caps: 0.68rem;
  --pipsy-type-period-label: 0.65rem;
  --pipsy-type-eyebrow: 0.8rem;

  --pipsy-leading-none: 1;
  --pipsy-leading-display: 1.05;
  --pipsy-leading-tight: 1.1;
  --pipsy-leading-snug: 1.12;
  --pipsy-leading-heading: 1.2;
  --pipsy-leading-ui: 1.3;
  --pipsy-leading-normal: 1.5;
  --pipsy-leading-body: 1.6;
  --pipsy-leading-relaxed: 1.62;
  --pipsy-leading-loose: 1.65;

  --pipsy-tracking-tighter: -0.05em;
  --pipsy-tracking-tight: -0.04em;
  --pipsy-tracking-snug: -0.035em;
  --pipsy-tracking-subtle: -0.03em;
  --pipsy-tracking-slight: -0.025em;
  --pipsy-tracking-ui: -0.02em;
  --pipsy-tracking-body: -0.01em;
  --pipsy-tracking-wide: 0.04em;
  --pipsy-tracking-wider: 0.06em;
  --pipsy-tracking-caps: 0.08em;
  --pipsy-tracking-overline: 0.12em;
  --pipsy-tracking-overline-lg: 0.14em;

  --pipsy-focus-ring: 0 0 0 3px rgba(92, 103, 255, 0.28);
  --pipsy-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing — 4px ritmus; layout / kártya / toolbar / űrlap közös nyelve */
  --pipsy-space-0: 0;
  --pipsy-space-1: 0.25rem; /* 4px */
  --pipsy-space-2: 0.5rem; /* 8px */
  --pipsy-space-3: 0.75rem; /* 12px */
  --pipsy-space-4: 1rem; /* 16px */
  --pipsy-space-5: 1.25rem; /* 20px */
  --pipsy-space-6: 1.5rem; /* 24px */
  --pipsy-space-7: 1.75rem; /* 28px */
  --pipsy-space-8: 2rem; /* 32px */
  --pipsy-space-9: 2.5rem; /* 40px */
  --pipsy-space-10: 3rem; /* 48px */
  --pipsy-space-11: 3.5rem; /* 56px */
  --pipsy-space-12: 4rem; /* 64px */
  --pipsy-space-13: 4.5rem; /* 72px */
  --pipsy-space-14: 5rem; /* 80px */
  --pipsy-space-15: 6.25rem; /* 100px */

  --pipsy-space-gutter: clamp(var(--pipsy-space-4), 3vw, var(--pipsy-space-7));
  --pipsy-space-section-y: clamp(var(--pipsy-space-10), 8vw, var(--pipsy-space-15));
  --pipsy-space-section-y-tight: clamp(var(--pipsy-space-8), 5vw, var(--pipsy-space-10));
  --pipsy-space-hero-block-y: clamp(var(--pipsy-space-13), 10vw, var(--pipsy-space-14));
  --pipsy-space-hero-grid-gap: var(--pipsy-space-11);
  --pipsy-space-page-y: clamp(var(--pipsy-space-8), 5vw, var(--pipsy-space-10));
  --pipsy-space-page-y-loose: clamp(var(--pipsy-space-9), 6vw, 5.5rem);

  /* Layout primitives — használd a .container / modul shell-ekben (fluid gutter, max szélesség) */
  --pipsy-container-max: 1280px;
  --pipsy-container-wide: 1400px;
  /* App modul fő tartalom: középre zárt, nem teljes ultrawide (esztétika) */
  --pipsy-app-shell-content-max: 1794px; /* ~1380px + 30% */
  --pipsy-touch-target-min: 2.75rem; /* ~44px — WCAG ajánlás */

  --pipsy-space-stack-sm: var(--pipsy-space-3);
  --pipsy-space-stack-md: var(--pipsy-space-5);
  --pipsy-space-stack-lg: var(--pipsy-space-6);
  --pipsy-space-inset-xs: var(--pipsy-space-2) var(--pipsy-space-3);
  --pipsy-space-inset-sm: var(--pipsy-space-3) var(--pipsy-space-4);
  --pipsy-space-inset-md: var(--pipsy-space-4) var(--pipsy-space-5);
  --pipsy-space-inset-lg: var(--pipsy-space-5) var(--pipsy-space-6);
  --pipsy-space-toolbar-pad: var(--pipsy-space-3) var(--pipsy-space-4);
  --pipsy-space-toolbar-gap: var(--pipsy-space-3);
  --pipsy-space-form-field-gap: var(--pipsy-space-2);
  --pipsy-space-form-stack: var(--pipsy-space-5);

  /* Gombok — prémium SaaS (rétegzett fény + mélység, ui-system.css) */
  --pipsy-btn-min-height: 2.75rem;
  --pipsy-btn-min-height-sm: 2.25rem;
  --pipsy-btn-padding-x: 1.35rem;
  --pipsy-btn-padding-x-sm: 0.9375rem;
  --pipsy-btn-radius: var(--pipsy-radius-sm);
  --pipsy-btn-font-size: 0.9375rem;
  --pipsy-btn-font-size-sm: 0.8125rem;
  --pipsy-btn-font-weight: 600;
  --pipsy-btn-gap: 0.5rem;
  --pipsy-btn-icon-size: 2.5rem;
  --pipsy-btn-letter: var(--pipsy-tracking-ui);
  --pipsy-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pipsy-btn-duration: 220ms;
  --pipsy-btn-transition: transform var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    box-shadow var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    border-color var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    background var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    color var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    opacity var(--pipsy-btn-duration) var(--pipsy-btn-ease),
    filter var(--pipsy-btn-duration) var(--pipsy-btn-ease);
  --pipsy-btn-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --pipsy-btn-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  --pipsy-btn-crisp: 0 1px 2px rgba(0, 0, 0, 0.22);
  --pipsy-btn-primary-glow: var(--pipsy-btn-inset-top), var(--pipsy-btn-inset-bottom), var(--pipsy-btn-crisp),
    0 6px 20px rgba(var(--module-accent-rgb), 0.34), 0 16px 44px -14px rgba(var(--module-accent-rgb), 0.28);
  --pipsy-btn-primary-glow-hover: var(--pipsy-btn-inset-top), var(--pipsy-btn-inset-bottom), var(--pipsy-btn-crisp),
    0 10px 28px rgba(var(--module-accent-rgb), 0.42), 0 22px 52px -12px rgba(var(--module-accent-rgb), 0.32);
  --pipsy-btn-primary-glow-hero: var(--pipsy-btn-inset-top), var(--pipsy-btn-inset-bottom), var(--pipsy-btn-crisp),
    0 10px 32px rgba(var(--module-accent-rgb), 0.4), 0 26px 56px -10px rgba(var(--module-accent-rgb), 0.34);
  --pipsy-btn-secondary-shadow: var(--pipsy-btn-inset-top), 0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 28px -8px rgba(0, 0, 0, 0.4);
  --pipsy-btn-secondary-shadow-hover: var(--pipsy-btn-inset-top), 0 2px 4px rgba(0, 0, 0, 0.2),
    0 12px 36px -10px rgba(0, 0, 0, 0.45);
  --pipsy-btn-text-on-solid: 0 1px 1px rgba(0, 0, 0, 0.28);

  --pipsy-surface-base: #050712;
  --pipsy-surface-base-rgb: 5, 7, 18;
  --pipsy-surface-elevated: #0a0e1a;
  --pipsy-surface-panel: rgba(12, 15, 28, 0.82);
  --pipsy-border-subtle: rgba(255, 255, 255, 0.06);
  --pipsy-border-medium: rgba(255, 255, 255, 0.1);
  --pipsy-grid-line: rgba(255, 255, 255, 0.02);

  --pipsy-text-1: #f1f5f9;
  --pipsy-text-2: #e2e8f0;
  --pipsy-text-inverse-muted: rgba(255, 255, 255, 0.7);
  --pipsy-text-inverse-strong: rgba(255, 255, 255, 0.95);
  --pipsy-text-muted: #94a3b8;
  --pipsy-text-muted-rgb: 148, 163, 184;

  --pipsy-accent: #6366f1;
  --pipsy-accent-rgb: 99, 102, 241;
  --pipsy-accent-2: #22d3ee;
  --pipsy-accent-2-rgb: 34, 211, 238;
  --pipsy-accent-3: #8b5cf6;
  --pipsy-accent-3-rgb: 139, 92, 246;

  --pipsy-ok: #22c55e;
  --pipsy-ok-rgb: 34, 197, 94;
  --pipsy-warn: #f59e0b;
  --pipsy-warn-rgb: 245, 158, 11;
  --pipsy-warn-bright: #fbbf24;
  --pipsy-warn-bright-rgb: 251, 191, 36;
  --pipsy-warn-muted: #fcd34d;
  --pipsy-warn-soft: #fde68a;
  --pipsy-danger: #ef4444;
  --pipsy-danger-rgb: 239, 68, 68;

  /* Finomabb szöveg- és glass-rétegek (modul CSS-ekhez) */
  --pipsy-text-faint: #64748b;
  --pipsy-text-dim: #475569;
  --pipsy-text-soft: #7c8aad;
  --pipsy-text-cool: #f0f4ff;
  --pipsy-text-silver: #cbd5e1;
  --pipsy-text-rose: #fbcfe8;
  --pipsy-text-lilac: #e9d5ff;
  --pipsy-profit-fg: #86efac;
  --pipsy-loss-fg: #fca5a5;
  --pipsy-chip-ok-start: #166534;
  --pipsy-chip-ok-end: #15803d;
  --pipsy-chip-ok-text: #dcfce7;
  --pipsy-chip-danger-start: #991b1b;
  --pipsy-chip-danger-end: #b91c1c;
  --pipsy-chip-danger-text: #fecaca;
  --pipsy-surface-glass-low: rgba(255, 255, 255, 0.03);
  --pipsy-surface-glass-mid: rgba(255, 255, 255, 0.04);
  --pipsy-surface-glass-high: rgba(255, 255, 255, 0.06);
  --pipsy-border-hairline: rgba(255, 255, 255, 0.05);
  --pipsy-border-soft: rgba(255, 255, 255, 0.07);
  --pipsy-border-strong: rgba(255, 255, 255, 0.08);
  --pipsy-border-heavy: rgba(255, 255, 255, 0.12);
  --pipsy-border-overlay: rgba(255, 255, 255, 0.14);
  --pipsy-border-extra: rgba(255, 255, 255, 0.16);
  --pipsy-surface-hover: rgba(255, 255, 255, 0.08);
  --pipsy-surface-active: rgba(255, 255, 255, 0.12);
  --pipsy-surface-scrim: rgba(5, 7, 18, 0.35);
  --pipsy-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Mélység / árnyék — small → medium → large (dark SaaS, nem „lapos”, nem túl kemény) */
  --pipsy-shadow-edge-bottom: 0 1px 0 rgba(255, 255, 255, 0.04);
  --pipsy-shadow-inset-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --pipsy-shadow-elev-sm: 0 2px 10px rgba(3, 7, 18, 0.22), 0 1px 3px rgba(0, 0, 0, 0.14);
  --pipsy-shadow-elev-md:
    0 8px 28px rgba(3, 7, 18, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.12),
    var(--pipsy-shadow-inset-subtle);
  --pipsy-shadow-elev-md-hover:
    0 14px 36px rgba(3, 7, 18, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.16),
    var(--pipsy-shadow-inset-subtle);
  --pipsy-shadow-elev-lg:
    0 22px 56px rgba(3, 7, 18, 0.44),
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    var(--pipsy-shadow-inset-subtle);
  --pipsy-shadow-elev-xl:
    0 26px 64px rgba(3, 7, 18, 0.48),
    0 12px 28px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    var(--pipsy-shadow-inset-subtle),
    0 0 52px rgba(var(--pipsy-accent-rgb), 0.06);
  --pipsy-shadow-popover:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 20px 48px rgba(3, 7, 18, 0.48),
    0 0 40px rgba(var(--module-accent-rgb, 99, 102, 241), 0.07);
  /* Nav / nyelv / user menü + pipsy-combobox panel — ugyanaz a „Prop Firm” üveg */
  --pipsy-dropdown-shell-bg: linear-gradient(165deg, rgba(18, 22, 38, 0.98), rgba(10, 14, 28, 0.99));
  --pipsy-dropdown-shell-border: 1px solid rgba(99, 102, 241, 0.18);
  --pipsy-backdrop-dropdown: blur(18px) saturate(1.15);
  --pipsy-z-header-dropdown: 90;
  --pipsy-shadow-surface-panel:
    0 26px 64px rgba(3, 7, 18, 0.45),
    var(--pipsy-shadow-inset-top);
  --pipsy-shadow-float-up: 0 -10px 36px rgba(3, 7, 18, 0.35);
  --pipsy-shadow-dot-glow: 0 0 14px rgba(var(--pipsy-accent-rgb), 0.55);
  --pipsy-shadow-ring-accent-soft: 0 0 0 4px rgba(var(--pipsy-accent-rgb), 0.14);
  --pipsy-shadow-carousel-active: 0 0 0 4px rgba(255, 255, 255, 0.08);
  --pipsy-shadow-accent-cta: 0 6px 22px rgba(var(--pipsy-accent-rgb), 0.28);
  --pipsy-shadow-accent-cta-hover: 0 10px 30px rgba(var(--pipsy-accent-rgb), 0.34);
  --pipsy-shadow-legal-pill: 0 6px 22px rgba(var(--pipsy-accent-rgb), 0.18);

  --pipsy-shadow-glow: 0 20px 50px rgba(99, 102, 241, 0.12);
  --pipsy-shadow-panel-lg: var(--pipsy-shadow-elev-lg);

  /* Görgetősáv (Firefox scrollbar-color + WebKit alap) */
  --pipsy-scrollbar-size: 10px;
  --pipsy-scrollbar-track: rgba(255, 255, 255, 0.04);
  --pipsy-scrollbar-thumb: rgba(var(--pipsy-accent-rgb), 0.42);
  --pipsy-scrollbar-thumb-hover: rgba(var(--pipsy-accent-rgb), 0.62);

  /* Sarkok: xs beágyazott / sm vezérlő / md kártya+sáv / lg–xl panelek */
  --pipsy-radius-xs: 8px;
  --pipsy-radius-sm: 12px;
  --pipsy-radius-md: 16px;
  --pipsy-radius-lg: 24px;
  --pipsy-radius-xl: 32px;
  --pipsy-radius-full: 9999px;

  --pipsy-radius-control: var(--pipsy-radius-sm);
  --pipsy-radius-chip: var(--pipsy-radius-sm);
  --pipsy-radius-nested: var(--pipsy-radius-xs);
  --pipsy-radius-card: var(--pipsy-radius-lg);
  --pipsy-radius-toolbar: var(--pipsy-radius-md);
  --pipsy-radius-panel: var(--pipsy-radius-lg);
  --pipsy-radius-modal: var(--pipsy-radius-lg);
  --pipsy-radius-popover: var(--pipsy-radius-md);
  --pipsy-radius-badge-pill: var(--pipsy-radius-full);
  --pipsy-radius-hero-surface: var(--pipsy-radius-xl);

  /* Kártya — egységes prémium glass (landing, dashboard, modulok) */
  --pipsy-card-bg-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
  --pipsy-card-bg-shell: linear-gradient(160deg, rgba(17, 20, 34, 0.92), rgba(12, 14, 26, 0.88));
  --pipsy-card-border: 1px solid var(--pipsy-border-soft);
  --pipsy-card-border-hover: rgba(255, 255, 255, 0.11);
  --pipsy-card-border-nested: 1px solid var(--pipsy-border-hairline);
  --pipsy-card-shadow: var(--pipsy-shadow-inset-top), var(--pipsy-shadow-elev-md);
  --pipsy-card-shadow-hover: var(--pipsy-shadow-inset-top), var(--pipsy-shadow-elev-md-hover);
  --pipsy-card-shadow-shell: var(--pipsy-shadow-elev-lg);
  --pipsy-card-inset-glass: 0 2px 0 rgba(255, 255, 255, 0.07) inset, 0 -1px 0 rgba(0, 0, 0, 0.18) inset;
  --pipsy-card-shadow-feature: var(--pipsy-card-inset-glass), var(--pipsy-shadow-elev-md);
  --pipsy-card-shadow-feature-hover: var(--pipsy-card-inset-glass), var(--pipsy-shadow-elev-md-hover);
  --pipsy-card-blur: blur(16px) saturate(1.45);
  --pipsy-card-blur-strong: blur(18px) saturate(1.55);
  --pipsy-card-radius: var(--pipsy-radius-card);
  --pipsy-card-radius-compact: var(--pipsy-radius-popover);
  --pipsy-card-padding: var(--pipsy-space-6) var(--pipsy-space-6) var(--pipsy-space-7);
  --pipsy-card-padding-hero: var(--pipsy-space-7) var(--pipsy-space-6);
  --pipsy-card-padding-compact: var(--pipsy-space-5) var(--pipsy-space-5) var(--pipsy-space-5);
  /* Nagyobb belső tér űrlapos / sűrű kártyákhoz (calendar journal, hasonló) */
  --pipsy-card-padding-expanded: var(--pipsy-space-7) var(--pipsy-space-6) var(--pipsy-space-10);
  /* Panel / kártya főcím (szekció fejléc) */
  --pipsy-card-headline-size: var(--pipsy-type-title-lg);
  --pipsy-card-headline-weight: 800;
  --pipsy-card-headline-tracking: var(--pipsy-tracking-snug);
  --pipsy-card-headline-color: var(--pipsy-text-cool);
  --pipsy-card-eyebrow-color: var(--pipsy-text-faint);

  --module-accent: var(--pipsy-accent);
  --module-accent-rgb: var(--pipsy-accent-rgb);
  --module-accent-2: var(--pipsy-accent-2);
  --module-accent-2-rgb: var(--pipsy-accent-2-rgb);
  --module-accent-3: var(--pipsy-accent-3);
  --module-accent-3-rgb: var(--pipsy-accent-3-rgb);
  --module-accent-text: #c7d2fe;
  --module-bg-start: #050712;
  --module-bg-mid: #0a0e1a;
  --module-bg-end: #070b14;
  --module-glow-1: rgba(99, 102, 241, 0.15);
  --module-glow-2: rgba(139, 92, 246, 0.08);
  --module-glow-3: rgba(34, 211, 238, 0.06);
  --module-hero-gradient: linear-gradient(120deg, #eef2ff 0%, #c7d2fe 45%, #6366f1 100%);
}

/* Tablet / mobil: szekció- és hero-ritmus szűkebb viewporton */
@media (max-width: 980px) {
  :root {
    --pipsy-space-section-y: clamp(var(--pipsy-space-8), 7vw, var(--pipsy-space-12));
    --pipsy-space-hero-block-y: clamp(var(--pipsy-space-10), 12vw, var(--pipsy-space-13));
    --pipsy-space-hero-grid-gap: var(--pipsy-space-8);
    --pipsy-space-page-y: clamp(var(--pipsy-space-6), 4vw, var(--pipsy-space-9));
    --pipsy-space-page-y-loose: clamp(var(--pipsy-space-8), 5vw, var(--pipsy-space-10));
  }
}

@media (max-width: 640px) {
  :root {
    --pipsy-space-section-y: clamp(var(--pipsy-space-8), 12vw, var(--pipsy-space-10));
    --pipsy-space-hero-block-y: clamp(var(--pipsy-space-8), 14vw, var(--pipsy-space-10));
    --pipsy-space-hero-grid-gap: var(--pipsy-space-6);
    --pipsy-space-page-y: clamp(var(--pipsy-space-6), 6vw, var(--pipsy-space-8));
    --pipsy-space-page-y-loose: clamp(var(--pipsy-space-7), 6vw, var(--pipsy-space-9));
    --pipsy-card-padding: var(--pipsy-space-5) var(--pipsy-space-5) var(--pipsy-space-6);
    --pipsy-card-padding-hero: var(--pipsy-space-6) var(--pipsy-space-5);
    --pipsy-card-padding-compact: var(--pipsy-space-4) var(--pipsy-space-4) var(--pipsy-space-4);
  }
}

/* Tablet (landscape / medium): közbenső típus- és gombritmus */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --pipsy-type-body: 0.98rem;
    --pipsy-btn-padding-x: 1.2rem;
  }
}

.profile-shell {
  --module-accent: #5b6cff;
  --module-accent-rgb: 91, 108, 255;
  --module-accent-2: #22d3ee;
  --module-accent-2-rgb: 34, 211, 238;
  --module-accent-3: #f472b6;
  --module-accent-3-rgb: 244, 114, 182;
  --module-accent-text: #c7d0ff;
  --module-glow-1: rgba(99, 102, 241, 0.18);
  --module-glow-2: rgba(34, 211, 238, 0.1);
  --module-glow-3: rgba(244, 114, 182, 0.08);
  --module-hero-gradient: linear-gradient(120deg, #f0f4ff 0%, #c7d0ff 42%, #5b6cff 100%);
}

.prop-shell {
  --module-accent: #06b6d4;
  --module-accent-rgb: 6, 182, 212;
  --module-accent-2: #67e8f9;
  --module-accent-2-rgb: 103, 232, 249;
  --module-accent-3: #0891b2;
  --module-accent-3-rgb: 8, 145, 178;
  --module-accent-text: #bae6fd;
  --module-glow-1: rgba(30, 180, 210, 0.22);
  --module-glow-2: rgba(80, 230, 255, 0.12);
  --module-glow-3: rgba(6, 140, 180, 0.1);
  --module-hero-gradient: linear-gradient(120deg, #ecfeff 0%, #67e8f9 42%, #06b6d4 100%);
}

.emotion-shell {
  --module-accent: #f472b6;
  --module-accent-rgb: 244, 114, 182;
  --module-accent-2: #a5b4fc;
  --module-accent-2-rgb: 165, 180, 252;
  --module-accent-3: #ec4899;
  --module-accent-3-rgb: 236, 72, 153;
  --module-accent-text: #fbcfe8;
  --module-glow-1: rgba(244, 114, 182, 0.14);
  --module-glow-2: rgba(99, 102, 241, 0.08);
  --module-glow-3: rgba(34, 211, 238, 0.06);
  --module-hero-gradient: linear-gradient(120deg, #fdf4ff 0%, #f9a8d4 38%, #a5b4fc 100%);
}

.va-shell {
  --module-accent: #10b981;
  --module-accent-rgb: 16, 185, 129;
  --module-accent-2: #34d399;
  --module-accent-2-rgb: 52, 211, 153;
  --module-accent-3: #86efac;
  --module-accent-3-rgb: 134, 239, 172;
  --module-accent-text: #bbf7d0;
  --module-glow-1: rgba(20, 180, 130, 0.22);
  --module-glow-2: rgba(80, 240, 170, 0.1);
  --module-glow-3: rgba(16, 130, 90, 0.08);
  --module-hero-gradient: linear-gradient(120deg, #f0fdf4 0%, #86efac 45%, #10b981 100%);
}

.calendar-shell,
.mt-setup-page {
  --module-accent: #8b5cf6;
  --module-accent-rgb: 139, 92, 246;
  --module-accent-2: #c4b5fd;
  --module-accent-2-rgb: 196, 181, 253;
  --module-accent-3: #6366f1;
  --module-accent-3-rgb: 99, 102, 241;
  --module-accent-text: #ddd6fe;
  --module-glow-1: rgba(120, 110, 220, 0.22);
  --module-glow-2: rgba(164, 148, 255, 0.12);
  --module-glow-3: rgba(91, 72, 180, 0.1);
  --module-hero-gradient: linear-gradient(120deg, #f5f3ff 0%, #c4b5fd 42%, #8b5cf6 100%);
}

.packages-shell,
.db-shell {
  --module-accent: #6d7cff;
  --module-accent-rgb: 109, 124, 255;
  --module-accent-2: #8b5cf6;
  --module-accent-2-rgb: 139, 92, 246;
  --module-accent-3: #22d3ee;
  --module-accent-3-rgb: 34, 211, 238;
  --module-accent-text: #d6ddff;
  --module-glow-1: rgba(109, 124, 255, 0.18);
  --module-glow-2: rgba(139, 92, 246, 0.12);
  --module-glow-3: rgba(34, 211, 238, 0.08);
}

/* ─── Themed scrollbars (jobb oldali / belső görgetés) ─────────────────────── */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--pipsy-scrollbar-thumb) var(--pipsy-scrollbar-track);
}

html::-webkit-scrollbar {
  width: var(--pipsy-scrollbar-size);
  height: var(--pipsy-scrollbar-size);
}

html::-webkit-scrollbar-track {
  background: var(--pipsy-scrollbar-track);
  border-radius: 100px;
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--pipsy-accent-rgb), 0.55),
    rgba(var(--pipsy-accent-3-rgb), 0.4)
  );
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 48px;
}

html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--pipsy-accent-rgb), 0.75),
    rgba(var(--pipsy-accent-3-rgb), 0.55)
  );
  background-clip: content-box;
}

html::-webkit-scrollbar-corner {
  background: transparent;
}

/* Belső, görgethető blokkokhoz (osztály alapú, modul CSS-ből is hívható) */
.pipsy-themed-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--pipsy-scrollbar-thumb) var(--pipsy-scrollbar-track);
}

.pipsy-themed-scroll::-webkit-scrollbar {
  width: var(--pipsy-scrollbar-size);
  height: var(--pipsy-scrollbar-size);
}

.pipsy-themed-scroll::-webkit-scrollbar-track {
  background: var(--pipsy-scrollbar-track);
  border-radius: 100px;
}

.pipsy-themed-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(var(--pipsy-accent-rgb), 0.5),
    rgba(var(--pipsy-accent-3-rgb), 0.38)
  );
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 40px;
}

.pipsy-themed-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--pipsy-accent-rgb), 0.72),
    rgba(var(--pipsy-accent-3-rgb), 0.52)
  );
  background-clip: content-box;
}