/*
 * ============================================================================
 * PHANTOM GLASS Design System
 * ============================================================================
 *
 * A frosted-glass design system extracted from the LordVCAM iOS tweak UI.
 * Source of truth: headers/VCDesignTokens.h (iOS) → phantom-glass.css (Web)
 * Every CSS token maps 1:1 to an Objective-C constant in VCDesignTokens.h.
 *
 * iOS source files that consume VCDesignTokens.h:
 *   - FloatingControl.m (controls panel, neon glow system, button factory)
 *   - ControlMenu.m (main menu, mode selectors, toggles)
 *   - LicenseWindow.m (login, modals, form fields, close buttons)
 *   - PreviewOverlay.m (preview panel, stats)
 *
 * Philosophy:
 *   Dark blur panels. Colored neon glows. Ice blue neutrals. Gold crown accent.
 *   NOT generic glassmorphism -- every token is an iOS UIKit constant converted
 *   to CSS. The glow system is the signature: every interactive element casts
 *   a colored shadow that matches its semantic purpose.
 *
 * Color key (canonical values from VCDesignTokens.h):
 *   Ice Blue    #B3D9FF -- neutral glow (replaces white, invisible on dark blur)
 *   Gold        #F2BF33 -- crown brand accent, idle state, warning, retry
 *   Neon Yellow #FFD91A -- LordVCAM title, celebration messages
 *   Green       #33B34D -- stream connected, success, confirm, access
 *   Green Bright#33CC66 -- switch ON state, connected indicator
 *   Purple      #804DCC -- gallery mode, secondary actions
 *   Red         #D94033 -- destructive: ban, logout, error, alert
 *   Red Close   #E64033 -- close X button (brighter for dark blur visibility)
 *   Blue        #268CF2 -- info, support, system update
 *   Accent      #3399FF -- links, focus ring, URL
 *   Cyan        #00CCE6 -- recharge, wallet, balance
 *   Orange      #D9664D -- Live Motion intensity label
 *
 * Font stack: Geist Sans (body), Geist Mono (technical data)
 * ============================================================================
 */


/* ============================================================================
 * FONTS
 * Geist Sans + Geist Mono -- Vercel's open-source family, designed for UI.
 * Matches iOS system font proportions (SF Pro) without licensing issues.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');


/* ============================================================================
 * A) DESIGN TOKENS -- CSS Custom Properties
 * Every token has a comment showing its iOS source.
 * ============================================================================ */

