/* Shared GlossGenius design layer. Every rule is scoped to a .gg root (the
   <html> of a restyled page, or the header placeholder on an older page), so
   linking this file cannot restyle an older page outside its header. */
  /* GlossDS color tokens: synced from GlossGenius/core-mobile @ integration
   src/glossDesign/tokens/colors.ts + themes/defaultTheme/{dark,light}Theme/*.colors.ts (2026-09-28).
   DARK MODE IS THE DEFAULT: .gg holds dark values; [data-theme="light"] is opt-in only.
   Use semantic tokens (--content-*, --surface-*, --btn-*, ...) in designs, not --p-* primitives. */
.gg{
  /* ---- primitives ---- */
  --p-white:#FFFFFF; --p-black:#12100B; --p-transparent:#FFFFFF00;
  --p-white-a05:#FFFFFF0D; --p-white-a10:#FFFFFF1A; --p-white-a15:#FFFFFF26; --p-white-a20:#FFFFFF33; --p-white-a30:#FFFFFF4C;
  --p-black-a10:#12100B1A; --p-black-a15:#12100B26; --p-black-a30:#12100B4D; --p-black-a60:#12100B99;
  --p-gray-50:#F9F9F7; --p-gray-100:#F0F0EE; --p-gray-200:#DFDEDB; --p-gray-300:#CDCCC9; --p-gray-400:#B6B5B1; --p-gray-500:#94938F;
  --p-gray-600:#777670; --p-gray-700:#5F5E58; --p-gray-800:#4A4944; --p-gray-850:#353535; --p-gray-900:#302E28; --p-gray-910:#262626; --p-gray-925:#1E1E1E; --p-gray-950:#12100B;
  --p-gloss-gray-50:#F0F7F6; --p-gloss-gray-100:#E9F2F1; --p-gloss-gray-200:#D8E0E1; --p-gloss-gray-300:#C4CCCE; --p-gloss-gray-400:#AAB9BA;
  --p-gloss-gray-500:#879895; --p-gloss-gray-600:#6E7876; --p-gloss-gray-700:#56605E; --p-gloss-gray-800:#414B4A; --p-gloss-gray-900:#26302E; --p-gloss-gray-950:#12100B;
  --p-pink-50:#FFEBF2; --p-pink-100:#FFC0D5; --p-pink-200:#FFA2C1; --p-pink-300:#FF77A5; --p-pink-400:#FF5D94; --p-pink-500:#FF3479;
  --p-pink-600:#DE2161; --p-pink-700:#B52556; --p-pink-800:#8C1D43; --p-pink-900:#6B1633; --p-pink-950:#4C1024;
  --p-red-50:#FFF6F5; --p-red-100:#FFEBE8; --p-red-200:#FFD5CE; --p-red-300:#FFB0A5; --p-red-400:#FF998C; --p-red-500:#D3534B;
  --p-red-600:#D14339; --p-red-700:#AC2C26; --p-red-800:#81231D; --p-red-900:#591511; --p-red-950:#290A07;
  --p-green-50:#F0FEEA; --p-green-100:#DFF9D5; --p-green-200:#C1EAAF; --p-green-300:#9CDC7F; --p-green-400:#7EC859; --p-green-500:#66A448;
  --p-green-600:#55853E; --p-green-700:#406A2B; --p-green-800:#345225; --p-green-900:#1D3411; --p-green-950:#001A09;
  --p-yellow-50:#FFF8E9; --p-yellow-100:#FEEFCB; --p-yellow-200:#F9DB93; --p-yellow-300:#ECC663; --p-yellow-400:#DEAF25; --p-yellow-500:#B58E12;
  --p-yellow-600:#927108; --p-yellow-700:#755A00; --p-yellow-800:#5B4604; --p-yellow-900:#3B2C00; --p-yellow-950:#161500;
  --p-blue-50:#F1FAFE; --p-blue-100:#E2F4FC; --p-blue-200:#BAE4F6; --p-blue-300:#86D6F6; --p-blue-400:#53C2EA; --p-blue-500:#17A1CB;
  --p-blue-600:#1182A4; --p-blue-700:#006683; --p-blue-800:#024F66; --p-blue-900:#003343; --p-blue-950:#001822;
  --p-sky-50:#F7F8FF; --p-sky-100:#EDEFFF; --p-sky-200:#D6DCFF; --p-sky-300:#BBC2FB; --p-sky-400:#A6AEFF; --p-sky-500:#8185F4;
  --p-sky-600:#6467D1; --p-sky-700:#5152B2; --p-sky-800:#3D3E89; --p-sky-900:#292A60; --p-sky-950:#131040;
  --p-gold-50:#FDF9E6; --p-gold-500:#A58E18; --p-gold-600:#867200; --p-gold-950:#140F00;
  --p-amber-500:#E89C2A;
  --p-violet-300:#9D89E6; --p-violet-500:#856CE0;
  /* brand hues (Brand/<Name>/<step>) */
  --p-brand-gloss-white:#F0F7F6; --p-brand-gloss-black:#17150E;
  --p-brand-amber-500:#E89C2A; --p-brand-cerulean-500:#3591DC; --p-brand-coral-500:#F5BCAB; --p-brand-copper-50:#FBF0E8; --p-brand-copper-300:#D49B6B; --p-brand-copper-500:#B56D36; --p-brand-copper-600:#8F562B; --p-brand-copper-900:#2D1B0E;
  --p-brand-fuchsia-500:#F054C3; --p-brand-gold-500:#C4881B; --p-brand-jade-500:#3FC675; --p-brand-mauve-500:#B27095; --p-brand-midnight-500:#6883A1;
  --p-brand-opal-500:#54CFD1; --p-brand-orchid-500:#CD6CF9; --p-brand-periwinkle-50:#EEEFF9; --p-brand-periwinkle-300:#A5AAE4; --p-brand-periwinkle-500:#767DD5; --p-brand-periwinkle-600:#5E64AA; --p-brand-periwinkle-900:#1A1C33;
  --p-brand-pine-50:#F0F3EE; --p-brand-pine-100:#B6C4A9; --p-brand-pine-200:#98AC87; --p-brand-pine-500:#6C8853; --p-brand-pine-900:#161B11;
  --p-brand-sage-500:#9AC196; --p-brand-sienna-500:#B56D36;
  --p-brand-sky-50:#F5F6FF; --p-brand-sky-500:#9FA6FF; --p-brand-sky-600:#767DD5; --p-brand-sky-700:#535AA5; --p-brand-sky-800:#383A6E; --p-brand-sky-900:#1C1D37;
  --p-brand-smoke-500:#807A9F; --p-brand-smoke-fog:#D5D9E1;
  --p-brand-solar-400:#DDDD45; --p-brand-solar-500:#CCCC24; --p-brand-solar-600:#A0A01C; --p-brand-solar-700:#757516; --p-brand-solar-800:#49490D; --p-brand-solar-900:#2B2B08;
  --p-brand-sunset-50:#FFF1EC; --p-brand-sunset-300:#FFAC8E; --p-brand-sunset-500:#FF7542; --p-brand-sunset-600:#E6693B; --p-brand-sunset-900:#33170D;
  --p-brand-violet-50:#EBF4FC; --p-brand-violet-300:#9D89E6; --p-brand-violet-500:#856CE0; --p-brand-violet-600:#6A56B3; --p-brand-violet-900:#1B162D;
  /* ---- content ---- */
  --content-primary:var(--p-gray-100); --content-secondary:var(--p-gray-300); --content-tertiary:var(--p-gray-400);
  --content-disabled:var(--p-gray-600); --content-inverted:var(--p-gray-950); --content-accent:var(--p-pink-600);
  --content-positive:var(--p-green-400); --content-negative:var(--p-red-400); --content-warning:var(--p-yellow-400); --content-gold:var(--p-amber-500);
  --icon-primary:var(--p-white); --icon-accent:var(--p-pink-600); --icon-success:var(--p-green-600);
  /* ---- surface ---- */
  --surface-primary:var(--p-gray-950); --surface-secondary:var(--p-gray-900); --surface-tertiary:var(--p-gray-800);
  --surface-inverted:var(--p-gray-50); --surface-accent:var(--p-pink-600); --surface-brand:var(--p-gray-950);
  --surface-solar:var(--p-brand-solar-500); --surface-amber:var(--p-brand-amber-500); --surface-gold:var(--p-brand-gold-500);
  --surface-sienna:var(--p-brand-sienna-500); --surface-sunset:var(--p-brand-sunset-500); --surface-coral:var(--p-brand-coral-500);
  --surface-copper:var(--p-brand-copper-500); --surface-mauve:var(--p-brand-mauve-500); --surface-fuchsia:var(--p-brand-fuchsia-500);
  --surface-orchid:var(--p-brand-orchid-500); --surface-violet:var(--p-brand-violet-500); --surface-sky:var(--p-brand-sky-500);
  --surface-smoke:var(--p-brand-smoke-500); --surface-midnight:var(--p-brand-midnight-500); --surface-cerulean:var(--p-brand-cerulean-500);
  --surface-opal:var(--p-brand-opal-500); --surface-sage:var(--p-brand-sage-500); --surface-jade:var(--p-brand-jade-500);
  --surface-pine:var(--p-brand-pine-500); --surface-gray:var(--p-gloss-gray-200);
  --surface-recommended-card:#1E1E1E; --surface-selected-image-overlay:#00000040;
  --overlay-bg:var(--p-white-a15);
  /* ---- border ---- */
  --border-light:var(--p-gray-900); --border-default:var(--p-gray-800); --border-dark:var(--p-gray-700);
  /* ---- buttons (v2) ---- */
  --btn-primary-bg:var(--p-pink-600); --btn-primary-bg-pressed:var(--p-pink-700); --btn-primary-bg-disabled:var(--p-gray-800); --btn-primary-content:var(--p-white);
  --btn-secondary-bg:var(--p-white-a10); --btn-secondary-bg-pressed:var(--p-gray-800); --btn-secondary-bg-disabled:var(--p-gray-800); --btn-secondary-content:var(--p-white);
  --btn-tertiary-bg:transparent; --btn-tertiary-bg-pressed:var(--p-gray-700); --btn-tertiary-bg-disabled:var(--p-gray-800); --btn-tertiary-border:var(--p-gray-700); --btn-tertiary-content:var(--p-white);
  --btn-destructive-bg:var(--p-red-600); --btn-destructive-bg-pressed:var(--p-red-800); --btn-destructive-bg-disabled:var(--p-gray-800); --btn-destructive-content:var(--p-white);
  --btn-transparent-destructive-content:var(--p-red-400);
  --btn-primary-black-bg:var(--p-gray-950); --btn-primary-black-bg-pressed:var(--p-gray-900); --btn-primary-black-content:var(--p-white);
  --btn-primary-white-bg:var(--p-gloss-gray-50); --btn-primary-white-bg-pressed:var(--p-gloss-gray-200); --btn-primary-white-content:var(--p-gray-950);
  --btn-sky-bg:var(--p-brand-sky-500); --btn-sky-bg-pressed:var(--p-brand-sky-600); --btn-sky-content:var(--p-brand-sky-900);
  --btn-solar-bg:var(--p-brand-solar-500); --btn-solar-bg-pressed:var(--p-brand-solar-600); --btn-solar-content:var(--p-white);
  --btn-content-disabled:var(--p-gray-600);
  --btn-bg-disabled:var(--p-gray-800);
  --btn-primary-black-bg-disabled:var(--p-gray-800); --btn-primary-white-bg-disabled:var(--p-gray-800);
  --btn-secondary-black-bg:var(--p-black-a30); --btn-secondary-black-bg-pressed:var(--p-black-a60); --btn-secondary-black-bg-disabled:var(--p-gray-800); --btn-secondary-black-content:var(--p-gloss-gray-50);
  --btn-transparent-destructive-bg-pressed:var(--p-gray-800);
  /* ---- controls / inputs ---- */
  --control-bg:var(--p-gray-950); --control-bg-pressed:var(--p-gray-800); --control-bg-selected:var(--p-gray-950);
  --input-bg:var(--p-gray-950); --input-border-default:var(--p-gray-600); --input-border-focus:var(--p-gray-300);
  --input-border-disabled:var(--p-gray-700); --input-border-invalid:var(--p-red-400); --input-border-warning:var(--p-yellow-400); --input-suffix:var(--p-gray-400);
  /* ---- toggle / checkbox / radio ---- */
  --toggle-checked:var(--p-pink-600); --toggle-checked-solar:var(--p-brand-solar-500); --toggle-unchecked:var(--p-gray-700); --toggle-thumb:var(--p-white);
  --toggle-checked-disabled:var(--p-pink-300); --toggle-unchecked-disabled:var(--p-gray-300); --toggle-label:var(--p-white); --toggle-description:var(--p-gray-300);
  --checkbox-border-checked:var(--p-gray-100); --checkbox-card-border-checked:var(--p-pink-400); --checkbox-card-border-unchecked:var(--p-gray-800);
  --checkbox-bg-enabled:var(--p-gray-100); --checkbox-icon:var(--p-black); --checkbox-border-unchecked:var(--p-gray-300); --checkbox-disabled:var(--p-gray-600);
  --card-checkbox-checked:var(--p-pink-400); --card-checkbox-bg-checked:var(--p-gray-900);
  /* ---- segmented control ---- */
  --segment-bg:var(--p-gray-800); --segment-item-selected-bg:var(--p-gray-950); --segment-item-selected:var(--p-white);
  /* ---- chips ---- */
  --chip-bg:var(--p-gray-950); --chip-bg-pressed:var(--p-gray-800); --chip-border:var(--p-gray-700);
  --chip-selected-bg:var(--p-white); --chip-selected-content:var(--p-gray-950); --chip-selected-border:var(--p-white);
  /* ---- feedback ---- */
  --banner-content:var(--p-white); --banner-default-bg:var(--p-gray-900); --banner-error-bg:var(--p-red-700); --banner-warn-bg:var(--p-yellow-900);
  --banner-success-bg:var(--p-green-900); --banner-info-bg:var(--p-blue-900); --banner-sky-bg:var(--p-brand-sky-800);
  --alert-error-bg:var(--p-red-700); --alert-error-content:var(--p-red-50); --alert-info-bg:var(--p-blue-700); --alert-info-content:var(--p-blue-50);
  --alert-success-bg:var(--p-green-700); --alert-success-content:var(--p-green-50); --alert-warn-bg:var(--p-yellow-700); --alert-warn-content:var(--p-yellow-50);
  --toast-bg:var(--p-gray-200); --toast-content:var(--p-black); --toast-success-bg:var(--p-gloss-gray-900); --toast-warning-bg:var(--p-red-600);
  --tag-default-bg:var(--p-gray-800); --tag-default-content:var(--p-white); --tag-negative-bg:var(--p-red-700); --tag-negative-content:var(--p-white);
  --tag-warn-bg:var(--p-yellow-700); --tag-warn-content:var(--p-white); --tag-success-bg:var(--p-green-700); --tag-success-content:var(--p-white);
  --tag-info-bg:var(--p-blue-700); --tag-info-content:var(--p-white);
  --loading-skeleton-bg:rgba(127,127,127,.2); --loading-skeleton-shimmer:rgba(127,127,127,.4);
  /* ---- overlays / cards ---- */
  --dialog-bg:var(--p-gray-950); --popover-bg:var(--p-white); --tooltip-content:var(--p-gray-800); --bottom-sheet-handle:var(--p-gray-700);
  --card-bg:var(--p-white-a05); --card-bg-pressed:var(--p-gray-700); --thumbnail-surface:var(--p-gray-700);
  --tab-indicator-neutral:var(--p-gray-100);
  /* ---- badges ---- */
  --badge-gold-bg:var(--p-brand-gold-500); --badge-platinum-bg:var(--p-gray-500); --badge-practice-bg:var(--p-brand-smoke-500); --badge-standard-bg:var(--p-violet-300);
  /* ---- avatars ---- */
  --avatar-gray-bg:var(--p-gray-800); --avatar-gray-content:var(--p-gray-50);
  --avatar-pink-bg:var(--p-pink-600); --avatar-pink-content:var(--p-pink-50);
  --avatar-sky-bg:var(--p-sky-600); --avatar-sky-content:var(--p-sky-50);
  --avatar-violet-bg:var(--p-brand-violet-600); --avatar-violet-content:var(--p-brand-violet-50);
  --avatar-sunset-bg:var(--p-brand-sunset-600); --avatar-sunset-content:var(--p-brand-sunset-50);
  --avatar-pine-bg:var(--p-brand-pine-500); --avatar-pine-content:var(--p-brand-pine-50);
  --avatar-solar-bg:var(--p-brand-solar-600); --avatar-solar-content:#FDFDF2;
  --avatar-periwinkle-bg:var(--p-brand-periwinkle-600); --avatar-periwinkle-content:var(--p-brand-periwinkle-50);
  --avatar-copper-bg:var(--p-brand-copper-600); --avatar-copper-content:var(--p-brand-copper-50);
  /* ---- calendar events ---- */
  --event-synced:var(--p-pink-200); --event-completed:var(--p-gray-500); --event-no-show:var(--p-red-500); --event-blocked:var(--p-gray-600); --event-processing-blocked:var(--p-gray-900);
  /* ---- reviews ---- */
  --review-rating-filled:var(--p-amber-500); --review-rating-empty:var(--p-white-a20);
}
/* Opt-in only: use when a design explicitly asks for light mode. */
[data-theme="light"],[data-theme="light"] .gg{
  --content-primary:var(--p-gray-950); --content-secondary:var(--p-gloss-gray-700); --content-tertiary:var(--p-gray-700);
  --content-disabled:var(--p-gloss-gray-400); --content-inverted:var(--p-white); --content-accent:var(--p-pink-600);
  --content-positive:var(--p-green-600); --content-negative:var(--p-red-600); --content-warning:var(--p-yellow-600); --content-gold:var(--p-gold-600);
  --icon-primary:var(--p-gray-800);
  --surface-primary:var(--p-white); --surface-secondary:var(--p-gloss-gray-100); --surface-tertiary:var(--p-gloss-gray-200); --surface-inverted:var(--p-gloss-gray-950);
  --overlay-bg:var(--p-black-a30);
  --border-light:var(--p-gray-100); --border-default:var(--p-gray-200); --border-dark:var(--p-gloss-gray-300);
  --btn-primary-bg-disabled:var(--p-gloss-gray-200);
  --btn-secondary-bg:var(--p-black-a10); --btn-secondary-bg-pressed:var(--p-gloss-gray-50); --btn-secondary-bg-disabled:var(--p-gloss-gray-200); --btn-secondary-content:var(--p-gloss-gray-900);
  --btn-tertiary-bg-pressed:var(--p-gloss-gray-100); --btn-tertiary-bg-disabled:var(--p-gloss-gray-200); --btn-tertiary-border:var(--p-gloss-gray-200); --btn-tertiary-content:var(--p-gloss-gray-900);
  --btn-destructive-bg-disabled:var(--p-gloss-gray-200); --btn-transparent-destructive-content:var(--p-red-600);
  --btn-primary-black-bg-pressed:var(--p-gloss-gray-900); --btn-primary-black-content:var(--p-gloss-gray-50); --btn-primary-white-content:var(--p-gloss-gray-900);
  --btn-content-disabled:var(--p-gloss-gray-400);
  --btn-bg-disabled:var(--p-gloss-gray-200); --btn-primary-black-bg-disabled:var(--p-gloss-gray-200); --btn-primary-white-bg-disabled:var(--p-gloss-gray-200); --btn-secondary-black-bg-disabled:var(--p-gloss-gray-200);
  --btn-transparent-destructive-bg-pressed:var(--p-gray-200);
  --toggle-unchecked-disabled:var(--p-gray-700); --toggle-label:var(--p-gray-800); --toggle-description:var(--p-gray-600);
  --checkbox-border-checked:var(--p-gloss-gray-900); --checkbox-card-border-checked:var(--p-pink-500); --checkbox-card-border-unchecked:var(--p-gloss-gray-200);
  --control-bg:var(--p-white); --control-bg-pressed:var(--p-gray-100); --control-bg-selected:var(--p-gloss-gray-100);
  --input-bg:var(--p-white); --input-border-default:var(--p-gray-300); --input-border-focus:var(--p-gray-800); --input-border-disabled:var(--p-gray-200);
  --input-border-invalid:var(--p-red-300); --input-border-warning:var(--p-yellow-600);
  --toggle-unchecked:var(--p-gray-300);
  --checkbox-bg-enabled:var(--p-gloss-gray-900); --checkbox-icon:var(--p-white); --checkbox-border-unchecked:var(--p-gloss-gray-500); --checkbox-disabled:var(--p-gloss-gray-400);
  --card-checkbox-checked:var(--p-pink-500); --card-checkbox-bg-checked:var(--p-gray-800);
  --segment-bg:var(--p-gray-300); --segment-item-selected-bg:var(--p-white); --segment-item-selected:var(--p-gray-950);
  --chip-bg:var(--p-gray-50); --chip-bg-pressed:var(--p-gray-900); --chip-border:var(--p-gray-500); --chip-selected-border:var(--p-gray-950);
  --banner-default-bg:var(--p-gray-700); --banner-error-bg:var(--p-red-600); --banner-warn-bg:var(--p-yellow-600); --banner-success-bg:var(--p-green-600); --banner-info-bg:var(--p-blue-600);
  --alert-error-bg:var(--p-red-200); --alert-error-content:var(--p-red-950); --alert-info-bg:var(--p-blue-100); --alert-info-content:var(--p-blue-950);
  --alert-success-bg:var(--p-green-100); --alert-success-content:var(--p-green-950); --alert-warn-bg:var(--p-yellow-100); --alert-warn-content:var(--p-gold-950);
  --toast-bg:var(--p-gloss-gray-900); --toast-content:var(--p-white);
  --tag-default-bg:var(--p-gray-200); --tag-default-content:var(--p-black); --tag-negative-bg:var(--p-red-300); --tag-negative-content:var(--p-black);
  --tag-warn-bg:var(--p-yellow-300); --tag-warn-content:var(--p-yellow-950); --tag-success-bg:var(--p-green-300); --tag-success-content:var(--p-green-950);
  --tag-info-bg:var(--p-blue-300); --tag-info-content:var(--p-blue-950);
  --dialog-bg:var(--p-gray-50); --popover-bg:var(--p-gray-800); --tooltip-content:var(--p-white); --bottom-sheet-handle:var(--p-gray-200);
  --card-bg:var(--p-gloss-gray-100); --card-bg-pressed:var(--p-gray-200); --thumbnail-surface:var(--p-gray-300);
  --tab-indicator-neutral:var(--p-gray-950);
  --badge-standard-bg:#AD7AFF;
  --avatar-gray-bg:var(--p-gray-200); --avatar-gray-content:var(--p-gray-900);
  --avatar-pink-bg:var(--p-pink-200); --avatar-pink-content:var(--p-pink-900);
  --avatar-sky-bg:var(--p-sky-300); --avatar-sky-content:var(--p-sky-900);
  --avatar-violet-bg:var(--p-brand-violet-300); --avatar-violet-content:var(--p-brand-violet-900);
  --avatar-sunset-bg:var(--p-brand-sunset-300); --avatar-sunset-content:var(--p-brand-sunset-900);
  --avatar-pine-bg:var(--p-brand-pine-100); --avatar-pine-content:var(--p-brand-pine-900);
  --avatar-solar-bg:#E5E56F; --avatar-solar-content:var(--p-brand-solar-900);
  --avatar-periwinkle-bg:var(--p-brand-periwinkle-300); --avatar-periwinkle-content:var(--p-brand-periwinkle-900);
  --avatar-copper-bg:var(--p-brand-copper-300); --avatar-copper-content:var(--p-brand-copper-900);
  --event-completed:var(--p-gloss-gray-400); --event-no-show:var(--p-red-600); --event-blocked:var(--p-gloss-gray-600); --event-processing-blocked:var(--p-gloss-gray-600);
  --review-rating-empty:var(--p-black-a15);
}
  /* GlossDS typography: real Basel Grotesk (UI/body) + Basel Classic (display 28px+)
   webfont files, supplied by the brand team and stored in assets/fonts/. */