:root {
  /* ── Semantic Colors ──────────────────────────────────────────────────── */

  /* Ice Blue: neutral neon glow. iOS: kVCIceBlueColor — UIColor(0.7, 0.85, 1.0)
   * Source: VCDesignTokens.h */
  --pg-ice-blue: #B3D9FF;
  --pg-ice-blue-rgb: 179, 217, 255;

  /* Gold Crown: brand accent, idle state, warning. iOS: kVCGoldColor — UIColor(0.95, 0.75, 0.2)
   * Source: VCDesignTokens.h */
  --pg-gold: #F2BF33;
  --pg-gold-rgb: 242, 191, 51;

  /* Neon Yellow: title/branding glow. iOS: kVCNeonYellowColor — UIColor(1.0, 0.85, 0.1)
   * Source: VCDesignTokens.h */
  --pg-neon-yellow: #FFD91A;
  --pg-neon-yellow-rgb: 255, 217, 26;

  /* Stream Green: success actions. iOS: kVCGreenColor — UIColor(0.2, 0.7, 0.3)
   * Source: VCDesignTokens.h */
  --pg-green: #33B34D;
  --pg-green-rgb: 51, 179, 77;

  /* Connected Green (bright): switch ON, indicators. iOS: kVCGreenBrightColor — UIColor(0.2, 0.8, 0.4)
   * Source: VCDesignTokens.h */
  --pg-green-bright: #33CC66;
  --pg-green-bright-rgb: 51, 204, 102;

  /* License Green: remaining time label. Standardized to kVCGreenColor.
   * Source: VCDesignTokens.h kVCGreenColor — UIColor(0.2, 0.7, 0.3) */
  --pg-green-license: #33B34D;
  --pg-green-license-rgb: 51, 179, 77;

  /* Switch Green: replacement toggle. iOS: UIColor(0.2, 0.8, 0.4)
   * Source: ControlMenu.m replacementSwitch onTintColor */
  --pg-green-switch: #33CC66;

  /* Gallery Purple: gallery mode, select. iOS: kVCPurpleColor — UIColor(0.5, 0.3, 0.8)
   * Source: VCDesignTokens.h */
  --pg-purple: #804DCC;
  --pg-purple-rgb: 128, 77, 204;

  /* Destructive Red: ban, logout, error, alert. iOS: kVCRedColor — UIColor(0.85, 0.25, 0.2)
   * Source: VCDesignTokens.h */
  --pg-red: #D94033;
  --pg-red-rgb: 217, 64, 51;

  /* Close Button Red: brighter for dark blur. iOS: kVCRedCloseColor — UIColor(0.9, 0.25, 0.2)
   * Source: VCDesignTokens.h */
  --pg-red-close: #E64033;
  --pg-red-close-rgb: 230, 64, 51;

  /* Close Glow Red: radial gradient center. iOS: UIColor(0.9, 0.2, 0.2, 0.4)
   * Source: FloatingControl.m pcGrad, LicenseWindow.m createCloseButton glowGrad */
  --pg-red-glow: rgba(230, 51, 51, 0.4);

  /* Reset Button Red: iOS: UIColor(0.7, 0.2, 0.2, 0.8)
   * Source: FloatingControl.m updateButtonTints resetBtn */
  --pg-red-reset: #B33333;

  /* Info/Support Blue: support, info. iOS: kVCBlueColor — UIColor(0.15, 0.55, 0.95)
   * Source: VCDesignTokens.h */
  --pg-blue: #268CF2;
  --pg-blue-rgb: 38, 140, 242;

  /* Accent Blue: links, focus, URL. iOS: kVCAccentColor — UIColor(0.2, 0.6, 1.0)
   * Source: VCDesignTokens.h */
  --pg-accent: #3399FF;
  --pg-accent-rgb: 51, 153, 255;

  /* Gallery Icon Blue: icon state gallery. iOS: UIColor(0.2, 0.5, 1.0)
   * Source: FloatingControl.m updateIconColor VCIconStateGallery */
  --pg-blue-gallery: #3380FF;

  /* Active Control Blue: button active state. iOS: UIColor(0.2, 0.4, 0.8, 0.8)
   * Source: FloatingControl.m updateButtonTints activeColor */
  --pg-blue-active: rgba(51, 102, 204, 0.8);

  /* Active Neon Blue: active glow. iOS: UIColor(0.2, 0.4, 0.8)
   * Source: FloatingControl.m updateButtonTints blueNeon */
  --pg-blue-neon: #3366CC;

  /* Audio Switch Blue: iOS: UIColor(0.3, 0.6, 0.9)
   * Source: ControlMenu.m audioReplacementSwitch onTintColor */
  --pg-blue-audio: #4D99E6;

  /* Cyan: recharge, wallet, balance. iOS: kVCCyanColor — UIColor(0.0, 0.8, 0.9)
   * Source: VCDesignTokens.h */
  --pg-cyan: #00CCE6;
  --pg-cyan-rgb: 0, 204, 230;

  /* Live Motion Orange: intensity label. iOS: kVCOrangeColor — UIColor(0.85, 0.4, 0.3)
   * Source: VCDesignTokens.h */
  --pg-orange: #D9664D;
  --pg-orange-rgb: 217, 102, 77;

  /* Floating Window Gold: switch tint. Standardized to kVCGoldColor.
   * Source: VCDesignTokens.h kVCGoldColor — UIColor(0.95, 0.75, 0.2) */
  --pg-gold-switch: #F2BF33;

  /* Disconnected Red (icon): iOS: UIColor(0.9, 0.25, 0.2)
   * Source: FloatingControl.m updateIconColor VCIconStateDisconnected */
  --pg-red-disconnect: #E64033;

  /* Error text red: iOS: UIColor(1.0, 0.4, 0.4)
   * Source: LicenseWindow.m error box msgLabel foreground */
  --pg-red-error-text: #FF6666;

  /* Gold license: kLicGoldColor iOS: UIColor(0.95, 0.75, 0.2)
   * Source: LicenseWindow.m kLicGoldColor */
  --pg-gold-license: #F2BF33;

  /* ── Background Colors ────────────────────────────────────────────────── */

  /* Panel bg: iOS dark blur effect (UIBlurEffectStyleDark) approximation.
   * Source: All files use [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark] */
  --pg-bg-body: #0A0A0F;
  --pg-bg-panel: rgba(18, 18, 24, 0.75);

  /* kLicBgColor: iOS: UIColor(white:0.12)
   * Source: LicenseWindow.m kLicBgColor */
  --pg-bg-solid: #1F1F1F;

  /* Control button bg: iOS: UIColor(white:0.2, alpha:0.8)
   * Source: FloatingControl.m makeControlButton, ControlMenu.m openFloatingBtn */
  --pg-bg-button: rgba(51, 51, 51, 0.8);

  /* Inactive/unselected button bg: iOS: UIColor(white:0.15, alpha:0.6)
   * Source: ControlMenu.m streamBtn unselected, clearGalleryButton inactive */
  --pg-bg-inactive: rgba(38, 38, 38, 0.6);

  /* Floating button bg: iOS: UIColor(white:0.1, alpha:0.85)
   * Source: FloatingControl.m floatingButton backgroundColor */
  --pg-bg-floating: rgba(26, 26, 26, 0.85);

  /* Field bg: iOS: UIColor(white:1, alpha:0.08)
   * Source: LicenseWindow.m kLicFieldBgColor, ControlMenu.m ipField */
  --pg-bg-field: rgba(255, 255, 255, 0.08);

  /* Close button bg: iOS: UIColor(red:0.9, green:0.2, blue:0.2, alpha:0.12)
   * Source: LicenseWindow.m createCloseButton, FloatingControl.m panelCloseBtn */
  --pg-bg-close: rgba(230, 51, 51, 0.12);

  /* Error box bg: iOS: UIColor(white:0, alpha:0.3)
   * Source: LicenseWindow.m errorBox backgroundColor */
  --pg-bg-error-box: rgba(0, 0, 0, 0.3);

  /* Copy button bg: iOS: UIColor(white:1, alpha:0.08)
   * Source: LicenseWindow.m copyBtn backgroundColor */
  --pg-bg-copy: rgba(255, 255, 255, 0.08);

  /* Backdrop: iOS: UIColor(white:0, alpha:0.3)
   * Source: ControlMenu.m backdropView, FloatingControl.m centered mode */
  --pg-bg-backdrop: rgba(0, 0, 0, 0.3);

  /* Backdrop strong: iOS: alpha:0.5-0.7 variations
   * Source: LicenseWindow.m createDismissableBackdrop alpha:0.5-0.7 */
  --pg-bg-backdrop-strong: rgba(0, 0, 0, 0.5);

  /* ── Border Colors ────────────────────────────────────────────────────── */

  /* Panel/container border: iOS: UIColor(white:1, alpha:0.15)
   * Source: LicenseWindow.m createContainer, ControlMenu.m blurView, FloatingControl.m panelBlur */
  --pg-border-panel: rgba(255, 255, 255, 0.15);

  /* Button border (on dark): iOS: UIColor(white:1, alpha:0.2)
   * Source: FloatingControl.m makeControlButton, ControlMenu.m inactive buttons */
  --pg-border-button: rgba(255, 255, 255, 0.2);

  /* Divider: iOS: UIColor(white:1, alpha:0.12)
   * Source: All files divider backgroundColor */
  --pg-border-divider: rgba(255, 255, 255, 0.12);

  /* Field border: iOS: UIColor(white:1, alpha:0.12)
   * Source: LicenseWindow.m kLicFieldBorderColor, ControlMenu.m ipField */
  --pg-border-field: rgba(255, 255, 255, 0.12);

  /* Close button border: iOS: UIColor(red:0.9, green:0.25, blue:0.2, alpha:0.5-0.6)
   * Source: LicenseWindow.m createCloseButton, FloatingControl.m panelCloseBtn */
  --pg-border-close: rgba(230, 64, 51, 0.5);

  /* Floating button border (idle): iOS: UIColor(red:0.85, green:0.65, blue:0.2, alpha:0.6)
   * Source: FloatingControl.m floatingButton borderColor */
  --pg-border-gold: rgba(217, 166, 51, 0.6);

  /* Black preset circle: iOS: UIColor(white:0.6, alpha:0.6)
   * Source: FloatingControl.m blackBtn borderColor */
  --pg-border-circle: rgba(153, 153, 153, 0.6);

  /* Active preset circle: iOS: white, borderWidth:2
   * Source: FloatingControl.m activeBgButton borderColor */
  --pg-border-active: rgba(255, 255, 255, 1.0);

  /* ── Text Colors ──────────────────────────────────────────────────────── */

  /* Primary text: iOS: UIColor(white:1, alpha:0.8)
   * Source: ControlMenu.m toggle labels textColor */
  --pg-text-primary: rgba(255, 255, 255, 0.8);

  /* Secondary text: iOS: UIColor(white:1, alpha:0.6)
   * Source: FloatingControl.m header labels, bgLabel, adLabel */
  --pg-text-secondary: rgba(255, 255, 255, 0.6);

  /* Muted text: iOS: UIColor(white:1, alpha:0.5)
   * Source: ControlMenu.m chevronBtn, unselected mode button text */
  --pg-text-muted: rgba(255, 255, 255, 0.5);

  /* Dim text: iOS: UIColor(white:1, alpha:0.4)
   * Source: LicenseWindow.m field labels, version labels */
  --pg-text-dim: rgba(255, 255, 255, 0.4);

  /* Very dim: iOS: UIColor(white:1, alpha:0.25)
   * Source: LicenseWindow.m styleTextField placeholder */
  --pg-text-placeholder: rgba(255, 255, 255, 0.25);

  /* Body text: iOS: UIColor(white:1, alpha:0.7)
   * Source: LicenseWindow.m msgLabel (device limit, server error) */
  --pg-text-body: rgba(255, 255, 255, 0.7);

  /* ── Spacing Scale ────────────────────────────────────────────────────── */

  /* iOS spacing values extracted from layout constants */
  --pg-space-1: 4px;   /* FloatingControl.m grid gap between rows */
  --pg-space-2: 8px;   /* Universal divider margin (before & after), section spacing */
  --pg-space-3: 10px;  /* PreviewOverlay.m kPreviewPadding */
  --pg-space-4: 12px;  /* FloatingControl.m kPanelPadding, LicenseWindow.m field gap */
  --pg-space-5: 16px;  /* ControlMenu.m kMenuPadding, LicenseWindow.m divider→content */
  --pg-space-6: 20px;  /* LicenseWindow.m kLicPadding, label→field gap */
  --pg-space-7: 24px;  /* Header row height */
  --pg-space-8: 28px;  /* FloatingControl.m circleSize, lmBtnH (Live Motion buttons) */

  /* ── Border Radius ────────────────────────────────────────────────────── */

  /* Error box radius: iOS: cornerRadius 6
   * Source: LicenseWindow.m errorBox, PreviewOverlay.m previewImageView */
  --pg-radius-xs: 6px;

  /* Text field radius: iOS: cornerRadius 8
   * Source: LicenseWindow.m styleTextField, FloatingControl.m lmBtnH buttons */
  --pg-radius-sm: 8px;

  /* Button radius: iOS: cornerRadius 10
   * Source: All makeControlButton, action buttons, mode selectors */
  --pg-radius-md: 10px;

  /* Close btn (small): iOS: cornerRadius 11-12
   * Source: PreviewOverlay.m closeBtn r=11, FloatingControl.m panelCloseBtn r=12 */
  --pg-radius-close: 12px;

  /* Preview panel: iOS: cornerRadius 12
   * Source: PreviewOverlay.m kPreviewCornerRadius */
  --pg-radius-lg: 14px;

  /* Container/panel radius: iOS: cornerRadius 16
   * Source: LicenseWindow.m kLicCornerRadius, ControlMenu.m kMenuCornerRadius,
   *         FloatingControl.m panelBlur cornerRadius */
  --pg-radius-xl: 16px;

  /* Close button (large): iOS: cornerRadius 15-16
   * Source: ControlMenu.m closeButton r=15, LicenseWindow.m createCloseButton r=16 */
  --pg-radius-close-lg: 16px;

  /* Floating button: iOS: cornerRadius = kButtonSize / 2.0 (50/2 = 25, circle)
   * Source: FloatingControl.m floatingButton */
  --pg-radius-full: 9999px;

  /* ── Border Width ─────────────────────────────────────────────────────── */

  /* Panel/container border: iOS: borderWidth 0.5
   * Source: All panel UIVisualEffectView, control buttons, field borders */
  --pg-border-thin: 0.5px;

  /* Floating button, close buttons: iOS: borderWidth 1-1.5
   * Source: FloatingControl.m floatingButton bw=1, close buttons bw=1.5 */
  --pg-border-medium: 1px;
  --pg-border-close-width: 1.5px;

  /* Active selection: iOS: borderWidth 2
   * Source: FloatingControl.m activeBgButton */
  --pg-border-thick: 2px;

  /* ── Typography ───────────────────────────────────────────────────────── */

  --pg-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --pg-font-mono: 'Geist Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* iOS font sizes (system font sizes map 1:1 to px on web) */
  --pg-text-xs: 10px;   /* LicenseWindow.m footer version label font size 10 */
  --pg-text-sm: 11px;   /* ControlMenu.m ipField 11pt, field labels 11pt */
  --pg-text-md: 12px;   /* ControlMenu.m mode buttons 12pt, bottom buttons */
  --pg-text-base: 13px; /* FloatingControl.m header 13pt, ControlMenu.m 13pt */
  --pg-text-lg: 14px;   /* Toggle labels 14pt, button text 14pt */
  --pg-text-xl: 15px;   /* LicenseWindow.m styleTextField 15pt, gallery buttons */
  --pg-text-2xl: 16px;  /* LicenseWindow.m large button text 16pt */
  --pg-text-3xl: 17px;  /* ControlMenu.m title bold 17pt */
  --pg-text-4xl: 20px;  /* LicenseWindow.m title bold 20pt */

  /* ── Shadow / Glow System ─────────────────────────────────────────────── */

  /* Neon glow system: maps to VCDesignTokens.h kVCGlow* constants.
   * iOS: layer.shadowRadius/shadowOpacity/shadowOffset(Zero) = centered glow.
   * CSS: box-shadow: 0 0 <radius> rgba(<color>, <opacity>) */

  /* Text/chevrons: kVCGlowText=4, kVCGlowOpTitle=0.9 */
  --pg-glow-text: 0 0 4px;
  --pg-glow-text-opacity: 0.9;

  /* Version label: kVCGlowText=4, kVCGlowOpLabel=0.6 */
  --pg-glow-version: 0 0 4px;
  --pg-glow-version-opacity: 0.6;

  /* Inactive buttons (wide/soft): kVCGlowSoft=10, kVCGlowOpInactive=0.35 */
  --pg-glow-button: 0 0 10px;
  --pg-glow-button-opacity: 0.35;

  /* Active buttons (tight/bright): kVCGlowButton=6, kVCGlowOpActive=0.7 */
  --pg-glow-active: 0 0 6px;
  --pg-glow-active-opacity: 0.7;

  /* Control grid buttons (d-pad): kVCGlowLabel=8, kVCGlowOpControl=0.55 */
  --pg-glow-control: 0 0 8px;
  --pg-glow-control-opacity: 0.55;

  /* Dividers (subtle): kVCGlowDivider=6, kVCGlowOpDivider=0.3 */
  --pg-glow-divider: 0 0 6px;
  --pg-glow-divider-opacity: 0.3;

  /* Titles/headers: kVCGlowTitle=8, kVCGlowOpTitle=0.9 */
  --pg-glow-title: 0 0 8px;
  --pg-glow-title-opacity: 0.9;

  /* Floating button: kVCGlowTitle=8, kVCGlowOpFloating=0.8 */
  --pg-glow-floating: 0 0 8px;
  --pg-glow-floating-opacity: 0.8;

  /* Toggle switches: kVCGlowSwitch=5, kVCGlowOpLabel=0.6 */
  --pg-glow-switch: 0 0 5px;
  --pg-glow-switch-opacity: 0.6;

  /* Field/section labels: kVCGlowLabel=8, kVCGlowOpLabel=0.6 */
  --pg-glow-label: 0 0 8px;
  --pg-glow-label-opacity: 0.6;

  /* Focus state (text field active): radius 6, opacity 0.7
   * Source: LicenseWindow.m textFieldDidBeginEditing */
  --pg-glow-focus: 0 0 6px;
  --pg-glow-focus-opacity: 0.7;

  /* Icon glow: radius 6, opacity 0.7
   * Source: LicenseWindow.m ban/expired/error/maintenance icon shadows */
  --pg-glow-icon: 0 0 6px;
  --pg-glow-icon-opacity: 0.7;

  /* Link glow: radius 6, opacity 0.8
   * Source: ControlMenu.m websiteLink, LicenseWindow.m websiteButton */
  --pg-glow-link: 0 0 6px;
  --pg-glow-link-opacity: 0.8;

  /* ── Blur ──────────────────────────────────────────────────────────────── */

  /* iOS UIBlurEffectStyleDark -- approximation for backdrop-filter
   * Source: All files use [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark] */
  --pg-blur-panel: 20px;
  --pg-blur-nav: 16px;
  --pg-blur-modal: 24px;

  /* ── Layout ───────────────────────────────────────────────────────────── */

  /* Panel widths from iOS constants */
  --pg-width-panel: 220px;   /* FloatingControl.m kPanelWidth */
  --pg-width-menu: 280px;    /* ControlMenu.m kMenuWidth */
  --pg-width-modal: 300px;   /* LicenseWindow.m kLicWindowWidth */
  --pg-width-preview: 340px; /* PreviewOverlay.m kPreviewWidth */

  /* Button heights */
  --pg-height-btn: 40px;     /* FloatingControl.m kControlBtnSize, ControlMenu.m buttons */
  --pg-height-btn-sm: 36px;  /* ControlMenu.m mode selector, login buttons */
  --pg-height-btn-lg: 44px;  /* LicenseWindow.m kLicButtonHeight */
  --pg-height-field: 42px;   /* LicenseWindow.m kLicFieldHeight */

  /* Floating button size */
  --pg-size-floating: 50px;  /* FloatingControl.m kButtonSize */

  /* ── Animation ────────────────────────────────────────────────────────── */

  /* Show animation: iOS: duration:0.25-0.3, springDamping:0.8, velocity:0.5
   * Source: FloatingControl.m showPanel, ControlMenu.m show, LicenseWindow.m showWindow */
  --pg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pg-duration-show: 0.3s;
  --pg-duration-hide: 0.2s;
  --pg-duration-fast: 0.15s;
  --pg-duration-idle: 0.5s;

  /* Snap animation: iOS: duration:0.4, springDamping:0.7
   * Source: FloatingControl.m snapToEdge */
  --pg-duration-snap: 0.4s;

  /* Rebuild animation: iOS: duration:0.25, springDamping:0.85
   * Source: ControlMenu.m rebuildMenuContent */
  --pg-duration-rebuild: 0.25s;

  /* Idle fade: iOS: kIdleAlpha = 0.4, kIdleTimeout = 3.0
   * Source: FloatingControl.m startIdleTimer */
  --pg-idle-alpha: 0.4;
  --pg-idle-timeout: 3s;
}