@font-face{ font-family:'Basel Grotesk'; src:url("/static/basel-grotesk-400.otf") format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Basel Grotesk'; src:url("/static/basel-grotesk-500.otf") format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Basel Classic'; src:url("/static/basel-classic-400.otf") format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
.gg{
  --font-grotesk:'Basel Grotesk', -apple-system, sans-serif;
  --font-classic:'Basel Classic', -apple-system, sans-serif;
  /* The scale is fluid: each step keeps its reference size at 1560px and
     shrinks toward the floor on a phone, so a narrow window gets smaller
     type instead of the same type in a squeezed column. Nothing goes below
     the 13px floor, and the body stays 15 to 16px. */
  --fs-xs:13px;  --lh-xs:17px;  --ls-xs:0; /* @kind other */
  --fs-sm:clamp(13px,0.96vw,15px);  --lh-sm:1.27; --ls-sm:0; /* @kind other */
  --fs-base:clamp(15px,1.09vw,17px);--lh-base:1.24;--ls-base:0; /* @kind other */
  --fs-lg:clamp(16px,1.28vw,20px);  --lh-lg:1.2;  --ls-lg:-0.25px;
  --fs-xl:clamp(18px,1.54vw,24px);  --lh-xl:1.17; --ls-xl:-0.48px;
  --fs-2xl:clamp(20px,1.8vw,28px); --lh-2xl:1.11; --ls-2xl:-0.7px;
  --fs-3xl:clamp(24px,2.31vw,36px); --lh-3xl:1.03; --ls-3xl:-1.08px;
  --fs-4xl:clamp(28px,3.08vw,48px); --lh-4xl:0.96; --ls-4xl:-1.68px;
  --fs-5xl:clamp(32px,4.1vw,64px); --lh-5xl:0.97; --ls-5xl:-2.56px;
  --fs-6xl:clamp(36px,4.62vw,72px); --lh-6xl:0.97; --ls-6xl:-2.88px;
  --fw-regular:400; /* @kind other */
  --fw-bold:500; /* @kind other */
}
  /* GlossDS spacing / radius / icon tokens: src/glossDesign/tokens/sizesAndShapes.ts (4px base grid) */
.gg{
  --space-0-5x:2px; --space-0-75x:3px; --space-1x:4px; --space-1_5x:6px; --space-2x:8px; --space-2_5x:10px;
  --space-3x:12px; --space-4x:16px; --space-4_5x:18px; --space-5x:20px; --space-6x:24px; --space-7x:28px; --space-8x:32px;
  --space-9x:36px; --space-10x:40px; --space-11x:44px; --space-12x:48px; --space-14x:56px; --space-16x:64px; --space-20x:80px; --space-24x:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-round:9999px;
  --icon-xs:12px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px;
  --border-width-default:1px; --border-width-slim:1.5px;
  --btn-height-xs:28px; --btn-height-sm:36px; --btn-height-default:48px; --btn-height-lg:56px;
  --btn-pad-xs:8px; --btn-pad-sm:16px; --btn-pad-default:24px; --btn-pad-with-icon:12px; --button-group-gap:8px;
  --input-height:56px; --input-height-sm:48px;
  --chip-height-sm:24px; --chip-height-md:36px; --chip-height-lg:48px; --tag-height:24px;
  --bottom-sheet-padding:24px; --tooltip-max-width:256px;
}
/*
* Remix Icon v4.2.0
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
*
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*
* Date: 2024-02-25
*/
@font-face {
  font-family: "remixicon";
  src: url("/static/remixicon.woff2") format("woff2");
  font-display: swap;
}

[class^="ri-"], [class*=" ri-"] {
  font-family: 'remixicon' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Every icon class the reference markup and logic use, plus the app's own. */
.ri-add-line:before { content: "\ea13"; }
.ri-archive-line:before { content: "\ea48"; }
.ri-arrow-down-s-fill:before { content: "\ea4d"; }
.ri-arrow-down-s-line:before { content: "\ea4e"; }
.ri-arrow-left-line:before { content: "\ea60"; }
.ri-arrow-left-s-line:before { content: "\ea64"; }
.ri-arrow-right-s-line:before { content: "\ea6e"; }
.ri-arrow-right-up-line:before { content: "\ea70"; }
.ri-arrow-up-down-line:before { content: "\ea74"; }
.ri-arrow-up-s-line:before { content: "\ea78"; }
.ri-attachment-2:before { content: "\ea84"; }
.ri-bank-card-line:before { content: "\ea92"; }
.ri-bank-line:before { content: "\ea94"; }
.ri-calendar-2-line:before { content: "\eb21"; }
.ri-calendar-check-line:before { content: "\eb23"; }
.ri-calendar-line:before { content: "\eb27"; }
.ri-chat-3-line:before { content: "\eb51"; }
.ri-chat-check-line:before { content: "\eb55"; }
.ri-check-double-line:before { content: "\eb79"; }
.ri-check-line:before { content: "\eb7b"; }
.ri-checkbox-circle-fill:before { content: "\eb80"; }
.ri-checkbox-circle-line:before { content: "\eb81"; }
.ri-close-line:before { content: "\eb99"; }
.ri-delete-bin-line:before { content: "\ec2a"; }
.ri-donut-chart-line:before { content: "\ec42"; }
.ri-download-2-line:before { content: "\ec54"; }
.ri-draft-line:before { content: "\ec5c"; }
.ri-edit-2-line:before { content: "\ec80"; }
.ri-edit-line:before { content: "\ec86"; }
.ri-equalizer-line:before { content: "\ec9d"; }
.ri-error-warning-fill:before { content: "\eca0"; }
.ri-error-warning-line:before { content: "\eca1"; }
.ri-exchange-dollar-line:before { content: "\eca9"; }
.ri-file-add-line:before { content: "\ecc9"; }
.ri-file-chart-line:before { content: "\eccd"; }
.ri-file-excel-2-line:before { content: "\ecdd"; }
.ri-file-list-3-line:before { content: "\ecef"; }
.ri-file-pdf-2-line:before { content: "\f3c7"; }
.ri-file-shield-2-line:before { content: "\ed09"; }
.ri-file-text-line:before { content: "\ed0f"; }
.ri-file-upload-line:before { content: "\ed15"; }
.ri-film-line:before { content: "\ed21"; }
.ri-filter-3-line:before { content: "\ed25"; }
.ri-flag-fill:before { content: "\ed3a"; }
.ri-flag-line:before { content: "\ed3b"; }
.ri-flashlight-line:before { content: "\ed3d"; }
.ri-focus-3-line:before { content: "\ed4c"; }
.ri-folder-3-fill:before { content: "\ed53"; }
.ri-folder-open-line:before { content: "\ed70"; }
.ri-format-clear:before { content: "\ed96"; }
.ri-funds-line:before { content: "\eda3"; }
.ri-gallery-line:before { content: "\eda5"; }
.ri-group-line:before { content: "\ede3"; }
.ri-heart-line:before { content: "\ee0f"; }
.ri-home-5-line:before { content: "\ee1f"; }
.ri-image-line:before { content: "\ee4b"; }
.ri-inbox-archive-line:before { content: "\ee4d"; }
.ri-inbox-line:before { content: "\ee4f"; }
.ri-instagram-line:before { content: "\ee66"; }
.ri-layout-column-line:before { content: "\ee8d"; }
.ri-lightbulb-flash-line:before { content: "\eea8"; }
.ri-lightbulb-line:before { content: "\eea9"; }
.ri-line-chart-line:before { content: "\eeab"; }
.ri-link:before { content: "\eeb2"; }
.ri-list-ordered:before { content: "\eebb"; }
.ri-list-unordered:before { content: "\eebe"; }
.ri-logout-box-r-line:before { content: "\eeda"; }
.ri-mail-add-line:before { content: "\eeec"; }
.ri-mail-line:before { content: "\eef6"; }
.ri-mail-open-line:before { content: "\eefa"; }
.ri-mail-send-line:before { content: "\eefc"; }
.ri-mail-unread-line:before { content: "\ef02"; }
.ri-map-pin-line:before { content: "\ef14"; }
.ri-megaphone-line:before { content: "\f385"; }
.ri-more-2-fill:before { content: "\ef76"; }
.ri-pencil-line:before { content: "\efe0"; }
.ri-phone-line:before { content: "\efec"; }
.ri-play-fill:before { content: "\f00a"; }
.ri-price-tag-3-fill:before { content: "\f022"; }
.ri-price-tag-3-line:before { content: "\f023"; }
.ri-quill-pen-line:before { content: "\f04a"; }
.ri-refresh-line:before { content: "\f064"; }
.ri-repeat-line:before { content: "\f074"; }
.ri-reply-all-line:before { content: "\f078"; }
.ri-reply-line:before { content: "\f07a"; }
.ri-search-line:before { content: "\f0d1"; }
.ri-send-plane-line:before { content: "\f0da"; }
.ri-slack-line:before { content: "\f14e"; }
.ri-smartphone-line:before { content: "\f15a"; }
.ri-spam-2-line:before { content: "\f169"; }
.ri-sparkling-2-fill:before { content: "\f36a"; }
.ri-sparkling-2-line:before { content: "\f36b"; }
.ri-star-fill:before { content: "\f186"; }
.ri-star-line:before { content: "\f18b"; }
.ri-tiktok-line:before { content: "\f373"; }
.ri-time-line:before { content: "\f20f"; }
.ri-upload-2-line:before { content: "\f24a"; }
.ri-user-add-line:before { content: "\f25e"; }
.ri-user-settings-line:before { content: "\f26e"; }
.ri-user-shared-line:before { content: "\f272"; }
.ri-wallet-3-line:before { content: "\f2ac"; }
.ri-youtube-line:before { content: "\f2d5"; }

/* Page base: applies only when <html> carries the gg class (restyled pages). */
html.gg,html.gg body{background:var(--surface-primary);color:var(--content-primary);margin:0}
html.gg body{margin:0;font-family:var(--font-grotesk);font-size:clamp(15px,1.03vw,16px);-webkit-font-smoothing:antialiased}
.gg a{color:var(--content-accent);text-decoration:none} .gg a:hover{color:var(--p-pink-400)}
.gg,.gg *{box-sizing:border-box}
.gg [hidden]{display:none !important}
/* Header ladder. The nav carries four labels, a sheet picker, the profile
   button and a badge; each step below drops what no longer fits instead of
   letting the row push the page sideways.
   1180: tighter nav padding, so the labels still fit.
   900:  the sheet picker goes, the labels stay.
   760:  labels become icons; the nav scrolls inside itself if the icons
         still do not fit. */
@media (max-width:1180px){.gg [data-hide-narrow]{display:none !important}.gg [data-nav] .nav-btn{padding:0 var(--pad-xs) !important}.gg [data-nav]{gap:0 !important}.gg [data-hdr]{gap:var(--gap-md) !important}}
@media (max-width:900px){.gg .sheet-sel{max-width:clamp(96px,20vw,160px)}}
@media (max-width:760px){.gg [data-nav] .nav-btn>span:not(.nav-badge){display:none !important}}
/* the 1180 step hides the icons with the other data-hide-narrow parts; at
   760 they are all the nav has, so they come back */
@media (max-width:760px){.gg [data-nav] .nav-btn>i[data-hide-narrow]{display:inline-block !important}}

/* app shell; the placeholder has no box so the header can stick to the page,
   and the header sits below the grid page's draft panel (z-index 10) */
#gg-header{display:contents}
/* One fluid layout scale for every page. Each token is a clamp(): the min is
   the phone value, the middle term is a share of the window so the box grows
   with it, and the max is the reference value a 1560px window shows. Pages
   never invent their own pixel sizes; they pick a token. Borders, focus
   rings, glyph sizes and the 32px touch floor stay fixed on purpose. */
.gg{
  /* one fluid gutter and one proportional shell: the content takes 92% of
     the window up to 1920px, then centres, instead of a fixed 1320px column */
  --gutter:clamp(16px,2.6vw,40px);
  --shell-max:min(1920px,92vw);
  /* side rails: workflow nav, mail folders, profile columns, review list */
  --rail-sm:clamp(168px,15vw,232px);
  --rail-md:clamp(184px,17vw,256px);
  --rail-lg:clamp(220px,22vw,340px);
  --rail-review:clamp(220px,24vw,300px);
  /* vertical and horizontal rhythm; each reference value lands on the
     1560px window, so the reference layout is unchanged */
  --gap-xs:clamp(2px,0.26vw,4px);
  --gap-sm:clamp(6px,0.51vw,8px);
  --gap-md:clamp(8px,0.77vw,12px);
  --gap-lg:clamp(12px,1.28vw,20px);
  --gap-xl:clamp(16px,1.79vw,28px);
  --gap-2xl:clamp(24px,3.08vw,48px);
  /* box padding: chips, cells, cards, dialogs */
  --pad-xs:clamp(4px,0.38vw,6px);
  --pad-sm:clamp(6px,0.64vw,10px);
  --pad-md:clamp(8px,0.9vw,14px);
  --pad-lg:clamp(12px,1.03vw,16px);
  --pad-xl:clamp(16px,1.54vw,24px);
  --pad-2xl:clamp(18px,1.79vw,28px);
  --pad-3xl:clamp(20px,2.05vw,32px);
  --pad-4xl:clamp(22px,2.56vw,40px);
  /* box sizes */
  --hdr-h:clamp(56px,4.1vw,64px);
  --control-h:clamp(32px,2.31vw,36px);
  --control-h-xs:32px;
  --control-h-md:clamp(38px,3.08vw,48px);
  --control-h-lg:clamp(42px,3.59vw,56px);
  --field-w:clamp(140px,10.9vw,170px);
  --card-min:clamp(230px,24vw,320px);
  --row-h:clamp(40px,2.82vw,44px);
  --av-sm:clamp(24px,1.79vw,28px);
  --av-md:clamp(28px,2.31vw,36px);
  --av-lg:clamp(36px,3.08vw,48px);
  --av-xl:clamp(52px,5.64vw,88px);
  --fs-brand:clamp(18px,1.41vw,22px);
}
.gg .app{min-height:100vh;min-height:100dvh;background:var(--surface-primary);color:var(--content-primary);font-family:var(--font-grotesk)}
.gg .hdr{position:sticky;top:0;z-index:9;background:var(--surface-primary);color:var(--content-primary);border-bottom:1px solid var(--border-light);font-family:var(--font-grotesk);font-size:clamp(15px,1.03vw,16px);line-height:normal;-webkit-font-smoothing:antialiased}
.gg .hdr-in{max-width:var(--shell-max);box-sizing:border-box;margin:0 auto;padding:0 var(--gutter);height:var(--hdr-h);display:flex;align-items:center;gap:var(--pad-xl)}
.gg .brand{display:flex;align-items:baseline;gap:var(--gap-sm);cursor:pointer;flex-shrink:0}
.gg .brand-name{font-family:var(--font-classic);font-size:var(--fs-brand);letter-spacing:-0.5px;color:var(--content-primary)}
.gg .nav{display:flex;gap:var(--gap-xs);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.gg .nav-btn,.gg .nav-btn:hover{display:flex;align-items:center;gap:var(--gap-sm);height:var(--control-h);padding:0 var(--pad-sm);border-radius:999px;border:none;cursor:pointer;font-family:var(--font-grotesk);font-size:var(--fs-sm);flex-shrink:0;background:transparent;color:var(--content-tertiary)}
.gg .nav-btn.on,.gg .nav-btn.on:hover{background:var(--surface-secondary);color:var(--content-primary)}
.gg .nav-btn i{font-size:18px}
.gg .nav-btn span{white-space:nowrap}
.gg .sheet-sel{height:var(--control-h);padding:0 var(--pad-sm);border:1px solid var(--input-border-default);border-radius:8px;background:var(--input-bg);font-family:var(--font-grotesk);font-size:var(--fs-sm);color:var(--content-primary);outline:none;max-width:clamp(160px,16vw,260px);flex-shrink:0}
.gg .sheet-sel:focus{border-color:var(--input-border-focus)}
/* keeps the viewport height under the 64px header plus its 1px border, so a
   short page still fills the window and a pane page scrolls its own body */
.gg .main{max-width:var(--shell-max);box-sizing:border-box;margin:0 auto;padding:var(--pad-4xl) var(--gutter) clamp(48px,6vw,96px);min-height:calc(100vh - var(--hdr-h) - 1px);min-height:calc(100dvh - var(--hdr-h) - 1px)}

/* profile picker (mockup header "me" menu) */
.gg .gg-me{position:relative;flex-shrink:0}
.gg .gg-me-btn{display:flex;align-items:center;gap:var(--gap-xs);min-height:var(--control-h-xs);border:none;background:transparent;padding:0;cursor:pointer;color:var(--content-tertiary)}
.gg .gg-me-btn i{font-size:16px}
.gg .gg-av{width:var(--av-md);height:var(--av-md);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-grotesk);font-weight:500;font-size:var(--fs-sm)}
.gg .gg-av.sm{width:var(--av-sm);height:var(--av-sm);font-size:12px}
.gg .gg-menu{position:absolute;right:0;top:calc(100% + var(--gap-sm));z-index:40;width:clamp(180px,16vw,220px);background:var(--surface-primary);border:1px solid var(--border-default);border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:2px}
.gg .gg-menu-label{padding:var(--pad-xs) var(--pad-sm);font-size:var(--fs-xs);color:var(--content-tertiary);overflow-wrap:anywhere}
.gg .gg-item{display:flex;align-items:center;gap:var(--pad-sm);height:var(--row-h);padding:0 var(--pad-sm);border-radius:8px;border:none;background:transparent;cursor:pointer;text-align:left;font-family:var(--font-grotesk);font-size:var(--fs-sm);color:var(--content-primary)}
.gg .gg-item:hover{background:var(--surface-secondary)}
.gg .gg-item>i{font-size:18px;color:var(--content-secondary)}
.gg .gg-item>span:not(.gg-av){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg .gg-sep{height:1px;background:var(--border-default);margin:var(--gap-xs) var(--pad-xs)}
.gg .gg-av.xl{width:var(--av-xl);height:var(--av-xl);font-size:var(--fs-2xl)}
.gg .gg-item .gg-check{margin-left:auto;font-size:16px;color:var(--content-primary)}
.gg .brand-sub{font-size:var(--fs-xs);color:var(--content-tertiary)}
.gg .nav-badge{display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--surface-accent);color:var(--p-white);font-size:11px}

/* GlossDS dialog, Input, color swatches and Toast (mockup profile modal) */
.gg .gg-overlay{position:fixed;inset:0;z-index:110;background:var(--p-black-a60);display:flex;align-items:center;justify-content:center;padding:var(--pad-lg)}
.gg .gg-dialog{width:100%;max-width:clamp(320px,32vw,440px);max-height:100%;overflow-y:auto;background:var(--dialog-bg);border:1px solid var(--border-light);border-radius:16px;padding:var(--pad-2xl);display:flex;flex-direction:column;gap:var(--gap-lg);color:var(--content-primary);font-family:var(--font-grotesk)}
.gg .gg-dialog-hd{display:flex;justify-content:space-between;align-items:center;gap:var(--gap-md)}
.gg .gg-dialog-title{margin:0;font-family:var(--font-classic);font-weight:400;font-size:var(--fs-2xl);line-height:var(--lh-2xl);letter-spacing:-0.7px}
.gg .gg-dialog-av{display:flex;justify-content:center}
.gg .gg-dialog-ft{display:flex;justify-content:space-between;gap:var(--gap-sm);padding-top:var(--gap-xs)}
.gg .gg-dialog-btns{display:flex;gap:var(--gap-sm)}
.gg .icon-btn{width:var(--control-h);height:var(--control-h);border-radius:999px;border:none;padding:1px var(--pad-xs);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--btn-secondary-bg);color:var(--btn-secondary-content)}
.gg .icon-btn i{font-size:24px;line-height:24px}
.gg .field{display:flex;flex-direction:column;justify-content:center;height:var(--control-h-lg);padding:var(--pad-xs) var(--pad-sm);border:1px solid var(--input-border-default);border-radius:12px;background:var(--input-bg);cursor:text}
.gg .field:focus-within{border-color:var(--content-secondary)}
.gg .field-label{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--content-tertiary);cursor:text}
.gg .field input{width:100%;min-width:0;padding:0;border:none;outline:none;background:transparent;font-family:var(--font-grotesk);font-size:var(--fs-base);line-height:var(--lh-base);color:var(--content-primary)}
.gg .field:not(:focus-within):has(input:placeholder-shown) .field-label{font-size:var(--fs-base);line-height:var(--lh-base)}
.gg .field:not(:focus-within):has(input:placeholder-shown) input{height:0}
.gg .gg-swatch-label{font-size:var(--fs-sm);color:var(--content-secondary);margin-bottom:var(--gap-sm)}
.gg .gg-swatches{display:flex;gap:var(--pad-sm);flex-wrap:wrap}
.gg .gg-swatch{width:var(--control-h);height:var(--control-h);padding:1px var(--pad-xs);border-radius:50%;cursor:pointer;border:3px solid transparent;box-shadow:0 0 0 2px var(--surface-primary) inset}
.gg .gg-swatch.on{border-color:var(--content-primary)}
.gg .gg-toast{position:fixed;left:50%;bottom:var(--pad-3xl);transform:translateX(-50%);z-index:60;min-width:clamp(220px,28vw,300px);max-width:calc(100vw - 32px);display:flex;align-items:center;gap:var(--gap-md);padding:var(--pad-sm) var(--pad-lg);border-radius:12px;background:var(--toast-success-bg);color:var(--p-white);box-shadow:0 4px 16px rgba(0,0,0,.2);font-family:var(--font-grotesk);font-size:var(--fs-sm)}
.gg .gg-toast i{font-size:18px;line-height:18px}

/* type */
.gg .h1{margin:0;font-family:var(--font-classic);font-weight:400;font-size:var(--fs-4xl);line-height:var(--lh-4xl);letter-spacing:-1.68px}
.gg .h2{margin:0;font-size:var(--fs-lg);font-weight:500;letter-spacing:-0.25px}
.gg .hint{font-size:var(--fs-xs);color:var(--content-tertiary);margin-top:var(--gap-xs)}
.gg .msg{min-height:17px;font-size:var(--fs-xs);color:var(--content-negative)}
.gg .msg.ok{color:var(--content-tertiary)}
.gg .msg:empty{display:none}
.gg .empty{padding:var(--pad-3xl) var(--pad-lg);font-size:var(--fs-sm);color:var(--content-tertiary)}
.gg .col{display:flex;flex-direction:column}

/* cards and form inputs (mockup dialog and input styles) */
.gg .card{background:var(--surface-primary);border:1px solid var(--border-light);border-radius:16px;padding:var(--pad-xl)}
.gg .input{height:var(--control-h);padding:0 var(--pad-sm);border:1px solid var(--input-border-default);border-radius:8px;background:var(--input-bg);font-family:var(--font-grotesk);font-size:var(--fs-sm);color:var(--content-primary);outline:none;min-width:0}
.gg .input:focus{border-color:var(--input-border-focus)}