/* ============================================================================
 * B) BASE STYLES
 * ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--pg-font-sans);
  font-size: var(--pg-text-lg);
  color: var(--pg-text-primary);
  background-color: var(--pg-bg-body);
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--pg-ice-blue-rgb), 0.2);
  border-radius: var(--pg-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--pg-ice-blue-rgb), 0.35);
}

/* ── Selection ──────────────────────────────────────────────────────────── */

::selection {
  background: rgba(var(--pg-accent-rgb), 0.3);
  color: #fff;
}


/* ============================================================================
 * C) COMPONENT CLASSES
 * ============================================================================ */


/* ── 1. Card (.pg-card) ──────────────────────────────────────────────────
 * Translates: UIVisualEffectView with UIBlurEffectStyleDark
 * Source: ControlMenu.m blurView, FloatingControl.m panelBlur, LicenseWindow.m createContainer
 * iOS: cornerRadius 16, borderWidth 0.5, borderColor white 15%
 */
.pg-card {
  background: var(--pg-bg-panel);
  backdrop-filter: blur(var(--pg-blur-panel));
  -webkit-backdrop-filter: blur(var(--pg-blur-panel));
  border: var(--pg-border-thin) solid var(--pg-border-panel);
  border-radius: var(--pg-radius-xl);
  padding: var(--pg-space-5);
  position: relative;
  overflow: hidden;
}

.pg-card--compact {
  padding: var(--pg-space-4);
  border-radius: var(--pg-radius-lg);
}

/* Card header gradient top border (simulates iOS panel header glow) */
.pg-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--pg-space-2);
  margin-bottom: var(--pg-space-2);
  border-bottom: var(--pg-border-thin) solid var(--pg-border-divider);
  position: relative;
}

/* Ice blue glow on card header divider -- matches iOS divider glow */
.pg-card__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  box-shadow: var(--pg-glow-divider) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-divider-opacity));
}

.pg-card__title {
  font-size: var(--pg-text-3xl);
  font-weight: 700;
  color: #fff;
}

/* Hover glow on cards */
.pg-card:hover {
  border-color: rgba(var(--pg-ice-blue-rgb), 0.2);
  box-shadow: 0 0 20px rgba(var(--pg-ice-blue-rgb), 0.08);
}


/* ── 2. Button (.pg-btn) ─────────────────────────────────────────────────
 * Translates: iOS action buttons (makeControlButton, connect, gallery, logout, etc.)
 * Source: FloatingControl.m makeControlButton -- 40x40, cornerRadius 10
 * Source: ControlMenu.m all buttons -- height 36-40, cornerRadius 10
 */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pg-space-1);
  height: var(--pg-height-btn);
  padding: 0 var(--pg-space-5);
  font-family: var(--pg-font-sans);
  font-size: var(--pg-text-lg);
  font-weight: 600;
  color: #fff;
  background: var(--pg-bg-button);
  border: var(--pg-border-thin) solid var(--pg-border-button);
  border-radius: var(--pg-radius-md);
  cursor: pointer;
  transition: all var(--pg-duration-fast) ease;
  text-decoration: none;
  white-space: nowrap;
  position: relative;

  /* Default: ice blue glow -- matches makeControlButton default shadow */
  box-shadow: var(--pg-glow-button) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-button-opacity));
}

.pg-btn:hover {
  box-shadow: var(--pg-glow-control) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-control-opacity));
  border-color: rgba(var(--pg-ice-blue-rgb), 0.3);
}

.pg-btn:active {
  transform: scale(0.97);
  filter: brightness(0.85);
}

.pg-btn--sm {
  height: var(--pg-height-btn-sm);
  font-size: var(--pg-text-md);
  padding: 0 var(--pg-space-4);
}

.pg-btn--lg {
  height: var(--pg-height-btn-lg);
  font-size: var(--pg-text-2xl);
  font-weight: 700;
  padding: 0 var(--pg-space-6);
}

/* Primary (green): stream connect, access, success
 * Source: ControlMenu.m connectButton bg:UIColor(0.2, 0.7, 0.3) shadow same */
.pg-btn--primary {
  background: var(--pg-green);
  border-color: transparent;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-green-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--primary:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-green-rgb), 0.8);
  filter: brightness(1.1);
}

/* Danger (red): logout, ban, destructive
 * Source: ControlMenu.m logoutBtn bg:UIColor(0.85, 0.25, 0.2) shadow same */
.pg-btn--danger {
  background: var(--pg-red);
  border-color: transparent;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-red-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--danger:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-red-rgb), 0.8);
  filter: brightness(1.1);
}

/* Success (bright green): active status, renewal
 * Source: LicenseWindow.m kLicGreenColor UIColor(0.2, 0.8, 0.3) */
.pg-btn--success {
  background: var(--pg-green-license);
  border-color: transparent;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-green-license-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--success:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-green-license-rgb), 0.8);
}

/* Info (blue): support, contact, links
 * Source: ControlMenu.m supportBtn bg:UIColor(0.15, 0.55, 0.95) shadow same */