/* list table (mockup Campaigns table) */
.gg .t-head{display:grid;grid-template-columns:var(--cols);gap:var(--gap-lg);padding:0 var(--pad-lg) var(--pad-md);font-size:var(--fs-xs);color:var(--content-tertiary);border-bottom:1px solid var(--border-light)}
.gg .t-row,.gg .t-row:hover{display:grid;grid-template-columns:var(--cols);gap:var(--gap-lg);align-items:center;padding:var(--pad-lg) var(--pad-lg);border-bottom:1px solid var(--border-light);cursor:pointer;font-size:var(--fs-sm);color:var(--content-primary)}
.gg .t-row:hover{background:var(--surface-secondary)}
.gg .t-name{min-width:0;font-size:var(--fs-base);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg .t-arrow{font-size:var(--fs-lg);color:var(--content-tertiary)}
.gg .t-sec{color:var(--content-secondary)}
.gg .right{text-align:right}

/* workflow tabs (mockup campaign side nav) */
.gg .wf{display:flex;flex-direction:column;gap:var(--gap-xs)}
.gg .wf-label{padding:0 var(--pad-sm) var(--pad-sm);font-size:var(--fs-xs);color:var(--content-tertiary)}
.gg .wf-tab{display:flex;align-items:flex-start;padding:var(--pad-sm) var(--pad-md);border-radius:12px;border:none;cursor:pointer;text-align:left;font-family:var(--font-grotesk);background:transparent}
.gg .wf-tab:hover,.gg .wf-tab.on{background:var(--surface-secondary)}
.gg .wf-tab:disabled{cursor:not-allowed;background:transparent}
.gg .wf-in{display:flex;flex-direction:column;gap:var(--gap-xs);min-width:0}
.gg .wf-name{font-size:var(--fs-sm);line-height:1.33;font-weight:500;color:var(--content-secondary)}
.gg .wf-tab.on .wf-name{color:var(--content-primary)}
.gg .wf-tab:disabled .wf-name{color:var(--content-disabled)}
.gg .wf-sub{font-size:var(--fs-xs);color:var(--content-tertiary)}
/* the dark accent read at 2.9:1 on the selected tab; the lighter step of the
   same pink keeps the count readable, and light mode keeps the accent */
.gg .wf-sub.act{color:var(--p-pink-400)}
[data-theme="light"] .wf-sub.act{color:var(--content-accent)}

/* data table (mockup Vetting table) */
.gg .v-scroll{overflow-x:auto;padding-bottom:var(--pad-sm)}
.gg .v-head{display:grid;grid-template-columns:var(--cols);gap:var(--gap-md);align-items:end;padding:0 var(--gap-xs) var(--pad-sm);font-size:var(--fs-xs);color:var(--content-tertiary);border-bottom:1px solid var(--border-light)}
.gg .v-head .btn-quiet{height:auto;padding:0;font:inherit}
.gg .v-row{display:grid;grid-template-columns:var(--cols);gap:var(--gap-md);align-items:center;padding:var(--pad-sm) var(--gap-xs);border-bottom:1px solid var(--border-light);font-size:var(--fs-sm)}
.gg a.v-row,.gg a.v-row:hover{color:var(--content-primary)}
.gg a.v-row:hover{background:var(--surface-secondary)}
.gg .v-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gg .v-name{font-size:var(--fs-sm);font-weight:500}
.gg .v-handle{font-size:var(--fs-xs);color:var(--content-tertiary)}
.gg .pill{display:inline-flex;align-items:center;height:var(--control-h-xs);padding:0 var(--pad-sm);border:none;border-radius:999px;font-family:var(--font-grotesk);font-size:var(--fs-xs);font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--p-gray-950)}