.pg-btn--info {
  background: var(--pg-blue);
  border-color: transparent;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-blue-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--info:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-blue-rgb), 0.8);
}

/* Purple: gallery mode, select
 * Source: ControlMenu.m galleryButton bg:UIColor(0.5, 0.3, 0.8) shadow same */
.pg-btn--purple {
  background: var(--pg-purple);
  border-color: transparent;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-purple-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--purple:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-purple-rgb), 0.8);
}

/* Gold: premium actions, retry, renew
 * Source: LicenseWindow.m kLicGoldColor renewBtn, retryBtn */
.pg-btn--gold {
  background: var(--pg-gold);
  border-color: transparent;
  color: #000;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-gold-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--gold:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-gold-rgb), 0.8);
  color: #000;
}

/* Cyan: recharge, wallet
 * Source: LicenseWindow.m cyanColor rechargeBtn */
.pg-btn--cyan {
  background: var(--pg-cyan);
  border-color: transparent;
  color: #000;
  box-shadow: var(--pg-glow-active) rgba(var(--pg-cyan-rgb), var(--pg-glow-active-opacity));
}
.pg-btn--cyan:hover {
  box-shadow: var(--pg-glow-title) rgba(var(--pg-cyan-rgb), 0.8);
  color: #000;
}

/* Ghost: neutral button on dark bg (like iOS "Open Floating Window")
 * Source: ControlMenu.m openFloatingBtn bg:UIColor(white:0.2, alpha:0.8) */
.pg-btn--ghost {
  background: var(--pg-bg-button);
  border: var(--pg-border-thin) solid var(--pg-border-button);
  box-shadow: var(--pg-glow-button) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-button-opacity));
}
.pg-btn--ghost:hover {
  background: rgba(51, 51, 51, 0.95);
  box-shadow: var(--pg-glow-control) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-control-opacity));
}

/* Close button: small round red X
 * Source: LicenseWindow.m createCloseButton -- 32x32, cornerRadius 16, radial glow */
.pg-btn--close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  font-size: var(--pg-text-2xl);
  font-weight: 700;
  color: var(--pg-red-close);
  background: var(--pg-bg-close);
  border: var(--pg-border-close-width) solid var(--pg-border-close);
  border-radius: var(--pg-radius-close-lg);
  box-shadow: 0 0 16px var(--pg-red-glow);
}
.pg-btn--close:hover {
  background: rgba(230, 51, 51, 0.25);
  box-shadow: 0 0 24px rgba(230, 51, 51, 0.6);
}


/* ── 3. Badge (.pg-badge) ────────────────────────────────────────────────
 * Status indicators -- compact, uppercase, small text with glow.
 * Inspired by iOS icon state colors + license status display.
 */
.pg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--pg-font-sans);
  font-size: var(--pg-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--pg-radius-sm);
  white-space: nowrap;
}

/* Active (green): connected / valid license
 * Source: FloatingControl.m VCIconStateConnected UIColor(0.2, 0.8, 0.4) */
.pg-badge--active {
  color: var(--pg-green-bright);
  background: rgba(var(--pg-green-bright-rgb), 0.12);
  box-shadow: var(--pg-glow-active) rgba(var(--pg-green-bright-rgb), 0.5);
}

/* Active badge pulse dot */
.pg-badge--active::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--pg-radius-full);
  background: var(--pg-green-bright);
  animation: pg-pulse 2s ease-in-out infinite;
}

/* Expired (gold): license expired
 * Source: LicenseWindow.m kLicGoldColor UIColor(0.95, 0.75, 0.2) */
.pg-badge--expired {
  color: var(--pg-gold);
  background: rgba(var(--pg-gold-rgb), 0.12);
  box-shadow: var(--pg-glow-active) rgba(var(--pg-gold-rgb), 0.5);
}

/* Banned (red): device banned
 * Source: LicenseWindow.m kLicRedColor UIColor(0.9, 0.25, 0.2) */
.pg-badge--banned {
  color: var(--pg-red-close);
  background: rgba(var(--pg-red-close-rgb), 0.12);
  box-shadow: var(--pg-glow-active) rgba(var(--pg-red-close-rgb), 0.5);
}

/* Info (blue): informational
 * Source: LicenseWindow.m kLicAccentColor UIColor(0.2, 0.6, 1.0) */
.pg-badge--info {
  color: var(--pg-accent);
  background: rgba(var(--pg-accent-rgb), 0.12);
  box-shadow: var(--pg-glow-active) rgba(var(--pg-accent-rgb), 0.5);
}

/* Purple: gallery mode */
.pg-badge--purple {
  color: var(--pg-purple);
  background: rgba(var(--pg-purple-rgb), 0.12);
  box-shadow: var(--pg-glow-active) rgba(var(--pg-purple-rgb), 0.5);
}


/* ── 4. Input (.pg-input) ────────────────────────────────────────────────
 * Translates: iOS text fields (ipField, email, password)
 * Source: LicenseWindow.m styleTextField -- bg white 8%, border white 12%, cornerRadius 8
 * Source: ControlMenu.m ipField -- bg white 8%, border white 12%, cornerRadius 10
 */
.pg-input {
  display: block;
  width: 100%;
  height: var(--pg-height-field);
  padding: 0 var(--pg-space-4);
  font-family: var(--pg-font-sans);
  font-size: var(--pg-text-xl);
  color: #fff;
  background: var(--pg-bg-field);
  border: var(--pg-border-thin) solid var(--pg-border-field);
  border-radius: var(--pg-radius-sm);
  outline: none;
  transition: all var(--pg-duration-fast) ease;
}

.pg-input::placeholder {
  color: var(--pg-text-placeholder);
}

/* Focus: accent color border + glow
 * Source: LicenseWindow.m textFieldDidBeginEditing -- shadow ice blue, radius 6, opacity 0.7 */
.pg-input:focus {
  border-color: rgba(var(--pg-ice-blue-rgb), 0.4);
  box-shadow: var(--pg-glow-focus) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-focus-opacity));
}

/* Monospace variant (for IP field, technical data)
 * Source: ControlMenu.m ipField monospacedSystemFontOfSize:11 */
.pg-input--mono {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
}

/* Input label (uppercase, small, semibold)
 * Source: LicenseWindow.m emailLabel/passLabel -- size 11, semibold, alpha 0.4
 * Glow: ice blue radius 8, opacity 0.6 */
.pg-label {
  display: block;
  font-size: var(--pg-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pg-text-dim);
  margin-bottom: var(--pg-space-1);
  text-shadow: var(--pg-glow-label) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-label-opacity));
}

/* Input group (label + input) */
.pg-input-group {
  margin-bottom: var(--pg-space-4);
}


/* ── 5. Table (.pg-table) ────────────────────────────────────────────────
 * Data display -- subtle row hover with glass tint.
 * Header: small uppercase with letter-spacing (matches iOS field labels).
 */
.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pg-text-base);
}

.pg-table thead th {
  font-size: var(--pg-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pg-text-dim);
  text-shadow: var(--pg-glow-label) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-label-opacity));
  padding: var(--pg-space-2) var(--pg-space-4);
  text-align: left;
  border-bottom: var(--pg-border-thin) solid var(--pg-border-divider);
}

.pg-table tbody td {
  padding: var(--pg-space-3) var(--pg-space-4);
  border-bottom: var(--pg-border-thin) solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.pg-table tbody tr:hover {
  background: rgba(var(--pg-ice-blue-rgb), 0.04);
}

.pg-table tbody tr:last-child td {
  border-bottom: none;
}

/* Monospaced cells for IDs, hashes, IPs */
.pg-table .pg-cell-mono {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
}

/* Scrollable table wrapper for mobile */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table-wrap .pg-table { min-width: 480px; }


/* ── 6. Modal/Dialog (.pg-modal) ─────────────────────────────────────────
 * Translates: LicenseWindow.m -- centered window, backdrop blur, glass panel.
 * Source: LicenseWindow.m createWindow (UIWindowLevelAlert+200),
 *         createContainer (blur dark, r=16, border 0.5 white 15%),
 *         createDismissableBackdrop (alpha 0.5-0.7)
 */
.pg-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--pg-space-5);
  animation: pg-fade-in var(--pg-duration-show) ease;
}

.pg-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--pg-bg-backdrop-strong);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pg-modal__panel {
  position: relative;
  width: 100%;
  max-width: var(--pg-width-modal);
  background: var(--pg-bg-panel);
  backdrop-filter: blur(var(--pg-blur-modal));
  -webkit-backdrop-filter: blur(var(--pg-blur-modal));
  border: var(--pg-border-thin) solid var(--pg-border-panel);
  border-radius: var(--pg-radius-xl);
  padding: var(--pg-space-6);
  animation: pg-scale-in var(--pg-duration-show) var(--pg-ease-spring);
  overflow: hidden;
}

/* Stronger border for modals -- slightly more visible than cards */
.pg-modal__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--pg-radius-xl);
  border: var(--pg-border-thin) solid rgba(var(--pg-ice-blue-rgb), 0.1);
  pointer-events: none;
}

.pg-modal__close {
  position: absolute;
  top: var(--pg-space-4);
  right: var(--pg-space-4);
}

/* Modal themed variants (like iOS message styles) */
.pg-modal--danger .pg-modal__panel {
  border-color: rgba(var(--pg-red-rgb), 0.2);
}
.pg-modal--warning .pg-modal__panel {
  border-color: rgba(var(--pg-gold-rgb), 0.2);
}
.pg-modal--info .pg-modal__panel {
  border-color: rgba(var(--pg-accent-rgb), 0.2);
}
.pg-modal--success .pg-modal__panel {
  border-color: rgba(var(--pg-green-rgb), 0.2);
}


/* ── 7. Toast (.pg-toast) ────────────────────────────────────────────────
 * Notifications -- bottom-right, glass background, colored left border.
 */
.pg-toast {
  position: fixed;
  bottom: var(--pg-space-6);
  right: var(--pg-space-6);
  min-width: 280px;
  max-width: 420px;
  background: var(--pg-bg-panel);
  backdrop-filter: blur(var(--pg-blur-panel));
  -webkit-backdrop-filter: blur(var(--pg-blur-panel));
  border: var(--pg-border-thin) solid var(--pg-border-panel);
  border-radius: var(--pg-radius-md);
  padding: var(--pg-space-4) var(--pg-space-5);
  border-left: 3px solid var(--pg-ice-blue);
  z-index: 2000;
  animation: pg-slide-in-right var(--pg-duration-show) var(--pg-ease-spring);
}

.pg-toast--success { border-left-color: var(--pg-green); }
.pg-toast--danger  { border-left-color: var(--pg-red); }
.pg-toast--warning { border-left-color: var(--pg-gold); }
.pg-toast--info    { border-left-color: var(--pg-accent); }

.pg-toast__title {
  font-size: var(--pg-text-lg);
  font-weight: 600;
  margin-bottom: 2px;
}

.pg-toast__body {
  font-size: var(--pg-text-base);
  color: var(--pg-text-secondary);
}


/* ── 8. Stats (.pg-stat) ─────────────────────────────────────────────────
 * Metric display -- value + label, glow on value.
 * Inspired by PreviewOverlay.m stats display.
 */
.pg-stat {
  text-align: center;
  padding: var(--pg-space-4);
}

.pg-stat__value {
  font-family: var(--pg-font-mono);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-shadow: var(--pg-glow-title) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-title-opacity));
  line-height: 1.2;
}

.pg-stat__label {
  font-size: var(--pg-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pg-text-dim);
  margin-top: 2px;
}

/* Colored stat values */
.pg-stat--green .pg-stat__value {
  color: var(--pg-green);
  text-shadow: var(--pg-glow-title) rgba(var(--pg-green-rgb), var(--pg-glow-title-opacity));
}
.pg-stat--red .pg-stat__value {
  color: var(--pg-red);
  text-shadow: var(--pg-glow-title) rgba(var(--pg-red-rgb), var(--pg-glow-title-opacity));
}
.pg-stat--gold .pg-stat__value {
  color: var(--pg-gold);
  text-shadow: var(--pg-glow-title) rgba(var(--pg-gold-rgb), var(--pg-glow-title-opacity));
}
.pg-stat--blue .pg-stat__value {
  color: var(--pg-accent);
  text-shadow: var(--pg-glow-title) rgba(var(--pg-accent-rgb), var(--pg-glow-title-opacity));
}


/* ── 9. Nav (.pg-nav) ────────────────────────────────────────────────────
 * Top navigation -- glass blur background.
 * Logo "LORDVCAM" with crown icon and gold glow (matching iOS crown.fill).
 */
.pg-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pg-space-3) var(--pg-space-6);
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(var(--pg-blur-nav));
  -webkit-backdrop-filter: blur(var(--pg-blur-nav));
  border-bottom: var(--pg-border-thin) solid var(--pg-border-divider);
}

/* Ice blue glow on nav bottom border */
.pg-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  box-shadow: var(--pg-glow-divider) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-divider-opacity));
}

/* Logo: matches iOS neonYellow crown.fill + camera.fill
 * Source: LicenseWindow.m titleLabel neonYellow UIColor(1.0, 0.85, 0.1)
 *         shadowColor neonYellow, shadowRadius 8, shadowOpacity 0.9 */
.pg-nav__logo {
  font-size: var(--pg-text-3xl);
  font-weight: 700;
  color: var(--pg-neon-yellow);
  text-shadow: var(--pg-glow-title) rgba(var(--pg-neon-yellow-rgb), var(--pg-glow-title-opacity));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--pg-space-2);
}

/* Logo icons — inline SVGs in HTML inherit color via currentColor */
.pg-nav__logo svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px currentColor);
}

.pg-nav__links {
  display: flex;
  align-items: center;
  gap: var(--pg-space-5);
}

.pg-nav__link {
  font-size: var(--pg-text-base);
  font-weight: 500;
  color: var(--pg-text-muted);
  text-decoration: none;
  transition: color var(--pg-duration-fast) ease, text-shadow var(--pg-duration-fast) ease;
}

.pg-nav__link:hover {
  color: var(--pg-ice-blue);
  text-shadow: var(--pg-glow-text) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-text-opacity));
}

.pg-nav__link--active {
  color: var(--pg-ice-blue);
  text-shadow: var(--pg-glow-text) rgba(var(--pg-ice-blue-rgb), 0.7);
}