/* GlossDS Button (x-small) and Tag */
.gg .btn{height:var(--control-h-xs);padding:0 var(--gap-sm);border-radius:var(--radius-round);border:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2x);white-space:nowrap;flex-shrink:0;box-sizing:border-box;font-family:var(--font-grotesk);font-weight:var(--fw-bold);font-size:var(--fs-sm);line-height:var(--lh-sm);cursor:pointer}
.gg .btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-content)}
.gg .btn-secondary:active{background:var(--btn-secondary-bg-pressed)}
.gg .btn-secondary:disabled{background:var(--btn-secondary-bg-disabled);color:var(--btn-content-disabled);cursor:not-allowed}
.gg .btn-sm{height:var(--control-h);padding:1px var(--pad-lg);font-size:var(--fs-sm);font-weight:500;line-height:var(--lh-sm)}
.gg .btn-lg{height:var(--control-h-md);padding:1px var(--pad-xl);font-size:var(--fs-base);font-weight:500;line-height:var(--lh-base)}
.gg .btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-content)}
.gg .btn-primary:active{background:var(--btn-primary-bg-pressed)}
.gg .btn-primary:disabled{background:var(--btn-primary-bg-disabled);color:var(--btn-content-disabled);cursor:not-allowed}
.gg .btn-tertiary{background:var(--btn-tertiary-bg);color:var(--btn-tertiary-content);border:1px solid var(--btn-tertiary-border)}
.gg .btn-tertiary:active{background:var(--btn-tertiary-bg-pressed)}
.gg .btn-danger-text{background:transparent;color:var(--content-negative)}
.gg .btn-danger-text:active{background:var(--btn-secondary-bg)}
.gg .tag{display:inline-flex;align-items:center;gap:var(--gap-xs);min-height:24px;padding:2px var(--space-2x);border-radius:var(--radius-round);background:var(--tag-default-bg);color:var(--tag-default-content);font-family:var(--font-grotesk);font-size:var(--fs-sm);white-space:nowrap}
.gg .tag-info{background:var(--tag-info-bg);color:var(--tag-info-content)}
.gg .tag-positive{background:var(--tag-success-bg);color:var(--tag-success-content)}
.gg .gg-keys{position:fixed;right:var(--pad-xl);bottom:var(--pad-xl);z-index:60;width:clamp(240px,26vw,340px);background:var(--surface-primary);border:1px solid var(--border-default);border-radius:16px;padding:var(--pad-lg) var(--pad-lg);box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:var(--fs-sm)}
.gg .gg-keys[hidden]{display:none}
.gg .gg-keys-title{font-weight:500;margin-bottom:var(--pad-sm)}
.gg .gg-keys-list{display:grid;grid-template-columns:auto 1fr;gap:var(--gap-xs) var(--pad-md);margin:0}
.gg .gg-keys-list dt{font-family:var(--font-grotesk);color:var(--content-primary);white-space:nowrap}
.gg .gg-keys-list dd{margin:0;color:var(--content-secondary)}