/* ── 10. Divider (.pg-divider) ───────────────────────────────────────────
 * Translates: Universal iOS divider pattern.
 * Source: All files -- 0.5px height, white 12%, ice blue glow r=6 op=0.3
 *         8px margin top and bottom.
 */
.pg-divider {
  width: 100%;
  height: 0.5px;
  background: var(--pg-border-divider);
  border: none;
  margin: var(--pg-space-2) 0;
  box-shadow: var(--pg-glow-divider) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-divider-opacity));
}

/* Wider spacing variant */
.pg-divider--wide {
  margin: var(--pg-space-5) 0;
}


/* ── 11. Switch/Toggle (.pg-switch) ──────────────────────────────────────
 * Translates: UISwitch with colored glow matching onTintColor.
 * Source: ControlMenu.m replacementSwitch, audioReplacementSwitch, floatingSwitch
 *         FloatingControl.m liveMotionSwitch
 * iOS: scale 0.65-0.7, onTintColor varies, shadow r=5 op=0.6
 */
.pg-switch {
  --switch-color: var(--pg-green-switch);
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.pg-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.pg-switch__track {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  transition: background var(--pg-duration-fast) ease, box-shadow var(--pg-duration-fast) ease;
}

.pg-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: var(--pg-radius-full);
  transition: transform var(--pg-duration-fast) ease;
}

.pg-switch input:checked + .pg-switch__track {
  background: var(--switch-color);
  box-shadow: var(--pg-glow-switch) var(--switch-color);
}

.pg-switch input:checked + .pg-switch__track::after {
  transform: translateX(20px);
}

/* Semantic switch colors */
.pg-switch--green  { --switch-color: var(--pg-green-switch); }
.pg-switch--blue   { --switch-color: var(--pg-blue-audio); }
.pg-switch--gold   { --switch-color: var(--pg-gold-switch); }
.pg-switch--orange { --switch-color: var(--pg-orange); }
.pg-switch--purple { --switch-color: var(--pg-purple); }


/* ============================================================================
 * D) UTILITY CLASSES
 * ============================================================================ */

/* ── Text Colors ──────────────────────────────────────────────────────── */
.text-primary   { color: var(--pg-text-primary); }
.text-secondary { color: var(--pg-text-secondary); }
.text-muted     { color: var(--pg-text-muted); }
.text-dim       { color: var(--pg-text-dim); }
.text-body      { color: var(--pg-text-body); }
.text-white     { color: #fff; }
.text-green     { color: var(--pg-green); }
.text-red       { color: var(--pg-red); }
.text-gold      { color: var(--pg-gold); }
.text-blue      { color: var(--pg-accent); }
.text-purple    { color: var(--pg-purple); }
.text-cyan      { color: var(--pg-cyan); }
.text-orange    { color: var(--pg-orange); }
.text-ice       { color: var(--pg-ice-blue); }
.text-neon      { color: var(--pg-neon-yellow); }
.text-error     { color: var(--pg-red-error-text); }

/* ── Glow Utilities ──────────────────────────────────────────────────── */
.glow-ice    { text-shadow: var(--pg-glow-text) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-text-opacity)); }
.glow-green  { text-shadow: var(--pg-glow-text) rgba(var(--pg-green-rgb), var(--pg-glow-text-opacity)); }
.glow-red    { text-shadow: var(--pg-glow-text) rgba(var(--pg-red-rgb), var(--pg-glow-text-opacity)); }
.glow-gold   { text-shadow: var(--pg-glow-text) rgba(var(--pg-gold-rgb), var(--pg-glow-text-opacity)); }
.glow-purple { text-shadow: var(--pg-glow-text) rgba(var(--pg-purple-rgb), var(--pg-glow-text-opacity)); }
.glow-blue   { text-shadow: var(--pg-glow-text) rgba(var(--pg-accent-rgb), var(--pg-glow-text-opacity)); }
.glow-neon   { text-shadow: var(--pg-glow-title) rgba(var(--pg-neon-yellow-rgb), var(--pg-glow-title-opacity)); }
.glow-cyan   { text-shadow: var(--pg-glow-text) rgba(var(--pg-cyan-rgb), var(--pg-glow-text-opacity)); }

/* Box glow (for containers) */
.box-glow-ice    { box-shadow: var(--pg-glow-button) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-button-opacity)); }
.box-glow-green  { box-shadow: var(--pg-glow-active) rgba(var(--pg-green-rgb), var(--pg-glow-active-opacity)); }
.box-glow-red    { box-shadow: var(--pg-glow-active) rgba(var(--pg-red-rgb), var(--pg-glow-active-opacity)); }
.box-glow-gold   { box-shadow: var(--pg-glow-active) rgba(var(--pg-gold-rgb), var(--pg-glow-active-opacity)); }
.box-glow-purple { box-shadow: var(--pg-glow-active) rgba(var(--pg-purple-rgb), var(--pg-glow-active-opacity)); }
.box-glow-blue   { box-shadow: var(--pg-glow-active) rgba(var(--pg-accent-rgb), var(--pg-glow-active-opacity)); }

/* ── Spacing Utilities ────────────────────────────────────────────────── */

/* Margin */
.m-0  { margin: 0; }
.m-1  { margin: var(--pg-space-1); }
.m-2  { margin: var(--pg-space-2); }
.m-3  { margin: var(--pg-space-3); }
.m-4  { margin: var(--pg-space-4); }
.m-5  { margin: var(--pg-space-5); }
.m-6  { margin: var(--pg-space-6); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--pg-space-1); }
.mt-2 { margin-top: var(--pg-space-2); }
.mt-3 { margin-top: var(--pg-space-3); }
.mt-4 { margin-top: var(--pg-space-4); }
.mt-5 { margin-top: var(--pg-space-5); }
.mt-6 { margin-top: var(--pg-space-6); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--pg-space-1); }
.mb-2 { margin-bottom: var(--pg-space-2); }
.mb-3 { margin-bottom: var(--pg-space-3); }
.mb-4 { margin-bottom: var(--pg-space-4); }
.mb-5 { margin-bottom: var(--pg-space-5); }
.mb-6 { margin-bottom: var(--pg-space-6); }

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--pg-space-1); }
.p-2  { padding: var(--pg-space-2); }
.p-3  { padding: var(--pg-space-3); }
.p-4  { padding: var(--pg-space-4); }
.p-5  { padding: var(--pg-space-5); }
.p-6  { padding: var(--pg-space-6); }

.px-4 { padding-left: var(--pg-space-4); padding-right: var(--pg-space-4); }
.px-5 { padding-left: var(--pg-space-5); padding-right: var(--pg-space-5); }
.px-6 { padding-left: var(--pg-space-6); padding-right: var(--pg-space-6); }

.py-2 { padding-top: var(--pg-space-2); padding-bottom: var(--pg-space-2); }
.py-4 { padding-top: var(--pg-space-4); padding-bottom: var(--pg-space-4); }
.py-5 { padding-top: var(--pg-space-5); padding-bottom: var(--pg-space-5); }

/* Gap (for flex/grid) */
.gap-1 { gap: var(--pg-space-1); }
.gap-2 { gap: var(--pg-space-2); }
.gap-3 { gap: var(--pg-space-3); }
.gap-4 { gap: var(--pg-space-4); }
.gap-5 { gap: var(--pg-space-5); }

/* ── Typography Utilities ─────────────────────────────────────────────── */
.font-sans { font-family: var(--pg-font-sans); }
.font-mono { font-family: var(--pg-font-mono); }

.text-xs  { font-size: var(--pg-text-xs); }
.text-sm  { font-size: var(--pg-text-sm); }
.text-md  { font-size: var(--pg-text-md); }
.text-base { font-size: var(--pg-text-base); }
.text-lg  { font-size: var(--pg-text-lg); }
.text-xl  { font-size: var(--pg-text-xl); }
.text-2xl { font-size: var(--pg-text-2xl); }
.text-3xl { font-size: var(--pg-text-3xl); }
.text-4xl { font-size: var(--pg-text-4xl); }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.uppercase    { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.5px; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Layout Utilities ─────────────────────────────────────────────────── */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1     { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.grid       { display: grid; }
.grid-2     { grid-template-columns: repeat(2, 1fr); }
.grid-3     { grid-template-columns: repeat(3, 1fr); }
.grid-4     { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit responsive grids */
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.w-full     { width: 100%; }
.max-w-sm   { max-width: var(--pg-width-panel); }
.max-w-md   { max-width: var(--pg-width-menu); }
.max-w-lg   { max-width: var(--pg-width-modal); }
.max-w-xl   { max-width: var(--pg-width-preview); }

.hidden     { display: none; }
.relative   { position: relative; }

/* Visibility utilities */
@media (min-width: 769px) { .hide-lg { display: none !important; } .show-sm, .show-md { display: none; } }
@media (max-width: 768px) { .hide-md { display: none !important; } .show-md { display: block; } }
@media (max-width: 640px) { .hide-sm { display: none !important; } .show-sm { display: block; } }


/* ============================================================================
 * E) ANIMATIONS
 * ============================================================================ */

/* Glow pulse: matching iOS neon pulse effect
 * Source: FloatingControl.m updateIconColor -- icon glow opacity 0.8 baseline */
@keyframes pg-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
  50%      { opacity: 0.5; box-shadow: 0 0 8px currentColor; }
}

/* Fade in: modal/toast entrance
 * Source: LicenseWindow.m showWindow -- alpha 0 -> 1.0, duration 0.3 */
@keyframes pg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale in: panel/modal entrance (spring-like)
 * Source: ControlMenu.m show -- transform scale(0.85) -> identity, alpha 0 -> 1
 *         duration:0.3, springDamping:0.8, velocity:0.5 */
@keyframes pg-scale-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from right: toast entrance */
@keyframes pg-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from bottom: mobile elements */
@keyframes pg-slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow breathe: subtle continuous glow for important elements */
@keyframes pg-glow-breathe {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--pg-ice-blue-rgb), 0.3); }
  50%      { box-shadow: 0 0 16px rgba(var(--pg-ice-blue-rgb), 0.5); }
}

/* ── Transition defaults ──────────────────────────────────────────────── */
.transition {
  transition: all var(--pg-duration-fast) ease;
}

.transition-slow {
  transition: all var(--pg-duration-show) ease;
}

.transition-spring {
  transition: all var(--pg-duration-show) var(--pg-ease-spring);
}


/* ============================================================================
 * RESPONSIVE
 * ============================================================================ */

@media (max-width: 768px) {
  .pg-nav {
    padding: var(--pg-space-2) var(--pg-space-3);
  }

  .pg-modal__panel {
    max-width: calc(100vw - 24px);
  }

  .pg-toast {
    right: var(--pg-space-3);
    left: var(--pg-space-3);
    min-width: auto;
  }

  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  :root {
    --pg-space-5: 12px;
    --pg-space-6: 16px;
  }

  .pg-nav {
    padding: var(--pg-space-2) var(--pg-space-4);
  }

  .pg-nav__links {
    gap: 8px;
  }

  .pg-btn--sm {
    height: 44px;
    min-height: 44px;
  }

  .pg-btn--close {
    width: 44px;
    height: 44px;
  }

  .pg-modal__panel {
    max-width: calc(100vw - 32px);
    padding: var(--pg-space-5);
  }

  .pg-toast {
    right: var(--pg-space-4);
    bottom: var(--pg-space-4);
    left: var(--pg-space-4);
    min-width: auto;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
 * SHARED COMPONENTS — Plan cards, PIX payment, Empty state, Inline feedback
 * ============================================================================ */

/* ── Plan cards ── */
.pg-plan-card {
  text-align: center;
  position: relative;
}

.pg-plan-name {
  font-size: var(--pg-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pg-text-secondary);
  margin-bottom: 8px;
}

.pg-plan-price {
  font-family: var(--pg-font-mono);
  font-weight: 700;
}

.pg-plan-price span {
  color: var(--pg-text-secondary);
}

.pg-plan-duration {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-muted);
}

.pg-plan-features {
  list-style: none;
  text-align: left;
  padding: 0;
}

.pg-plan-features li {
  font-size: var(--pg-text-sm);
  color: var(--pg-text-secondary);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-plan-features li::before {
  font-weight: 700;
  flex-shrink: 0;
}

/* ── PIX payment ── */
.pg-pix-qr {
  margin: 12px auto;
  max-width: 200px;
  background: #fff;
  padding: 3px;
  border-radius: 0;
  display: inline-block;
  box-shadow: 0 0 12px rgba(var(--pg-green-rgb), 0.6), 0 0 28px rgba(var(--pg-green-rgb), 0.35), 0 0 48px rgba(var(--pg-green-rgb), 0.15);
}

.pg-pix-qr img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.pg-pix-code {
  background: var(--pg-bg-field);
  border: var(--pg-border-thin) solid var(--pg-border-field);
  border-radius: var(--pg-radius-sm);
  padding: 10px 12px;
  margin: 8px 0;
  word-break: break-all;
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  color: var(--pg-text-secondary);
  max-height: 64px;
  overflow-y: auto;
  cursor: pointer;
  transition: border-color var(--pg-duration-fast) ease;
  text-align: left;
}

.pg-pix-code:hover {
  border-color: rgba(var(--pg-ice-blue-rgb), 0.35);
  box-shadow: var(--pg-glow-button) rgba(var(--pg-ice-blue-rgb), 0.15);
}

.pg-pix-timer {
  font-family: var(--pg-font-mono);
  font-weight: 700;
  text-shadow: var(--pg-glow-title) rgba(var(--pg-ice-blue-rgb), var(--pg-glow-title-opacity));
}

.pg-pix-status {
  font-size: var(--pg-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pg-text-muted);
}

/* ── Empty state ── */
.pg-empty-state {
  text-align: center;
  padding: 24px;
  font-size: var(--pg-text-sm);
  color: var(--pg-text-dim);
  letter-spacing: 0.5px;
}

/* ── Inline feedback ── */
.pg-inline-error {
  font-size: var(--pg-text-sm);
  color: var(--pg-red-error-text);
  margin-top: 4px;
  display: none;
}

.pg-inline-success {
  font-size: var(--pg-text-sm);
  color: var(--pg-green);
  margin-top: 4px;
  display: none;
}