/* Fit to the viewport and stay usable on a phone. Pages that manage their
   own panes (review, campaigns) opt in with their own rules below.
   The tokens already shrink with the window; these steps change the layout
   itself, so each size gets the arrangement it can hold. */
.gg img,.gg video,.gg table{max-width:100%}
.gg .h1{font-size:var(--fs-4xl);line-height:var(--lh-4xl)}
@media (max-width:900px){
  /* wide rows become stacked cards; a dialog fills the width it has */
  .gg .gg-dialog{max-width:min(560px,92vw)}
  .gg .gg-keys{right:var(--pad-lg);bottom:var(--pad-lg)}
}
@media (max-width:760px){
  .gg .main{padding:var(--pad-xl) var(--gutter) var(--pad-2xl)}
  .gg .hdr-in{padding:0 var(--pad-lg);height:var(--hdr-h);gap:var(--gap-md)}
  .gg .rv-sub,.gg .sub{max-width:100%}
  .gg .rv-top{gap:var(--gap-lg)}
  .gg .c-actions{justify-content:stretch}
  .gg .c-actions .btn{flex:1 1 auto}
  .gg .r-add input{min-width:0}
  /* a full-width dialog with its own scroll, never taller than the window */
  .gg .gg-dialog{max-width:100%;max-height:calc(100dvh - 2 * var(--pad-lg));padding:var(--pad-xl)}
  .gg .gg-keys{left:var(--pad-lg);right:var(--pad-lg);bottom:var(--pad-lg);width:auto}
}
@media (max-width:600px){
  /* actions stack full width so a thumb reaches them */
  .gg .gg-dialog-ft,.gg .gg-dialog-btns{flex-direction:column;align-items:stretch}
  .gg .gg-dialog-btns .btn,.gg .gg-dialog-ft .btn{width:100%}
  .gg .gg-toast{left:var(--pad-lg);right:var(--pad-lg);bottom:var(--pad-lg);transform:none;min-width:0}
}
@media (max-width:480px){
  .gg .main{padding:var(--pad-lg) var(--gutter) var(--pad-2xl)}
  .gg .gg-keys{display:none}
}