:root {
    --pg-bg: #0a0f1c;
    --pg-surface: rgba(15, 23, 42, 0.7);
    --pg-surface-hover: rgba(30, 41, 59, 0.8);
    --pg-border: rgba(148, 163, 184, 0.1);
    --pg-border-glow: rgba(99, 102, 241, 0.3);
    --pg-text: #f1f5f9;
    --pg-text-muted: #94a3b8;
    --pg-accent: #6366f1;
    --pg-accent-light: #818cf8;
    --pg-success: #10b981;
    --pg-danger: #ef4444;
    --pg-warning: #f59e0b;
    --pg-info: #3b82f6;
    --pg-radius: 16px;
    --pg-radius-sm: 10px;
    --pg-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --pg-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --sidebar-width: 18rem;
    --pg-shell-gap: clamp(18px, 2vw, 28px);
    --pg-loader-backdrop: rgba(2, 8, 23, 0.66);
    --pg-loader-surface: rgba(8, 15, 31, 0.72);
    --pg-loader-border: rgba(148, 163, 184, 0.14);
    --pg-loader-glow: rgba(34, 211, 238, 0.32);
    --pg-loader-glow-soft: rgba(59, 130, 246, 0.21);
    --pg-loader-shadow: 0 28px 84px rgba(2, 6, 23, 0.52);
  }

  /* ==========================================
     PGUARDIAN BASE / RESET LAYER
     ========================================== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    max-width: 100%;
    background: var(--pg-bg);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 8%, rgba(99, 102, 241, 0.16), transparent 32%),
      radial-gradient(circle at 82% 0%, rgba(34, 211, 238, 0.11), transparent 28%),
      linear-gradient(180deg, #07101f 0%, var(--pg-bg) 48%, #050914 100%);
    color: var(--pg-text);
    font-family: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(html, body, button, input, select, textarea) {
    font-family: "Inter", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--pg-text);
    font-family: inherit;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(p) {
    color: inherit;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(a) {
    color: inherit;
    text-decoration: none;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(a:not([class])) {
    color: #93c5fd;
    text-decoration-color: rgba(147, 197, 253, 0.42);
    text-underline-offset: 3px;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(a:not([class]):hover) {
    color: #bfdbfe;
    text-decoration: underline;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(img, svg, video, canvas) {
    max-width: 100%;
    height: auto;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(button) {
    border-radius: 12px;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(button:not([disabled]), [role="button"]:not([aria-disabled="true"])) {
    cursor: pointer;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(15, 23, 42, 0.72);
    color: #e5eefb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 28px -20px rgba(2, 6, 23, 0.92);
    padding: 10px 16px;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.pg-native-select), select:not(.pg-native-select), textarea) {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
      rgba(15, 23, 42, 0.66);
    color: #e5eefb;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 28px -22px rgba(2, 6, 23, 0.86);
    padding: 11px 13px;
    outline: none;
    color-scheme: dark;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(textarea) {
    min-height: 104px;
    resize: vertical;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(input::placeholder, textarea::placeholder) {
    color: rgba(148, 163, 184, 0.62);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(input:focus, select:focus, textarea:focus) {
    border-color: rgba(99, 102, 241, 0.58);
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 18px 34px -22px rgba(79, 70, 229, 0.42);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(input:disabled, select:disabled, textarea:disabled, button:disabled) {
    cursor: not-allowed;
    opacity: 0.58;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-page-shell) {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow-x: hidden;
    background: transparent;
    color: var(--pg-text);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-page-content) {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: clamp(18px, 3vw, 32px);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-section) {
    display: grid;
    gap: clamp(14px, 2vw, 22px);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-panel, .pg-card) {
    color: var(--pg-text);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-panel) {
    background:
      linear-gradient(180deg, rgba(20, 28, 46, 0.92) 0%, rgba(11, 17, 31, 0.96) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--pg-radius);
    box-shadow: 0 22px 44px -34px rgba(2, 6, 23, 0.95);
    padding: clamp(18px, 2.4vw, 28px);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-form-control) {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.68);
    color: #e5eefb;
    padding: 11px 13px;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    min-width: 34px;
    touch-action: manipulation;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input) {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) .pg-toggle > .pg-toggle-input {
    position: absolute !important;
    z-index: 2 !important;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-shell) {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background-color: #334155;
    box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.34);
    transition:
      background-color 190ms ease,
      border-color 180ms ease,
      box-shadow 190ms ease;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-glow) {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 72% 50%, rgba(255, 255, 255, 0.22), transparent 62%);
    opacity: 0;
    transition: opacity 190ms ease;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-shell)::after {
    content: "";
    display: none;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-knob) {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: transform 190ms ease, box-shadow 190ms ease;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:checked + .pg-toggle-shell) {
    border-color: rgba(20, 184, 166, 0.78);
    background-color: #14b8a6;
    box-shadow:
      inset 0 1px 2px rgba(4, 47, 46, 0.18),
      0 0 0 1px rgba(20, 184, 166, 0.18),
      0 0 10px rgba(20, 184, 166, 0.22);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:checked + .pg-toggle-shell .pg-toggle-glow) {
    opacity: 1;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:checked + .pg-toggle-shell)::after {
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:checked + .pg-toggle-shell .pg-toggle-knob) {
    transform: translateX(14px);
    box-shadow:
      0 1px 3px rgba(15, 23, 42, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(label:hover .pg-toggle-input:not(:disabled) + .pg-toggle-shell, .pg-toggle:hover .pg-toggle-input:not(:disabled) + .pg-toggle-shell) {
    border-color: rgba(203, 213, 225, 0.34);
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:focus-visible + .pg-toggle-shell) {
    outline: 2px solid rgba(20, 184, 166, 0.82);
    outline-offset: 3px;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:disabled) {
    cursor: not-allowed;
  }

  :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-input:disabled + .pg-toggle-shell) {
    opacity: 0.54;
    filter: grayscale(0.35);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(body[class^="pg-"], body[class*=" pg-"]) :where(.pg-toggle-shell, .pg-toggle-glow, .pg-toggle-knob, .pg-toggle-shell::after) {
      transition: none;
    }
  }

  /* Small compatibility bridge for legacy utility classes left after removing Tailwind CDN. */
  :where(body[class^="pg-"], body[class*=" pg-"]) .flex { display: flex; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .inline-flex { display: inline-flex; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .grid { display: grid; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .hidden { display: none; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .block { display: block; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .items-center { align-items: center; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .items-start { align-items: flex-start; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .justify-center { justify-content: center; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .justify-between { justify-content: space-between; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .gap-1 { gap: 0.25rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .gap-2 { gap: 0.5rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .gap-3 { gap: 0.75rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .gap-4 { gap: 1rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .px-3 { padding-inline: 0.75rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .py-4 { padding-block: 1rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .mb-3 { margin-bottom: 0.75rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .space-y-1 > * + * { margin-top: 0.25rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-t { border-top: 1px solid rgba(148, 163, 184, 0.12); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-xs { font-size: 0.75rem; line-height: 1rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .font-semibold { font-weight: 600; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .font-bold { font-weight: 700; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .w-full { width: 100%; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-amber-400 { color: #fbbf24; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-emerald-400 { color: #34d399; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-slate-400 { color: #94a3b8; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-emerald-200 { color: #a7f3d0; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-slate-200 { color: #e2e8f0; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-slate-300 { color: #cbd5e1; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-sky-200 { color: #bae6fd; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-rose-200 { color: #fecdd3; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-orange-200 { color: #fed7aa; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-amber-200 { color: #fde68a; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .text-yellow-200 { color: #fef08a; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-slate-600 { border-color: #475569; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-sky-500\/30 { border-color: rgba(14, 165, 233, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-slate-700 { border-color: #334155; }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .border-yellow-500\/30 { border-color: rgba(234, 179, 8, 0.3); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-slate-800\/70 { background-color: rgba(30, 41, 59, 0.7); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.1); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-slate-900\/70 { background-color: rgba(15, 23, 42, 0.7); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.1); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1); }
  :where(body[class^="pg-"], body[class*=" pg-"]) .bg-yellow-500\/10 { background-color: rgba(234, 179, 8, 0.1); }

  @media (min-width: 640px) {
    :where(body[class^="pg-"], body[class*=" pg-"]) .sm\:inline {
      display: inline;
    }
  }

  @media (min-width: 768px) {
    :where(body[class^="pg-"], body[class*=" pg-"]) .md\:hidden {
      display: none !important;
    }
  }

  /* Logo Container - ensures full visibility on all screens */
  .pg-logo {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
  }

  .pg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  html[data-theme="dark"] body { background-color: var(--pg-bg) !important; }
  html[data-theme="darker"] body { background-color: #050810 !important; }
  html[data-theme="darker"] .pg-surface-card { background: rgba(5, 8, 16, 0.8) !important; }
  html[data-theme="darker"] .pg-sidebar { background: rgba(5, 8, 16, 0.95) !important; }
  html[data-theme="darker"] .pg-border-subtle { border-color: rgba(255, 255, 255, 0.05) !important; }

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .pg-card, .pg-surface-card {
    background:
      linear-gradient(180deg, rgba(20, 28, 46, 0.94) 0%, rgba(11, 17, 31, 0.96) 100%);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: var(--pg-radius);
    box-shadow:
      0 22px 44px -34px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition:
      transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.24s ease,
      border-color 0.24s ease,
      background 0.24s ease;
    position: relative;
    overflow: hidden;
  }

  .pg-card::before, .pg-surface-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  }

  .pg-card::after, .pg-surface-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.12), rgba(148, 163, 184, 0.05), transparent 55%) border-box;
    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.24s ease;
    pointer-events: none;
  }

  .pg-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 28px 52px -34px rgba(15, 23, 42, 0.98),
      0 0 0 1px rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.18);
  }

  .pg-surface-card:hover {
    transform: translateY(-2px);
    border-color: rgba(129, 140, 248, 0.16);
    box-shadow:
      0 24px 46px -34px rgba(15, 23, 42, 0.98);
  }

  .pg-card:hover::after,
  .pg-surface-card:hover::after {
    opacity: 1;
  }

  .pg-stat-card {
    background:
      radial-gradient(circle at top right, rgba(129, 140, 248, 0.16) 0%, transparent 32%),
      linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.84) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow:
      0 20px 45px -30px rgba(15, 23, 42, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.04);
    transition:
      transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.26s ease,
      border-color 0.26s ease;
  }

  .pg-stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .pg-stat-card:hover::after {
    opacity: 1;
  }

  .pg-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(129, 140, 248, 0.24);
    box-shadow:
      0 30px 56px -28px rgba(15, 23, 42, 0.98),
      0 0 30px rgba(99, 102, 241, 0.14);
  }

  .pg-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
  }

  .pg-card-subtitle {
    margin-top: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.68);
  }

  .pg-card-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(165, 180, 252, 0.92);
  }

  .pg-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  .pg-icon-svg svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
  }

  .pg-inline-icon {
    width: 1rem;
    height: 1rem;
  }

  .pg-inline-icon-lg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .pg-empty-icon {
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(148, 163, 184, 0.88);
  }

  .pg-badge-icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .pg-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    color: #f8fafc;
  }

  .pg-stat-icon svg,
  .pg-feature-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
  }

  .pg-stat-icon.pg-icon-servers {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  }

  .pg-stat-icon.pg-icon-members {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
  }

  .pg-stat-icon.pg-icon-ping {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
  }

  .pg-stat-icon.pg-icon-bot {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
  }

  .pg-stat-icon.pg-icon-quick {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
  }

  .pg-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    position: relative;
    z-index: 1;
  }

  .pg-stat-chip-purple {
    background: rgba(168, 85, 247, 0.14);
    border-color: rgba(168, 85, 247, 0.3);
    color: #d8b4fe;
  }

  .pg-stat-chip-blue {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(96, 165, 250, 0.3);
    color: #93c5fd;
  }

  .pg-stat-chip-green {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.3);
    color: #86efac;
  }

  .pg-stat-chip-amber {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
  }

  .pg-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }

  .pg-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--pg-text);
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
  }

  .pg-stat-sub {
    font-size: 12px;
    color: var(--pg-text-muted);
    opacity: 0.7;
    line-height: 1.55;
    position: relative;
    z-index: 1;
  }

  .pg-online-dot, .pg-offline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
  }

  .pg-online-dot {
    background: radial-gradient(circle at 30% 30%, #fff 0%, #34d399 30%, #10b981 100%);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 15px rgba(16, 185, 129, 0.6), 0 0 30px rgba(16, 185, 129, 0.3);
    animation: pgPulse 2s ease-out infinite;
  }

  .pg-online-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(16, 185, 129, 0.4);
    animation: pgRing 2s ease-out infinite;
  }

  @keyframes pgPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  @keyframes pgRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
  }

  .pg-offline-dot {
    background: radial-gradient(circle at 30% 30%, #fff 0%, #f87171 30%, #ef4444 100%);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 0 15px rgba(239, 68, 68, 0.5);
  }

  .pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
      rgba(15, 23, 42, 0.76);
    backdrop-filter: blur(18px);
    color: var(--pg-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 12px 30px -16px rgba(15, 23, 42, 0.95);
    transition:
      transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1),
      box-shadow 0.28s ease,
      border-color 0.28s ease,
      background 0.28s ease,
      color 0.28s ease,
      filter 0.22s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .pg-btn::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 45%);
    opacity: 0.8;
    pointer-events: none;
    z-index: -1;
  }

  .pg-btn::after {
    content: '';
    position: absolute;
    top: -140%;
    left: -35%;
    width: 34%;
    height: 380%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0.08) 82%, transparent 100%);
    transform: translateX(-240%) rotate(18deg);
    opacity: 0;
    pointer-events: none;
  }

  .pg-btn:hover::after,
  .pg-btn:focus-visible::after {
    opacity: 1;
    animation: pgButtonShine 0.95s ease forwards;
  }

  .pg-btn:hover {
    transform: translateY(-1px) scale(1.018);
    filter: brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 18px 36px -18px rgba(15, 23, 42, 0.95),
      0 0 0 1px rgba(129, 140, 248, 0.16);
  }

  .pg-btn:active {
    transform: translateY(0) scale(0.985);
    filter: brightness(0.98);
  }

  .pg-btn:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.2),
      inset 0 1px 0 rgba(255,255,255,0.14),
      0 18px 36px -18px rgba(15, 23, 42, 0.95);
  }

  .pg-btn[disabled] {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
  }

  .pg-btn-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .pg-btn-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }

  .pg-btn-label {
    position: relative;
    z-index: 1;
  }

  .pg-btn-primary {
    color: #eff6ff;
    border-color: rgba(129, 140, 248, 0.42);
    background:
      radial-gradient(circle at top left, rgba(255,255,255,0.18) 0%, transparent 34%),
      linear-gradient(135deg, #3b82f6 0%, #6366f1 52%, #8b5cf6 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 18px 36px -18px rgba(79, 70, 229, 0.9),
      0 0 24px rgba(99, 102, 241, 0.26);
  }

  .pg-btn-primary:hover {
    filter: brightness(1.06) saturate(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 24px 42px -20px rgba(79, 70, 229, 1),
      0 0 34px rgba(99, 102, 241, 0.34);
  }

  .pg-btn-danger {
    color: #fff5f5;
    border-color: rgba(251, 113, 133, 0.36);
    background:
      radial-gradient(circle at top left, rgba(255,255,255,0.16) 0%, transparent 36%),
      linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 18px 34px -18px rgba(239, 68, 68, 0.85),
      0 0 24px rgba(249, 115, 22, 0.2);
  }

  .pg-btn-danger:hover {
    filter: brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 24px 40px -18px rgba(239, 68, 68, 0.95),
      0 0 30px rgba(249, 115, 22, 0.28);
  }

  .pg-btn-secondary,
  .pg-btn-ghost {
    color: #e2e8f0;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%),
      rgba(15, 23, 42, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 16px 28px -22px rgba(15, 23, 42, 0.92);
  }

  .pg-btn-secondary:hover,
  .pg-btn-ghost:hover {
    border-color: rgba(129, 140, 248, 0.38);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%),
      rgba(15, 23, 42, 0.54);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      0 20px 32px -20px rgba(30, 41, 59, 0.95),
      0 0 24px rgba(99, 102, 241, 0.16);
  }

  .pg-btn-text {
    background: transparent;
    border-color: transparent;
    color: #cbd5e1;
    box-shadow: none;
    padding-inline: 12px;
  }

  .pg-btn-text::before,
  .pg-btn-text::after {
    display: none;
  }

  .pg-btn-text:hover {
    color: #f8fafc;
    background: rgba(148, 163, 184, 0.08);
    box-shadow: none;
  }

  @keyframes pgButtonShine {
    0% {
      transform: translateX(-240%) rotate(18deg);
    }
    100% {
      transform: translateX(520%) rotate(18deg);
    }
  }

  .pg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.2s ease;
  }

  .pg-badge-green {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
  }

  .pg-badge-red {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
  }

  .pg-badge-blue {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
  }

  .pg-badge-gray {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--pg-text-muted);
  }

  .pg-badge-purple {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c084fc;
  }

  /* Modern Table */
  .pg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
  }

  .pg-table thead th {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(10px);
    color: var(--pg-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--pg-border);
  }

  .pg-table tbody tr {
    transition: all 0.2s ease;
    background: rgba(15, 23, 42, 0.3);
  }

  .pg-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.005);
  }

  .pg-table tbody tr:hover td {
    border-color: transparent;
  }

  .pg-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--pg-border);
    color: var(--pg-text);
    font-size: 14px;
  }

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

  .pg-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: min(var(--sidebar-width), 100vw);
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    background:
      linear-gradient(180deg, rgba(11, 17, 30, 0.98) 0%, rgba(7, 11, 22, 0.99) 100%);
    backdrop-filter: blur(18px);
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
    overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    isolation: isolate;
    z-index: 80;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    transition: transform 0.3s ease;
  }

  .pg-sidebar,
  .pg-sidebar * {
    box-sizing: border-box;
  }

  .pg-layout {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    position: relative;
  }

  .pg-layout-shell {
    display: flex;
    align-items: stretch;
    background: transparent;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  .pg-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2vw, 28px);
    padding-top: max(clamp(16px, 2vw, 28px), env(safe-area-inset-top, 0px));
    padding-right: max(clamp(16px, 2vw, 28px), env(safe-area-inset-right, 0px));
    padding-bottom: max(clamp(16px, 2vw, 28px), env(safe-area-inset-bottom, 0px));
    padding-left: max(clamp(16px, 2vw, 28px), env(safe-area-inset-left, 0px));
  }

  .pg-content {
    position: relative;
    z-index: 1;
    padding: 0 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  .pg-page-hero + .pg-content {
    margin-top: var(--pg-shell-gap);
  }

  .pg-page-hero + .pg-dashboard-toolbar,
  .pg-dashboard-toolbar + .pg-content {
    margin-top: var(--pg-shell-gap);
  }

  .pg-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    color: var(--pg-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .pg-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 0 4px 4px 0;
    transition: height 0.3s ease;
  }

  .pg-nav-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--pg-text);
    transform: translateX(2px);
  }

  .pg-nav-item:hover::before {
    height: 20px;
  }

  .pg-nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.05) 100%);
    color: var(--pg-text);
    border: 1px solid rgba(99, 102, 241, 0.2);
  }

  .pg-nav-item.active::before {
    height: 30px;
  }

  .pg-nav-item.active .pg-nav-icon {
    color: #f8fafc;
    background:
      radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.22) 0%, transparent 38%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.26), rgba(99, 102, 241, 0.3));
    border-color: rgba(125, 211, 252, 0.36);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 14px 28px -14px rgba(34, 211, 238, 0.52),
      0 0 26px rgba(99, 102, 241, 0.2);
  }

  .pg-nav-sublist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(99, 102, 241, 0.18);
  }

  .pg-nav-subitem {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.9rem;
    color: rgba(148, 163, 184, 0.95);
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 600;
    transition: all 0.25s ease;
  }

  .pg-nav-subitem::before {
    content: '';
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.45);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
    transition: all 0.25s ease;
  }

  .pg-nav-subitem:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--pg-text);
    transform: translateX(2px);
  }

  .pg-nav-subitem.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.18) 0%, rgba(99, 102, 241, 0.03) 100%);
    color: #eef2ff;
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.18);
  }

  .pg-nav-subitem.active::before {
    background: linear-gradient(180deg, #818cf8 0%, #22d3ee 100%);
    box-shadow:
      0 0 0 4px rgba(99, 102, 241, 0.12),
      0 0 20px rgba(34, 211, 238, 0.18);
  }

  .pg-nav-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dbeafe;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%),
      rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 10px 24px -16px rgba(15, 23, 42, 0.72);
    transition: all 0.3s ease;
  }

  .pg-nav-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }

  .pg-nav-item:hover .pg-nav-icon {
    background:
      radial-gradient(circle at top left, rgba(255,255,255,0.12) 0%, transparent 40%),
      linear-gradient(135deg, rgba(59, 130, 246, 0.26), rgba(139, 92, 246, 0.22));
    border-color: rgba(129, 140, 248, 0.3);
    transform: scale(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 14px 28px -14px rgba(79, 70, 229, 0.58),
      0 0 24px rgba(99, 102, 241, 0.16);
  }

  .pg-sidebar-footer-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px;
    margin-bottom: 0;
    border-radius: 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background:
      radial-gradient(circle at 14% 8%, rgba(34, 211, 238, 0.1), transparent 38%),
      linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(5, 10, 20, 0.94));
    border: 1px solid rgba(0, 224, 255, 0.12);
    box-shadow: 0 14px 28px -24px rgba(0, 224, 255, 0.22);
  }

  .pg-sidebar-support {
    display: block;
    position: relative;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(125, 211, 252, 0.15);
    background:
      radial-gradient(circle at 14% 6%, rgba(34, 211, 238, 0.12), transparent 40%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(2, 6, 23, 0.68));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 28px -24px rgba(34, 211, 238, 0.34);
    margin-top: 0;
    padding: 8px;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.24s ease,
      box-shadow 0.28s ease,
      background 0.28s ease;
  }

  .pg-sidebar-support::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background:
      radial-gradient(circle at 18% 0%, rgba(103, 232, 249, 0.16), transparent 42%),
      radial-gradient(circle at 88% 100%, rgba(59, 130, 246, 0.1), transparent 38%);
    opacity: 0.36;
    pointer-events: none;
    z-index: 0;
    animation: pgSidebarSupportGlow 7.2s ease-in-out infinite;
    transition: opacity 0.28s ease;
  }

  .pg-sidebar-support-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding-right: 34px;
  }

  .pg-sidebar-support-avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(125, 211, 252, 0.22);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
    color: #7dd3fc;
    transition:
      transform 0.26s ease,
      border-color 0.26s ease,
      box-shadow 0.26s ease,
      color 0.26s ease;
  }

  .pg-sidebar-support-title {
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: 0.01em;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-sidebar-support-text {
    display: none;
  }

  .pg-sidebar-support-link {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid rgba(34, 211, 238, 0.26);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(99, 102, 241, 0.17));
    color: #eaf6ff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0 9px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    will-change: transform;
    transition:
      transform 0.24s ease,
      border-color 0.24s ease,
      color 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }

  .pg-sidebar-support-link > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-sidebar-support:focus-visible .pg-sidebar-support-link {
    border-color: rgba(125, 211, 252, 0.42);
    color: #ffffff;
    box-shadow:
      0 10px 22px -18px rgba(34, 211, 238, 0.74),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-sidebar-support:focus-visible {
    outline: none;
    border-color: rgba(125, 211, 252, 0.44);
    box-shadow:
      0 0 0 1px rgba(125, 211, 252, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 30px -24px rgba(34, 211, 238, 0.48);
  }

  .pg-sidebar-support-visual {
    position: absolute;
    top: 7px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    pointer-events: none;
    transform-origin: center bottom;
    will-change: transform;
    animation: pgSidebarSupportFloat 6.8s ease-in-out infinite;
    z-index: 2;
  }

  .pg-sidebar-support-visual::after {
    content: "";
    position: absolute;
    inset: auto 7px 2px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, rgba(15, 23, 42, 0) 76%);
    filter: blur(8px);
    opacity: 0.46;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease;
  }

  .pg-sidebar-support-mascot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    flex: 0 0 auto;
    display: block;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.96;
    filter: drop-shadow(0 7px 14px rgba(2, 6, 23, 0.34));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform, filter;
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.32s ease;
  }

  .pg-sidebar-support-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pg-sidebar-support-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease;
  }

  .pg-sidebar-support-link-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }

  .pg-sidebar-support:focus-visible .pg-sidebar-support-avatar {
    border-color: rgba(125, 211, 252, 0.34);
    box-shadow:
      0 0 0 1px rgba(125, 211, 252, 0.12),
      0 0 20px rgba(34, 211, 238, 0.16);
  }

  .pg-sidebar-support:active {
    transform: translateY(0);
    transition-duration: 0.14s;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 28px -28px rgba(34, 211, 238, 0.42);
  }

  .pg-sidebar-support:active .pg-sidebar-support-link {
    transform: translateY(0);
    box-shadow: 0 8px 18px -18px rgba(34, 211, 238, 0.48);
  }

  .pg-sidebar-support:active .pg-sidebar-support-mascot {
    transform: translate3d(0, 1px, 0) scale(0.972);
  }

  @media (hover: hover) and (pointer: fine) {
    .pg-sidebar-support:hover {
      border-color: rgba(125, 211, 252, 0.32);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 38px -30px rgba(34, 211, 238, 0.52);
    }

    .pg-sidebar-support:hover::before {
      opacity: 0.62;
    }

    .pg-sidebar-support:hover .pg-sidebar-support-avatar {
      transform: translateY(-1px);
      border-color: rgba(125, 211, 252, 0.32);
      box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.08),
        0 0 20px rgba(34, 211, 238, 0.16);
    }

    .pg-sidebar-support:hover .pg-sidebar-support-link {
      border-color: rgba(125, 211, 252, 0.42);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow:
        0 10px 22px -18px rgba(34, 211, 238, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .pg-sidebar-support:hover .pg-sidebar-support-link-icon {
      opacity: 1;
      transform: translateX(1px);
    }

    .pg-sidebar-support:hover .pg-sidebar-support-visual::after {
      opacity: 0.68;
      transform: scale(1.03);
    }

    .pg-sidebar-support:hover .pg-sidebar-support-mascot {
      opacity: 0.98;
      transform: translate3d(0, -1px, 0) scale(1.01);
      filter: drop-shadow(0 10px 18px rgba(2, 6, 23, 0.4));
    }
  }

  @keyframes pgSidebarSupportFloat {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, -2px, 0);
    }
  }

  @keyframes pgSidebarSupportGlow {
    0%, 100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.62;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-sidebar-support,
    .pg-sidebar-support::before,
    .pg-sidebar-support-avatar,
    .pg-sidebar-support-link,
    .pg-sidebar-support-visual,
    .pg-sidebar-support-visual::after,
    .pg-sidebar-support-mascot,
    .pg-sidebar-support-link-icon {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Page Hero */
  .pg-page-hero {
    background:
      linear-gradient(180deg, rgba(24, 33, 54, 0.96) 0%, rgba(12, 19, 34, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 24px;
    padding: clamp(18px, 2.2vw, 28px);
    box-shadow:
      0 26px 52px -40px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
  }

  .pg-dashboard-header.pg-page-hero {
    --pg-header-light-sweep-bg:
      linear-gradient(90deg, transparent 0%, rgba(34, 211, 238, 0.18) 13%, rgba(34, 211, 238, 0.98) 46%, rgba(96, 165, 250, 0.78) 58%, transparent 100%) top center / 100% 3px no-repeat,
      radial-gradient(ellipse 62% 24px at 50% 0%, rgba(34, 211, 238, 0.34), rgba(96, 165, 250, 0.16) 52%, transparent 76%) top center / 100% 26px no-repeat;
    --pg-header-light-sweep-filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.24));
    --pg-header-halo-dust-bg:
      linear-gradient(180deg, rgba(255, 255, 255, 0.052) 0%, rgba(255, 255, 255, 0.014) 34%, rgba(15, 23, 42, 0.018) 100%),
      radial-gradient(ellipse 86% 48% at 50% -8%, rgba(34, 211, 238, 0.34), transparent 48%),
      radial-gradient(ellipse 70% 32% at 52% 4%, rgba(96, 165, 250, 0.18), transparent 58%),
      radial-gradient(circle at 18% 28%, rgba(125, 211, 252, 0.26) 0 1px, transparent 2px),
      radial-gradient(circle at 42% 18%, rgba(96, 165, 250, 0.22) 0 1px, transparent 2px),
      radial-gradient(circle at 72% 32%, rgba(34, 211, 238, 0.2) 0 1px, transparent 2px),
      radial-gradient(circle at 88% 20%, rgba(125, 211, 252, 0.17) 0 1px, transparent 2px);
    border-color: rgba(125, 211, 252, 0.11);
    box-shadow:
      0 24px 54px -42px rgba(2, 6, 23, 0.96),
      0 1px 0 rgba(15, 23, 42, 0.82),
      inset 0 1px 0 rgba(125, 211, 252, 0.08);
    overflow: visible;
    z-index: 9000;
  }

  .pg-dashboard-header.pg-page-hero::after {
    inset: auto 22px auto 22px;
    top: 0;
    height: 30px;
    border-radius: 999px;
    background: var(--pg-header-light-sweep-bg);
    filter: var(--pg-header-light-sweep-filter);
    opacity: 1;
    pointer-events: none;
  }

  /* Top Light Sweep: keep v2 dashboard headers consistent when page-specific hero skins use !important overlays. */
  .pg-dashboard-overview-page .pg-dashboard-header.pg-page-hero,
  .pg-guardian-center-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-auto-shield-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-ticket-system-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-guardian-logs-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-guardian-page .pg-dashboard-header.pg-page-hero,
  .pg-integrity-shield-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-role-shield-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-channel-shield-v2-page .pg-dashboard-header.pg-page-hero,
  .pg-rc-page .pg-dashboard-header.pg-page-hero,
  .pg-am-page .pg-dashboard-header.pg-page-hero,
  .pg-premium-page .pg-dashboard-header.pg-page-hero,
  .pg-settings-v2-page .pg-dashboard-header.pg-page-hero {
    border-color: rgba(125, 211, 252, 0.11) !important;
    box-shadow:
      0 24px 54px -42px rgba(2, 6, 23, 0.96),
      0 1px 0 rgba(15, 23, 42, 0.82),
      inset 0 1px 0 rgba(125, 211, 252, 0.08) !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header.pg-page-hero::after,
  .pg-guardian-center-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-auto-shield-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-ticket-system-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-guardian-logs-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-guardian-page .pg-dashboard-header.pg-page-hero::after,
  .pg-integrity-shield-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-role-shield-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-channel-shield-v2-page .pg-dashboard-header.pg-page-hero::after,
  .pg-rc-page .pg-dashboard-header.pg-page-hero::after,
  .pg-am-page .pg-dashboard-header.pg-page-hero::after,
  .pg-premium-page .pg-dashboard-header.pg-page-hero::after,
  .pg-settings-v2-page .pg-dashboard-header.pg-page-hero::after {
    background: var(--pg-header-light-sweep-bg) !important;
    filter: var(--pg-header-light-sweep-filter) !important;
    opacity: 1 !important;
  }

  .pg-dashboard-header.pg-page-hero::before {
    background: var(--pg-header-halo-dust-bg);
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      180px 120px,
      220px 140px,
      260px 160px,
      300px 180px;
    background-position:
      center top,
      center top,
      center top,
      0 0,
      40px 12px,
      80px 22px,
      120px 8px;
    filter: blur(0.2px) saturate(1.15);
    opacity: 0.46;
    transform: translate3d(-1%, 0, 0);
    animation: pgHeaderHaloDust 26s ease-in-out infinite alternate;
  }

  .pg-dashboard-overview-page .pg-dashboard-header.pg-page-hero::before,
  .pg-guardian-center-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-auto-shield-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-ticket-system-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-guardian-logs-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-guardian-page .pg-dashboard-header.pg-page-hero::before,
  .pg-integrity-shield-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-role-shield-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-channel-shield-v2-page .pg-dashboard-header.pg-page-hero::before,
  .pg-rc-page .pg-dashboard-header.pg-page-hero::before,
  .pg-am-page .pg-dashboard-header.pg-page-hero::before,
  .pg-premium-page .pg-dashboard-header.pg-page-hero::before,
  .pg-settings-v2-page .pg-dashboard-header.pg-page-hero::before {
    background: var(--pg-header-halo-dust-bg) !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      180px 120px,
      220px 140px,
      260px 160px,
      300px 180px !important;
    animation: pgHeaderHaloDust 26s ease-in-out infinite alternate !important;
    filter: blur(0.2px) saturate(1.15) !important;
    opacity: 0.46 !important;
  }

  @keyframes pgHeaderHaloDust {
    0% {
      transform: translate3d(-1%, 0, 0);
      background-position:
        center top,
        center top,
        center top,
        0 0,
        40px 12px,
        80px 22px,
        120px 8px;
      opacity: 0.42;
    }
    50% {
      opacity: 0.55;
    }
    100% {
      transform: translate3d(1%, -1%, 0);
      background-position:
        center top,
        center top,
        center top,
        30px 18px,
        70px 4px,
        110px 34px,
        160px 20px;
      opacity: 0.47;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-dashboard-header.pg-page-hero::before {
      animation: none !important;
      opacity: 0.22 !important;
      transform: none !important;
    }
  }

  .pg-page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: rgba(165, 180, 252, 0.82);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .pg-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.015) 36%,
      rgba(15, 23, 42, 0.02) 100%
    );
    pointer-events: none;
  }

  .pg-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at top right, rgba(96, 165, 250, 0.12) 0%, transparent 34%),
      linear-gradient(135deg, transparent 0%, rgba(129, 140, 248, 0.06) 100%);
    opacity: 0.9;
  }

  .pg-page-hero > * {
    position: relative;
    z-index: 1;
  }

  .pg-page-hero-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 28px);
  }

  .pg-page-hero-body > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .pg-page-hero-body > .flex.items-center.gap-4 {
    min-width: 0;
  }

  .pg-page-hero-body > .flex.items-center.gap-4 > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .pg-page-hero h1 {
    font-size: clamp(1.65rem, 1.18rem + 1.2vw, 2.55rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #f8fbff;
    text-wrap: balance;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .pg-page-hero p {
    margin-top: 0.65rem;
    max-width: min(74ch, 100%);
    color: rgba(203, 213, 225, 0.7);
    line-height: 1.6;
  }

  .pg-page-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-self: flex-start;
  }

  .pg-page-hero-actions .pg-btn {
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.24s ease,
      border-color 0.24s ease,
      background 0.24s ease,
      filter 0.2s ease;
  }

  .pg-page-hero-actions .pg-btn,
  .pg-page-hero-actions .pg-status-badge {
    min-height: 44px;
  }

  .pg-page-hero-actions .pg-status-badge {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%),
      rgba(15, 23, 42, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 14px 24px -22px rgba(15, 23, 42, 0.95);
  }

  .pg-page-hero-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
  }

  .pg-dashboard-header {
    min-height: 0;
    padding: clamp(18px, 2vw, 24px) !important;
    z-index: 9000;
    overflow: visible;
    isolation: isolate;
  }

  .pg-dashboard-header-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main controls";
    align-items: start;
    gap: 14px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: visible;
  }

  .pg-dashboard-header-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
  }

  .pg-dashboard-header-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .pg-dashboard-header-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }

  .pg-dashboard-header-chips > * {
    min-width: 0;
  }

  .pg-dashboard-header-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    align-self: start;
    justify-self: end;
    gap: 10px;
    min-width: 0;
    max-width: min(100%, 28rem);
    position: relative;
    z-index: 9100;
    overflow: visible;
  }

  .pg-dashboard-header-controls > * {
    flex: 0 0 auto;
    min-width: 0;
  }

  .pg-dashboard-header-switcher {
    min-width: 0;
    flex: 1 1 176px;
  }

  .pg-dashboard-header-switcher:empty {
    display: none;
  }

  .pg-dashboard-header-controls .pg-btn,
  .pg-dashboard-header-chips .pg-status-badge {
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 13px;
    font-size: 12px;
    gap: 8px;
  }

  .pg-dashboard-overview-page .pg-dashboard-header,
  .pg-integrity-shield-v2-page .pg-dashboard-header,
  .pg-role-shield-v2-page .pg-dashboard-header,
  .pg-channel-shield-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-body,
  .pg-integrity-shield-v2-page .pg-dashboard-header-body,
  .pg-role-shield-v2-page .pg-dashboard-header-body,
  .pg-channel-shield-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(240px, 1fr) minmax(250px, 0.72fr) auto;
    grid-template-areas: "main insights controls";
    align-items: center;
    gap: 12px;
  }

  .pg-dashboard-header-insights {
    display: none;
    min-width: 0;
  }

  .pg-dashboard-header.pg-dashboard-header-no-insights .pg-dashboard-header-body {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "main controls" !important;
    align-items: center;
    gap: 10px 14px;
  }

  .pg-dashboard-header.pg-dashboard-header-no-insights .pg-dashboard-header-insights {
    display: none !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-insights,
  .pg-integrity-shield-v2-page .pg-dashboard-header-insights,
  .pg-role-shield-v2-page .pg-dashboard-header-insights,
  .pg-channel-shield-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    min-width: 0;
  }

  .pg-dashboard-mini-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(8, 15, 29, 0.54);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 14px 26px -24px rgba(34, 211, 238, 0.42);
  }

  .pg-dashboard-mini-stat span {
    min-width: 0;
    overflow: hidden;
    color: rgba(148, 163, 184, 0.9);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pg-dashboard-mini-stat strong {
    flex: 0 0 auto;
    color: #e0faff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  .pg-dashboard-mini-stat.is-good {
    border-color: rgba(45, 212, 191, 0.22);
    background:
      linear-gradient(180deg, rgba(45, 212, 191, 0.12), rgba(14, 165, 233, 0.035)),
      rgba(8, 15, 29, 0.58);
  }

  .pg-dashboard-mini-stat.is-blue {
    border-color: rgba(56, 189, 248, 0.22);
  }

  .pg-dashboard-mini-stat.is-soft,
  .pg-dashboard-mini-stat.is-muted {
    border-color: rgba(147, 197, 253, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  @media (max-width: 767px) {
    .pg-dashboard-header.pg-dashboard-header-no-insights .pg-dashboard-header-body {
      grid-template-columns: 1fr !important;
      grid-template-areas:
        "controls"
        "main" !important;
    }
  }

  .pg-dashboard-overview-page .pg-dashboard-header-main,
  .pg-integrity-shield-v2-page .pg-dashboard-header-main,
  .pg-role-shield-v2-page .pg-dashboard-header-main,
  .pg-channel-shield-v2-page .pg-dashboard-header-main {
    gap: 8px;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-text,
  .pg-integrity-shield-v2-page .pg-dashboard-header-text,
  .pg-role-shield-v2-page .pg-dashboard-header-text,
  .pg-channel-shield-v2-page .pg-dashboard-header-text {
    gap: 5px;
  }

  .pg-dashboard-overview-page .pg-page-hero .pg-dashboard-title,
  .pg-integrity-shield-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-role-shield-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-channel-shield-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-dashboard-overview-page .pg-page-hero .pg-dashboard-description,
  .pg-integrity-shield-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-role-shield-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-channel-shield-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-chips,
  .pg-integrity-shield-v2-page .pg-dashboard-header-chips,
  .pg-role-shield-v2-page .pg-dashboard-header-chips,
  .pg-channel-shield-v2-page .pg-dashboard-header-chips {
    gap: 6px;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-controls,
  .pg-integrity-shield-v2-page .pg-dashboard-header-controls,
  .pg-role-shield-v2-page .pg-dashboard-header-controls,
  .pg-channel-shield-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-dashboard-overview-page .pg-dashboard-header-controls .pg-btn,
  .pg-dashboard-overview-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-integrity-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-integrity-shield-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-role-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-role-shield-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-channel-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-channel-shield-v2-page .pg-dashboard-header-chips .pg-status-badge {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 12px;
  }

  .pg-dashboard-overview-page .pg-server-switcher-trigger,
  .pg-integrity-shield-v2-page .pg-server-switcher-trigger,
  .pg-role-shield-v2-page .pg-server-switcher-trigger,
  .pg-channel-shield-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    padding-block: 3px;
    border-radius: 12px;
  }

  .pg-dashboard-overview-page .pg-dashboard-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.7);
    animation: pgDashboardLiveDot 2.6s ease-in-out infinite;
  }

  @keyframes pgDashboardLiveDot {
    0%, 100% {
      opacity: 0.72;
      transform: scale(0.92);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-dashboard-overview-page .pg-dashboard-badge::before {
      animation: none !important;
      opacity: 0.82;
    }
  }

  .pg-settings-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-settings-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main controls"
      "insights insights";
    align-items: center;
    gap: 12px;
  }

  .pg-settings-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .pg-settings-v2-page .pg-dashboard-mini-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 7px 9px;
  }

  .pg-settings-v2-page .pg-dashboard-mini-stat span,
  .pg-settings-v2-page .pg-dashboard-mini-stat strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .pg-settings-v2-page .pg-dashboard-header-main,
  .pg-settings-v2-page .pg-dashboard-header-text {
    gap: 6px;
  }

  .pg-settings-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-settings-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-settings-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-settings-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-settings-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-settings-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    border-radius: 12px;
  }

  .pg-settings-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-settings-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px;
  }

  .pg-settings-v2-page .pg-server-switcher-trigger {
    padding-block: 3px;
  }

  @media (max-width: 1320px) {
    .pg-settings-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .pg-settings-v2-page .pg-dashboard-header-body {
      grid-template-columns: 1fr;
      grid-template-areas:
        "main"
        "insights"
        "controls";
    }

    .pg-settings-v2-page .pg-dashboard-header-insights {
      grid-template-columns: 1fr;
    }

    .pg-settings-v2-page .pg-dashboard-header-controls {
      justify-self: stretch;
      width: 100%;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 1180px) and (min-width: 981px) {
    .pg-dashboard-overview-page .pg-dashboard-header-body {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "main controls"
        "insights insights";
    }

    .pg-dashboard-overview-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .pg-dashboard-control-btn {
    justify-content: center;
    flex-shrink: 0;
  }

  .pg-dashboard-back-btn {
    padding-inline: 10px;
  }

  .pg-dashboard-back-icon,
  .pg-dashboard-back-icon svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .pg-dashboard-logout-btn {
    padding-inline: 12px;
  }

  .pg-page-hero .pg-dashboard-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: #f8fbff;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .pg-dashboard-badge {
    padding: 5px 12px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    flex: 0 0 auto;
  }

  .pg-page-hero .pg-dashboard-description {
    margin: 0;
    max-width: min(72ch, 100%);
    min-width: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.72);
  }

  .pg-dashboard-header-chips .pg-status-badge {
    gap: 8px;
    padding-inline: 12px;
    line-height: 1;
  }

  .pg-help-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-inline-start: 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 100%),
      rgba(8, 13, 26, 0.74);
    color: #dbe4ff;
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      inset 0 -1px 0 rgba(15, 23, 42, 0.55),
      0 12px 26px -24px rgba(99, 102, 241, 0.8);
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      background 0.18s ease,
      color 0.18s ease,
      box-shadow 0.18s ease;
  }

  .pg-help-button span {
    display: block;
    translate: 0 -0.5px;
  }

  .pg-help-button:hover,
  .pg-help-button:focus-visible {
    transform: translateY(-1px) scale(1.015);
    border-color: rgba(129, 140, 248, 0.52);
    background:
      linear-gradient(180deg, rgba(99, 102, 241, 0.2) 0%, rgba(34, 211, 238, 0.06) 100%),
      rgba(15, 23, 42, 0.94);
    color: #ffffff;
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.12),
      0 16px 34px -20px rgba(99, 102, 241, 0.72);
    outline: none;
  }

  .pg-dashboard-header-chips .pg-status-badge {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%),
      rgba(15, 23, 42, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 14px 24px -22px rgba(15, 23, 42, 0.95);
  }

  .pg-sidebar-nav {
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .pg-sidebar-footer {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 12px 14px !important;
  }

  .pg-server-switcher {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 220px;
    flex: 1 1 176px;
    z-index: 9200;
    overflow: visible;
  }

  .pg-server-switcher[open] {
    z-index: 9999;
  }

  .pg-server-switcher-trigger {
    min-height: 38px;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 13px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%),
      rgba(15, 23, 42, 0.52);
    color: #e2e8f0;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 16px 28px -22px rgba(15, 23, 42, 0.92);
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    white-space: nowrap;
  }

  .pg-server-switcher-trigger::-webkit-details-marker {
    display: none;
  }

  .pg-server-switcher-avatar,
  .pg-server-switcher-item-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.9);
  }

  .pg-server-switcher-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #f8fafc;
  }

  .pg-server-switcher-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    overflow: hidden;
  }

  .pg-server-switcher-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.84);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .pg-server-switcher-copy strong {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #f8fafc;
  }

  .pg-server-switcher-arrow {
    justify-self: end;
    color: rgba(203, 213, 225, 0.72);
    font-size: 10px;
  }

  .pg-server-switcher[open] .pg-server-switcher-arrow {
    transform: rotate(180deg);
  }

  .pg-server-switcher-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10000;
    width: min(320px, calc(100vw - 32px));
    max-height: min(420px, 72vh);
    overflow-y: auto;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(9, 14, 26, 0.96);
    box-shadow:
      0 26px 60px -24px rgba(2, 6, 23, 0.98),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
  }

  .pg-dashboard-header .pg-server-switcher-menu,
  .pg-dashboard-header .pg-lang-menu {
    z-index: 10000 !important;
  }

  .pg-server-switcher-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    color: #e2e8f0;
    text-decoration: none;
    border: 1px solid transparent;
  }

  .pg-server-switcher-item:hover,
  .pg-server-switcher-item.is-active {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(129, 140, 248, 0.2);
  }

  .pg-server-switcher-item-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
  }

  .pg-server-switcher-item-state {
    color: rgba(148, 163, 184, 0.78);
    font-size: 11px;
    font-weight: 700;
  }

  .pg-server-switcher-item.is-active .pg-server-switcher-item-state {
    color: #86efac;
  }

  .pg-dashboard-toolbar {
    position: relative;
    z-index: 1;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(9, 14, 26, 0.82) 100%);
    box-shadow:
      0 20px 42px -36px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .pg-dashboard-toolbar-items {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
  }

  .pg-dashboard-toolbar-helper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 100%;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(34, 211, 238, 0.13);
    border-radius: 999px;
    background: rgba(8, 15, 29, 0.42);
    color: rgba(191, 219, 254, 0.78);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .pg-dashboard-overview-page .pg-dashboard-toolbar {
    min-height: 0;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .pg-dashboard-overview-page .pg-dashboard-toolbar-items {
    flex: 0 1 auto;
    width: auto;
    gap: 8px;
  }

  .pg-dashboard-overview-page .pg-dashboard-toolbar-items .pg-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 12px;
  }

  .pg-lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: no-preference) {
    .pg-page-hero {
      animation: pgShellEnter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .pg-content {
      animation: pgShellEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) both 0.04s;
    }

    .pg-page-hero-body > :first-child {
      animation: pgHeroStagger 0.38s cubic-bezier(0.22, 1, 0.36, 1) both 0.02s;
    }

    .pg-page-hero-actions {
      animation: pgHeroStagger 0.42s cubic-bezier(0.22, 1, 0.36, 1) both 0.08s;
    }
  }

  @keyframes pgShellEnter {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pgHeroStagger {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .pg-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--pg-surface);
    border: 1px solid var(--pg-border);
    font-size: 13px;
    font-weight: 600;
  }

  /* Toast Notifications */
  #pgToastWrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: grid;
    gap: 12px;
  }

  .pg-toast {
    min-width: 300px;
    max-width: 450px;
    padding: 15px 18px 15px 16px;
    border-radius: 18px;
    background:
      radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 42%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.9) 100%);
    backdrop-filter: blur(20px);
    box-shadow:
      0 24px 48px -18px rgba(2, 6, 23, 0.78),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    color: var(--pg-text);
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--pg-border);
    overflow: hidden;
    position: relative;
  }

  .pg-toast::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.55);
  }

  .pg-toast.show {
    transform: translateX(0);
    opacity: 1;
  }

  .pg-toast .icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 10px 24px -14px rgba(15, 23, 42, 0.95);
  }

  .pg-toast .msg {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.96);
  }

  .pg-toast .icon svg,
  .pg-toast .x svg {
    width: 17px;
    height: 17px;
  }

  .pg-toast.success {
    border-color: rgba(45, 212, 191, 0.28);
    background:
      radial-gradient(circle at top left, rgba(45, 212, 191, 0.18), transparent 42%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(17, 94, 89, 0.16) 100%);
  }

  .pg-toast.success .icon {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.26), rgba(16, 185, 129, 0.14));
    color: #7dd3fc;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(45, 212, 191, 0.12),
      0 12px 28px -16px rgba(45, 212, 191, 0.7);
  }

  .pg-toast.success::before {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.95), rgba(16, 185, 129, 0.7));
  }

  .pg-toast.pg-toast-save-success {
    min-width: 320px;
    max-width: 420px;
    padding: 14px 16px 14px 10px;
    gap: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    border-color: rgba(74, 222, 128, 0.24);
    background:
      radial-gradient(circle at 14% 16%, rgba(34, 211, 238, 0.18), transparent 34%),
      radial-gradient(circle at 84% 86%, rgba(74, 222, 128, 0.16), transparent 30%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(6, 78, 59, 0.14) 100%);
    box-shadow:
      0 28px 52px -24px rgba(2, 6, 23, 0.82),
      0 0 0 1px rgba(74, 222, 128, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translate3d(22px, 12px, 0) scale(0.975);
  }

  .pg-toast.pg-toast-save-success::before {
    inset: 8px auto 8px 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.95), rgba(74, 222, 128, 0.88));
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.28);
  }

  .pg-toast.pg-toast-save-success.show {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .pg-toast-save-mascot {
    position: relative;
    width: 76px;
    height: 66px;
    margin-left: -6px;
    display: grid;
    place-items: end center;
    flex: 0 0 auto;
    pointer-events: none;
  }

  .pg-toast-save-mascot::before {
    content: "";
    position: absolute;
    inset: auto 10px 4px;
    height: 26px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.26) 0%, rgba(34, 211, 238, 0.08) 42%, transparent 74%);
    filter: blur(12px);
    opacity: 0.72;
  }

  .pg-toast-save-mascot img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(2, 6, 23, 0.42));
    transform: translate3d(0, 0, 0);
    animation: pgToastSaveMascotFloat 5.8s ease-in-out infinite;
  }

  .pg-toast-save-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .pg-toast-save-label {
    font-size: 0.72rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(134, 239, 172, 0.94);
  }

  .pg-toast-save-message {
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
    color: rgba(240, 253, 244, 0.96);
    text-wrap: balance;
  }

  .pg-toast.pg-toast-save-success .x {
    align-self: start;
    margin-left: 2px;
  }

  @keyframes pgToastSaveMascotFloat {
    0%, 100% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, -2px, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-toast,
    .pg-toast.show,
    .pg-toast .x,
    .pg-toast-save-mascot img {
      animation: none !important;
      transition-duration: 0.01ms !important;
      transform: none !important;
    }
  }

  .pg-toast.error {
    border-color: rgba(239, 68, 68, 0.3);
    background:
      radial-gradient(circle at top left, rgba(248, 113, 113, 0.2), transparent 42%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(127, 29, 29, 0.16) 100%);
  }

  .pg-toast.error .icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(127, 29, 29, 0.16));
    color: #f87171;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(248, 113, 113, 0.12),
      0 12px 28px -16px rgba(248, 113, 113, 0.68);
  }

  .pg-toast.error::before {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.95), rgba(239, 68, 68, 0.72));
  }

  .pg-toast.warning {
    border-color: rgba(245, 158, 11, 0.32);
    background:
      radial-gradient(circle at top left, rgba(251, 191, 36, 0.18), transparent 42%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(120, 53, 15, 0.16) 100%);
  }

  .pg-toast.warning .icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.14));
    color: #fbbf24;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(251, 191, 36, 0.12),
      0 12px 28px -16px rgba(251, 191, 36, 0.62);
  }

  .pg-toast.warning::before {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.72));
  }

  .pg-toast.info {
    border-color: rgba(96, 165, 250, 0.3);
    background:
      radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 42%),
      linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 64, 175, 0.16) 100%);
  }

  .pg-toast.info .icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(37, 99, 235, 0.14));
    color: #93c5fd;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(96, 165, 250, 0.12),
      0 12px 28px -16px rgba(96, 165, 250, 0.64);
  }

  .pg-toast.info::before {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.95), rgba(59, 130, 246, 0.7));
  }

  .pg-toast .x {
    margin-left: auto;
    opacity: 0.56;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 999px;
    transition: all 0.2s ease;
    color: rgba(203, 213, 225, 0.88);
  }

  .pg-toast .x:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
  }

  .pg-ajax-save-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid rgba(34, 211, 238, 0.24);
    background: rgba(8, 47, 73, 0.22);
    color: #cffafe;
    padding: 12px 14px;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .pg-ajax-save-banner[hidden] {
    display: none !important;
  }

  .pg-ajax-save-banner.is-success {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(22, 101, 52, 0.18);
    color: #dcfce7;
  }

  .pg-ajax-save-banner.is-warning {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(120, 53, 15, 0.2);
    color: #fef3c7;
  }

  .pg-ajax-save-banner.is-error {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(127, 29, 29, 0.2);
    color: #fee2e2;
  }

  .pg-field-invalid {
    border-color: rgba(248, 113, 113, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16) !important;
  }

  .pg-ajax-field-error {
    color: #fecaca;
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 6px;
  }

  .pg-savebar,
  .pg-unsaved-bar {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 9998;
    width: min(760px, calc(100vw - 28px));
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    border-radius: 20px;
    background: rgba(8, 15, 31, 0.94);
    backdrop-filter: blur(20px);
    box-shadow:
      0 28px 60px -24px rgba(2, 6, 23, 0.92),
      0 0 0 1px rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(calc(100% + 28px)) scale(0.98);
    transform-origin: center bottom;
    transition:
      opacity 0.24s ease,
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }

  .pg-savebar.show,
  .pg-unsaved-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pg-unsaved-bar.is-danger {
    border-color: rgba(248, 113, 113, 0.32);
    background:
      radial-gradient(circle at top right, rgba(239, 68, 68, 0.16) 0%, transparent 34%),
      linear-gradient(180deg, rgba(38, 10, 18, 0.96) 0%, rgba(24, 10, 16, 0.98) 100%);
    box-shadow:
      0 30px 68px -24px rgba(69, 10, 10, 0.72),
      0 0 0 1px rgba(248, 113, 113, 0.16),
      0 0 28px rgba(239, 68, 68, 0.16);
  }

  .pg-unsaved-bar.is-shaking {
    animation:
      slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      pgUnsavedShake 0.42s ease;
  }

  .pg-unsaved-bar-content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
  }

  .pg-unsaved-bar-message {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .pg-unsaved-bar-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #dbeafe;
    background:
      linear-gradient(135deg, rgba(37, 99, 235, 0.28) 0%, rgba(99, 102, 241, 0.22) 100%),
      rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(129, 140, 248, 0.24);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 28px -18px rgba(59, 130, 246, 0.58);
  }

  .pg-unsaved-bar.is-danger .pg-unsaved-bar-icon {
    color: #fee2e2;
    background:
      linear-gradient(135deg, rgba(239, 68, 68, 0.28) 0%, rgba(249, 115, 22, 0.18) 100%),
      rgba(38, 10, 18, 0.72);
    border-color: rgba(248, 113, 113, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 28px -18px rgba(239, 68, 68, 0.56);
  }

  .pg-unsaved-bar-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }

  .pg-unsaved-bar-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .pg-unsaved-bar-title {
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.35;
  }

  .pg-unsaved-bar-note {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.72);
  }

  .pg-unsaved-bar.is-danger .pg-unsaved-bar-note {
    color: rgba(254, 226, 226, 0.86);
  }

  .pg-unsaved-bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pg-unsaved-bar .pg-btn {
    min-width: 132px;
  }

  .pg-unsaved-bar .pg-btn[disabled] {
    opacity: 0.46;
  }

  @keyframes slideUp {
    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
  }

  @keyframes pgUnsavedShake {
    0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
    18% { transform: translateX(calc(-50% - 8px)) translateY(0) scale(1); }
    36% { transform: translateX(calc(-50% + 7px)) translateY(0) scale(1); }
    54% { transform: translateX(calc(-50% - 5px)) translateY(0) scale(1); }
    72% { transform: translateX(calc(-50% + 4px)) translateY(0) scale(1); }
  }

  /* Disabled State */
  .pg-disabled {
    opacity: 0.5;
    filter: saturate(0.5);
  }

  .pg-disabled * {
    pointer-events: none;
  }

  .pg-disabled .pg-toggle-keeper,
  .pg-disabled .pg-toggle-keeper * {
    pointer-events: auto !important;
    opacity: 1 !important;
  }

  /* Micro Animations */
  .pg-ping {
    animation: pgPing 0.6s ease;
  }

  @keyframes pgPing {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  }

  /* Section Headers */
  .pg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }

  .pg-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pg-text);
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
  }

  .pg-section-subtitle {
    font-size: 13px;
    color: rgba(203, 213, 225, 0.68);
    margin-top: 6px;
    line-height: 1.55;
  }

  .pg-hover-lift {
    position: relative;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  }

  .pg-hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 28px 48px -24px rgba(0, 0, 0, 0.78), 0 0 36px rgba(99, 102, 241, 0.24);
  }

  .pg-hover-lift::after {
    content: '';
    position: absolute;
    inset: auto 18px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.9), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .pg-hover-lift:hover::after {
    opacity: 1;
  }

  /* Server Overview */
  .pg-overview-page {
    container-type: inline-size;
  }

  .pg-overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(18px, 2.4vw, 30px);
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(129, 140, 248, 0.18);
    border-radius: 24px;
    background:
      linear-gradient(135deg, rgba(30, 41, 59, 0.84), rgba(11, 17, 31, 0.94) 58%, rgba(15, 23, 42, 0.82)),
      radial-gradient(80% 110% at 78% 16%, rgba(34, 211, 238, 0.16), transparent 56%);
    box-shadow:
      0 28px 70px -46px rgba(15, 23, 42, 1),
      inset 0 1px 0 rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
  }

  .pg-overview-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.3), transparent 72%);
    opacity: 0.32;
    pointer-events: none;
  }

  .pg-overview-hero-copy,
  .pg-overview-hero-panel {
    position: relative;
    z-index: 1;
  }

  .pg-overview-kicker {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .pg-overview-hero h2 {
    margin-top: 10px;
    color: #f8fafc;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.02;
    font-weight: 850;
    letter-spacing: 0;
  }

  .pg-overview-hero p {
    margin-top: 12px;
    max-width: 760px;
    color: rgba(226, 232, 240, 0.76);
    font-size: 15px;
    line-height: 1.65;
  }

  .pg-overview-chip-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

  .pg-overview-chip {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .pg-overview-chip span,
  .pg-overview-panel-label,
  .pg-overview-panel-grid span {
    display: block;
    color: rgba(148, 163, 184, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pg-overview-chip strong {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
  }

  .pg-overview-hero-panel {
    align-self: stretch;
    min-height: 100%;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .pg-overview-panel-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .pg-overview-panel-top strong {
    display: block;
    margin-top: 7px;
    color: #f8fafc;
    font-size: 24px;
    line-height: 1.1;
  }

  .pg-overview-meter {
    height: 10px;
    margin-top: 24px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.14);
    overflow: hidden;
  }

  .pg-overview-meter span {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #a78bfa);
    box-shadow: 0 0 22px rgba(99, 102, 241, 0.36);
  }

  .pg-overview-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
  }

  .pg-overview-panel-grid div {
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.1);
  }

  .pg-overview-panel-grid strong {
    display: block;
    margin-top: 5px;
    color: #e0f2fe;
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .pg-overview-section {
    min-width: 0;
  }

  .pg-overview-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
  }

  .pg-overview-stat-card {
    min-height: 230px;
  }

  .pg-overview-analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .pg-overview-chart-card {
    padding: 20px;
    min-height: 276px;
  }

  .pg-overview-chart-card:first-child,
  .pg-overview-chart-card:nth-child(2) {
    grid-column: span 2;
  }

  .pg-overview-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .pg-overview-card-head h3 {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .pg-overview-card-head p {
    margin-top: 5px;
    color: rgba(203, 213, 225, 0.68);
    font-size: 13px;
    line-height: 1.45;
  }

  .pg-overview-card-head strong {
    color: #e0f2fe;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
  }

  .pg-overview-card-metric {
    display: grid;
    gap: 5px;
    justify-items: end;
    min-width: max-content;
    text-align: right;
  }

  .pg-overview-card-metric span {
    color: rgba(148, 163, 184, 0.86);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pg-overview-card-metric strong {
    color: #e0f2fe;
    font-size: 26px;
    line-height: 1;
    white-space: nowrap;
  }

  .pg-overview-line-chart {
    width: 100%;
    height: 142px;
    margin-top: 18px;
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
    background-size: 100% 33.333%, 20% 100%;
    filter: drop-shadow(0 10px 16px rgba(34, 211, 238, 0.16));
  }

  .pg-overview-line-area {
    opacity: 1;
    transition: opacity 900ms ease 220ms;
  }

  .pg-overview-line-path {
    filter:
      drop-shadow(0 0 8px rgba(139, 92, 246, 0.28))
      drop-shadow(0 0 12px rgba(34, 211, 238, 0.26));
    transition: stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  }

  .pg-overview-line-dot {
    fill: #e0faff;
    stroke: rgba(2, 6, 23, 0.9);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.58));
    opacity: 1;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 360ms ease 820ms, transform 360ms ease 820ms;
  }

  .pg-overview-chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    color: rgba(148, 163, 184, 0.9);
    font-size: 12px;
  }

  .pg-overview-chart-foot span:first-child {
    color: rgba(226, 232, 240, 0.86);
    font-weight: 700;
  }

  .pg-overview-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    height: 150px;
    margin-top: 18px;
    padding: 12px 4px 0;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.22);
  }

  .pg-overview-signal-bars {
    border: 1px solid rgba(125, 211, 252, 0.1);
    background:
      linear-gradient(180deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px),
      rgba(2, 6, 23, 0.24);
    background-size: 100% 33.333%;
  }

  .pg-overview-bar-item {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    min-width: 0;
    height: 100%;
    gap: 8px;
  }

  .pg-overview-bar-item span {
    position: relative;
    display: block;
    width: 100%;
    min-height: 8px;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #67e8f9, #38bdf8 54%, #2563eb);
    box-shadow: 0 10px 18px rgba(34, 211, 238, 0.18);
    transform: scaleY(1);
    transform-origin: bottom;
    transition: height 220ms ease, box-shadow 220ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
  }

  .pg-overview-bar-item span em {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    color: rgba(226, 232, 240, 0.76);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .pg-overview-bar-item:hover span em,
  .pg-overview-bar-item:focus-within span em {
    opacity: 1;
  }

  .pg-overview-bar-item small {
    color: rgba(148, 163, 184, 0.82);
    font-size: 11px;
    text-align: center;
  }

  .pg-heat-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    margin-top: 22px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(2, 6, 23, 0.22);
  }

  .pg-heat-cell {
    aspect-ratio: 1;
    min-height: 12px;
    border-radius: 5px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
      linear-gradient(135deg, rgba(34, 211, 238, calc(0.12 + var(--pg-heat) * 0.0048)), rgba(129, 140, 248, calc(0.10 + var(--pg-heat) * 0.0052))),
      rgba(15, 23, 42, 0.72);
    box-shadow: 0 0 calc(6px + var(--pg-heat) * 0.18px) rgba(99, 102, 241, calc(var(--pg-heat) * 0.0022));
  }

  .pg-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .pg-health-card {
    min-width: 0;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(2, 6, 23, 0.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .pg-health-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .pg-health-card-top strong {
    min-width: 0;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
  }

  .pg-health-card-top .pg-badge {
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .pg-health-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .pg-health-meta div {
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(15, 23, 42, 0.44);
  }

  .pg-health-meta span {
    display: block;
    color: rgba(148, 163, 184, 0.86);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .pg-health-meta b {
    display: block;
    margin-top: 5px;
    color: rgba(226, 232, 240, 0.92);
    font-size: 12px;
    font-weight: 750;
    overflow-wrap: anywhere;
  }

  .pg-health-card p {
    margin-top: 12px;
    color: rgba(203, 213, 225, 0.66);
    font-size: 12px;
    line-height: 1.45;
  }

  .pg-ratio-row {
    display: grid;
    gap: 14px;
    margin-top: 22px;
  }

  .pg-ratio-row div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
  }

  .pg-ratio-row span {
    color: rgba(203, 213, 225, 0.75);
    font-size: 13px;
    font-weight: 700;
  }

  .pg-ratio-row strong {
    color: #f8fafc;
    font-size: 20px;
  }

  .pg-ratio-row i {
    grid-column: 1 / -1;
    display: block;
    height: 10px;
    min-width: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #22d3ee);
    opacity: 0.72;
  }

  .pg-empty-inline {
    margin-top: 24px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.42);
    color: rgba(203, 213, 225, 0.72);
    font-size: 13px;
  }

  .pg-overview-donut {
    width: 148px;
    height: 148px;
    margin: 22px auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle, rgba(15, 23, 42, 0.96) 0 57%, transparent 58%),
      conic-gradient(#22d3ee 0 var(--pg-cover), rgba(51, 65, 85, 0.76) var(--pg-cover) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 36px -28px rgba(34, 211, 238, 0.75);
  }

  .pg-overview-donut span {
    color: #f8fafc;
    font-size: 26px;
    font-weight: 850;
  }

  .pg-overview-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pg-snapshot-grid,
  .pg-system-grid,
  .pg-quick-action-grid {
    display: grid;
    gap: 12px;
  }

  .pg-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-snapshot-item {
    min-width: 0;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.42);
  }

  .pg-snapshot-item span {
    color: rgba(148, 163, 184, 0.92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pg-snapshot-item strong {
    display: block;
    margin-top: 8px;
    color: #f8fafc;
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .pg-snapshot-item p {
    margin-top: 7px;
    color: rgba(203, 213, 225, 0.66);
    font-size: 13px;
    line-height: 1.45;
  }

  .pg-system-card,
  .pg-quick-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.36);
    color: inherit;
    text-decoration: none;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease;
  }

  .pg-system-card:hover,
  .pg-quick-action:hover {
    transform: translateY(-2px);
    border-color: rgba(129, 140, 248, 0.3);
    background: rgba(30, 41, 59, 0.52);
  }

  .pg-system-card .pg-feature-icon,
  .pg-quick-action .pg-feature-icon,
  .pg-overview-empty .pg-feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    margin: 0;
    font-size: 18px;
  }

  .pg-system-copy,
  .pg-quick-action span:last-child {
    min-width: 0;
  }

  .pg-system-copy strong,
  .pg-quick-action strong,
  .pg-overview-empty strong {
    display: block;
    color: #f8fafc;
    font-size: 14px;
    font-weight: 800;
  }

  .pg-system-copy small,
  .pg-quick-action small {
    display: block;
    margin-top: 4px;
    color: rgba(203, 213, 225, 0.66);
    font-size: 12px;
    line-height: 1.35;
  }

  .pg-quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-quick-action {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .pg-live-feed {
    display: grid;
    gap: 10px;
  }

  .pg-feed-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.11);
  }

  .pg-feed-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 999px;
    background: #60a5fa;
    box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.1);
  }

  .pg-feed-green .pg-feed-dot { background: #34d399; box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.1); }
  .pg-feed-amber .pg-feed-dot { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.1); }
  .pg-feed-purple .pg-feed-dot { background: #c084fc; box-shadow: 0 0 0 5px rgba(192, 132, 252, 0.1); }

  .pg-feed-item strong {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 800;
  }

  .pg-feed-item p {
    margin-top: 3px;
    color: rgba(203, 213, 225, 0.66);
    font-size: 12px;
    line-height: 1.4;
  }

  .pg-feed-item time {
    color: rgba(148, 163, 184, 0.78);
    font-size: 12px;
    white-space: nowrap;
  }

  .pg-overview-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 34px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.28);
    text-align: center;
  }

  .pg-overview-empty p {
    max-width: 360px;
    color: rgba(203, 213, 225, 0.68);
    font-size: 13px;
    line-height: 1.5;
  }

  .pg-dashboard-overview-v2 {
    width: 100%;
    max-width: min(100%, 1560px);
    margin-inline: 0 auto;
    gap: 20px;
  }

  .pg-dashboard-overview-v2,
  .pg-dashboard-overview-v2 * {
    min-width: 0;
  }

  .pg-overview-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 20px;
    align-items: stretch;
  }

  .pg-overview-main-card,
  .pg-overview-stat-card,
  .pg-overview-side-card,
  .pg-overview-activity-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 29, 0.76);
    box-shadow:
      0 26px 54px -42px rgba(2, 6, 23, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: none;
    backface-visibility: hidden;
    transition:
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }

  .pg-overview-main-card {
    padding: 26px;
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 36%),
      linear-gradient(135deg, rgba(6, 16, 33, 0.98), rgba(8, 25, 49, 0.94) 48%, rgba(2, 8, 23, 0.98));
    border-color: rgba(34, 211, 238, 0.2);
    min-height: 326px;
  }

  .pg-overview-main-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.24;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 78%);
    pointer-events: none;
  }

  .pg-overview-blue-glow {
    box-shadow:
      0 30px 78px -48px rgba(34, 211, 238, 0.58),
      0 18px 52px -40px rgba(2, 6, 23, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-overview-main-card:hover,
  .pg-overview-side-card:hover,
  .pg-overview-activity-card:hover {
    transform: none;
    border-color: rgba(34, 211, 238, 0.24);
    box-shadow:
      0 32px 68px -48px rgba(34, 211, 238, 0.45),
      0 20px 54px -44px rgba(2, 6, 23, 0.96),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

  .pg-dashboard-overview-v2 .pg-overview-card-head,
  .pg-overview-section-head,
  .pg-overview-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-head {
    position: relative;
    z-index: 1;
  }

  .pg-dashboard-overview-v2 h2,
  .pg-dashboard-overview-v2 h3 {
    margin: 0;
    color: #f8fbff;
    letter-spacing: 0;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-head h2 {
    margin-top: 12px;
    font-size: 34px;
    line-height: 1.05;
  }

  .pg-overview-section-head h2 {
    margin-top: 8px;
    font-size: 20px;
    line-height: 1.16;
  }

  .pg-overview-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #a5f3fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pg-overview-pill.is-good {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(13, 148, 136, 0.14);
    color: #ccfbf1;
  }

  .pg-overview-pill.is-soft {
    border-color: rgba(147, 197, 253, 0.18);
    background: rgba(59, 130, 246, 0.1);
    color: #bfdbfe;
  }

  .pg-overview-muted {
    color: rgba(203, 213, 225, 0.68);
    font-size: 13px;
    line-height: 1.5;
  }

  .pg-overview-main-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(220px, 1fr);
    gap: 22px;
    align-items: end;
    margin-top: 28px;
  }

  .pg-overview-metric span,
  .pg-overview-hero-stats span,
  .pg-overview-stat-label,
  .pg-overview-side-card > .pg-overview-pill + .pg-overview-side-value + .pg-overview-muted {
    letter-spacing: 0;
  }

  .pg-overview-metric span,
  .pg-overview-hero-stats span,
  .pg-overview-stat-label {
    display: block;
    color: rgba(148, 163, 184, 0.92);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .pg-overview-metric strong {
    display: block;
    margin-top: 4px;
    color: #f8fbff;
    font-size: 58px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0;
  }

  .pg-overview-metric small {
    display: block;
    margin-top: 8px;
    color: rgba(191, 219, 254, 0.84);
    font-size: 13px;
    font-weight: 700;
  }

  .pg-overview-chart-lines {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
    height: 138px;
    padding: 16px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px),
      rgba(2, 6, 23, 0.34);
    background-size: 100% 33.333%;
  }

  .pg-overview-chart-lines span {
    display: block;
    min-height: 20px;
    border-radius: 999px 999px 7px 7px;
    background: linear-gradient(180deg, #67e8f9, #0ea5e9 62%, #0f766e);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
  }

  .pg-overview-coverage-visual {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 148px;
    padding: 16px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 18px;
    background:
      radial-gradient(circle at 22% 22%, rgba(34, 211, 238, 0.12), transparent 38%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 34px rgba(2, 6, 23, 0.22);
  }

  .pg-overview-coverage-ring {
    --pg-coverage-deg: 0deg;
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    aspect-ratio: 1;
    border-radius: 999px;
    background:
      conic-gradient(from 210deg, #22d3ee 0deg, #38bdf8 var(--pg-coverage-deg), rgba(51, 65, 85, 0.7) var(--pg-coverage-deg), rgba(15, 23, 42, 0.92) 360deg);
    box-shadow: 0 0 26px rgba(34, 211, 238, 0.2), inset 0 0 18px rgba(15, 23, 42, 0.42);
    transition: background 220ms ease;
  }

  .pg-overview-coverage-ring::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: inherit;
    background: rgba(2, 6, 23, 0.82);
    box-shadow: inset 0 0 22px rgba(14, 165, 233, 0.12);
  }

  .pg-overview-coverage-ring > div {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    text-align: center;
  }

  .pg-overview-coverage-ring strong {
    color: #f8fbff;
    font-size: 22px;
    line-height: 1;
  }

  .pg-overview-coverage-ring span {
    color: rgba(191, 219, 254, 0.76);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .pg-overview-system-breakdown {
    min-width: 0;
  }

  .pg-overview-segment-meter {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
  }

  .pg-overview-segment-meter span {
    height: 8px;
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  .pg-overview-segment-meter span.is-active {
    background: linear-gradient(90deg, #22d3ee, #34d399);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.28);
  }

  .pg-overview-system-mini-list {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    overflow: visible;
  }

  .pg-overview-system-mini {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 8px;
    border: 1px solid rgba(125, 211, 252, 0.08);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.22);
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
  }

  .pg-overview-system-mini:hover,
  .pg-overview-system-mini:focus-visible {
    border-color: rgba(34, 211, 238, 0.28);
    background: rgba(14, 165, 233, 0.1);
    transform: translateY(-1px);
  }

  .pg-overview-system-mini > span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.78);
  }

  .pg-overview-system-mini.is-active > span {
    background: #34d399;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.46);
  }

  .pg-overview-system-mini em,
  .pg-overview-system-mini strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-overview-system-mini em {
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
  }

  .pg-overview-system-mini strong {
    color: rgba(191, 219, 254, 0.74);
    font-size: 11px;
    font-weight: 800;
  }

  .pg-overview-system-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 10px;
    border: 1px solid rgba(125, 211, 252, 0.1);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.54);
    color: rgba(191, 219, 254, 0.78);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .pg-overview-system-summary-pill.is-active {
    border-color: rgba(45, 212, 191, 0.2);
    background: rgba(13, 148, 136, 0.14);
    color: #ccfbf1;
  }

  .pg-chart-reveal {
    --pg-reveal-stagger: 80ms;
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-coverage-ring {
    --pg-coverage-deg: 0deg !important;
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-segment-meter span {
    opacity: 0.32;
    transform: translateY(5px) scaleX(0.36);
  }

  .pg-chart-reveal.pg-chart-visible .pg-overview-segment-meter span {
    opacity: 1;
    transform: translateY(0) scaleX(1);
    transition:
      opacity 540ms ease,
      transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
      background 220ms ease,
      box-shadow 220ms ease;
    transition-delay: calc(var(--pg-segment-index, 0) * var(--pg-reveal-stagger));
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-system-mini,
  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-system-summary-pill {
    opacity: 0;
    transform: translateY(6px);
  }

  .pg-chart-reveal.pg-chart-visible .pg-overview-system-mini,
  .pg-chart-reveal.pg-chart-visible .pg-overview-system-summary-pill {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 520ms ease 260ms, transform 640ms cubic-bezier(0.16, 1, 0.3, 1) 260ms;
  }

  .pg-chart-reveal.pg-chart-visible .pg-overview-system-mini:hover,
  .pg-chart-reveal.pg-chart-visible .pg-overview-system-mini:focus-visible {
    transform: translateY(-1px);
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-line-area {
    opacity: 0;
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-line-dot {
    opacity: 0;
    transform: scale(0.72);
  }

  .pg-chart-reveal.pg-chart-pending:not(.pg-chart-visible) .pg-overview-bar-item span {
    transform: scaleY(0);
  }

  .pg-chart-reveal.pg-chart-visible .pg-overview-bar-item span {
    transform: scaleY(1);
    transition-delay: calc(var(--pg-bar-index, 0) * var(--pg-reveal-stagger));
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-chart-reveal,
    .pg-chart-reveal *,
    .pg-chart-reveal::before,
    .pg-chart-reveal::after {
      animation: none !important;
      transition: none !important;
    }

    .pg-chart-reveal .pg-overview-line-area,
    .pg-chart-reveal .pg-overview-line-dot,
    .pg-chart-reveal .pg-overview-segment-meter span,
    .pg-chart-reveal .pg-overview-system-mini,
    .pg-chart-reveal .pg-overview-system-summary-pill {
      opacity: 1 !important;
      transform: none !important;
    }

    .pg-chart-reveal .pg-overview-bar-item span {
      transform: scaleY(1) !important;
    }

    .pg-chart-reveal .pg-overview-line-path {
      stroke-dasharray: none !important;
      stroke-dashoffset: 0 !important;
    }
  }

  .pg-overview-hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  .pg-overview-hero-stats div {
    padding: 13px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.28);
  }

  .pg-overview-hero-stats strong {
    display: block;
    margin-top: 6px;
    color: #e0faff;
    font-size: 18px;
    font-weight: 850;
  }

  .pg-overview-side-stack,
  .pg-overview-left-column,
  .pg-overview-right-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .pg-overview-side-card,
  .pg-overview-activity-card {
    padding: 20px;
  }

  .pg-overview-side-stack .pg-overview-side-card {
    flex: 1 1 0;
  }

  .pg-overview-side-stack.has-tickets .pg-overview-side-card {
    min-height: 0;
  }

  .pg-overview-side-stack.has-no-tickets .pg-overview-side-card {
    flex-basis: calc(50% - 9px);
    min-height: 150px;
  }

  .pg-overview-side-value {
    margin-top: 14px;
    color: #f8fbff;
    font-size: 26px;
    font-weight: 850;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .pg-overview-side-value + .pg-overview-muted {
    margin-top: 8px;
  }

  .pg-overview-stat-grid-v2 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
  }

  .pg-overview-stat-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 178px;
    padding: 17px;
  }

  .pg-overview-stat-card:hover {
    transform: none;
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow:
      0 28px 60px -44px rgba(34, 211, 238, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-overview-stat-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 13px;
    background: rgba(14, 165, 233, 0.12);
    font-size: 19px;
  }

  .pg-overview-stat-top {
    min-height: 38px;
  }

  .pg-overview-stat-label {
    margin-top: 18px;
  }

  .pg-overview-stat-value {
    margin-top: 6px;
    color: #f8fbff;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .pg-overview-stat-value + .pg-overview-muted {
    margin-top: auto;
    padding-top: 12px;
  }

  .pg-overview-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.45fr);
    gap: 20px;
    align-items: start;
  }

  .pg-overview-feed {
    margin-top: 16px;
  }

  .pg-overview-feed .pg-feed-item-guardian {
    background: rgba(2, 6, 23, 0.25);
    border-color: rgba(148, 163, 184, 0.12);
  }

  .pg-overview-analytics-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
  }

  .pg-overview-analytics-grid-v2 .pg-overview-side-card {
    min-height: 280px;
  }

  .pg-overview-analytics-grid-v2 .pg-overview-card-head {
    gap: 16px;
  }

  .pg-overview-analytics-grid-v2 .pg-overview-card-head p {
    line-height: 1.55;
  }

  .pg-overview-analytics-grid-v2 .pg-overview-card-metric span {
    line-height: 1.25;
  }

  .pg-overview-protection-list .pg-system-guardian {
    padding: 14px;
    border-radius: 15px;
    background: rgba(2, 6, 23, 0.28);
    border-color: rgba(125, 211, 252, 0.11);
  }

  .pg-snapshot-grid-v2 {
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  .pg-overview-snapshot-card .pg-snapshot-grid-v2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .pg-overview-snapshot-card .pg-snapshot-item {
    display: flex;
    min-height: 132px;
    flex-direction: column;
  }

  .pg-overview-snapshot-card .pg-snapshot-item p {
    margin-top: auto;
    padding-top: 10px;
  }

  .pg-overview-pulse-card {
    position: relative;
    overflow: hidden;
  }

  .pg-overview-pulse-card::before {
    content: "";
    position: absolute;
    inset: -35% -20% auto auto;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 62%);
    pointer-events: none;
  }

  .pg-overview-pulse-orb,
  .pg-overview-pulse-dot {
    border-radius: 999px;
    background: #34d399;
    box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.1), 0 0 22px rgba(52, 211, 153, 0.38);
  }

  .pg-overview-pulse-orb {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }

  .pg-overview-pulse-status {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(45, 212, 191, 0.16);
    border-radius: 16px;
    background: rgba(13, 148, 136, 0.1);
  }

  .pg-overview-pulse-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }

  .pg-overview-pulse-status strong {
    color: #ecfeff;
    font-size: 18px;
    font-weight: 900;
  }

  .pg-overview-pulse-status p {
    margin-top: 3px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 12px;
    line-height: 1.4;
  }

  .pg-overview-pulse-metrics {
    position: relative;
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }

  .pg-overview-pulse-metrics div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid rgba(125, 211, 252, 0.1);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.24);
  }

  .pg-overview-pulse-metrics span,
  .pg-overview-pulse-next span {
    color: rgba(148, 163, 184, 0.88);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .pg-overview-pulse-metrics strong {
    color: #e0faff;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
  }

  .pg-overview-pulse-next {
    position: relative;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(96, 165, 250, 0.14);
    border-radius: 14px;
    background: rgba(59, 130, 246, 0.08);
  }

  .pg-overview-pulse-next p {
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 13px;
    line-height: 1.45;
  }

  .pg-quick-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
  }

  .pg-quick-grid-v2 .pg-quick-item {
    text-decoration: none;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(240px, 1fr) minmax(250px, 0.72fr) auto;
    grid-template-areas: "main insights controls";
    align-items: center;
    gap: 12px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    min-width: 0;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-main,
  .pg-guardian-center-v2-page .pg-dashboard-header-text {
    gap: 6px;
  }

  .pg-guardian-center-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-guardian-center-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-center-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-center-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    border-radius: 12px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-center-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px;
  }

  .pg-guardian-center-v2-page .pg-server-switcher-trigger {
    padding-block: 3px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-toolbar {
    min-height: 0;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-toolbar-items {
    flex: 0 1 auto;
    width: auto;
    gap: 8px;
  }

  .pg-guardian-center-v2-page .pg-dashboard-toolbar-items .pg-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 12px;
  }

  .pg-guardian-center-v2.pg-guardian-center-content {
    width: 100%;
    max-width: min(100%, 1560px);
    margin-inline: 0 auto;
    gap: 20px;
    padding: 0 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  .pg-guardian-center-v2,
  .pg-guardian-center-v2 * {
    min-width: 0;
  }

  .pg-guardian-status-grid-v2,
  .pg-guardian-module-grid {
    display: grid;
    gap: 18px;
  }

  .pg-guardian-status-grid-v2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pg-guardian-status-card-v2,
  .pg-guardian-module-card {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform: translateZ(0);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 29, 0.76);
    box-shadow:
      0 26px 54px -42px rgba(2, 6, 23, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition:
      transform 0.24s ease,
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }

  .pg-guardian-status-card-v2 {
    min-height: 132px;
    padding: 18px;
  }

  .pg-guardian-status-card-v2::before,
  .pg-guardian-module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.16), transparent 34%),
      linear-gradient(135deg, rgba(14, 165, 233, 0.08), transparent 54%);
    opacity: 0.72;
  }

  .pg-guardian-status-card-v2:hover,
  .pg-guardian-module-card:hover {
    transform: translateY(-2px) translateZ(0);
    border-color: rgba(34, 211, 238, 0.24);
    box-shadow:
      0 32px 68px -48px rgba(34, 211, 238, 0.45),
      0 20px 54px -44px rgba(2, 6, 23, 0.96),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

  .pg-guardian-status-card-v2 > *,
  .pg-guardian-module-card > * {
    position: relative;
    z-index: 1;
  }

  .pg-guardian-center-page .pg-hover-lift {
    box-sizing: border-box;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .pg-guardian-center-page .pg-hover-lift:hover {
    transform: translateY(-2px) translateZ(0);
  }

  .pg-guardian-status-card-v2 span {
    display: block;
    color: rgba(148, 163, 184, 0.92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
  }

  .pg-guardian-status-card-v2 strong {
    display: block;
    margin-top: 12px;
    color: #f8fbff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .pg-guardian-status-card-v2 small {
    display: block;
    margin-top: 9px;
    color: rgba(203, 213, 225, 0.68);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
  }

  .pg-guardian-module-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pg-guardian-module-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 278px;
    padding: 22px;
  }

  .pg-guardian-module-card-primary {
    grid-column: span 3;
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 36%),
      linear-gradient(135deg, rgba(6, 16, 33, 0.98), rgba(8, 25, 49, 0.94) 48%, rgba(2, 8, 23, 0.98));
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow:
      0 30px 78px -48px rgba(34, 211, 238, 0.58),
      0 18px 52px -40px rgba(2, 6, 23, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-guardian-center-page .pg-guardian-module-card,
  .pg-guardian-center-page .pg-guardian-module-card-primary {
    grid-column: span 2;
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 36%),
      linear-gradient(135deg, rgba(6, 16, 33, 0.98), rgba(8, 25, 49, 0.94) 48%, rgba(2, 8, 23, 0.98));
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow:
      0 30px 78px -48px rgba(34, 211, 238, 0.58),
      0 18px 52px -40px rgba(2, 6, 23, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-guardian-center-page .pg-guardian-module-card::before {
    opacity: 0.78;
  }

  .pg-guardian-center-page .pg-guardian-module-card-integrity {
    grid-column: span 4;
  }

  .pg-guardian-center-page .pg-guardian-module-card-cases {
    background:
      radial-gradient(circle at 82% 18%, rgba(129, 140, 248, 0.2), transparent 36%),
      linear-gradient(135deg, rgba(8, 13, 32, 0.98), rgba(21, 24, 58, 0.94) 48%, rgba(2, 8, 23, 0.98));
    border-color: rgba(129, 140, 248, 0.24);
    box-shadow:
      0 30px 78px -50px rgba(129, 140, 248, 0.52),
      0 18px 52px -40px rgba(2, 6, 23, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-guardian-center-page .pg-guardian-module-card-cases::before {
    background: linear-gradient(90deg, transparent, rgba(165, 180, 252, 0.18), transparent);
  }

  .pg-guardian-center-page .pg-guardian-module-card-cases .pg-guardian-module-icon {
    border-color: rgba(165, 180, 252, 0.3);
    background:
      linear-gradient(180deg, rgba(165, 180, 252, 0.16), rgba(99, 102, 241, 0.06)),
      rgba(2, 6, 23, 0.32);
    color: #c4b5fd;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 18px 28px -24px rgba(129, 140, 248, 0.72);
  }

  .pg-guardian-module-head,
  .pg-guardian-module-meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
  }

  .pg-guardian-module-head {
    justify-content: space-between;
  }

  .pg-guardian-module-meta {
    flex-wrap: wrap;
    margin-top: auto;
  }

  .pg-guardian-module-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 15px;
    background:
      linear-gradient(180deg, rgba(125, 211, 252, 0.16), rgba(14, 165, 233, 0.06)),
      rgba(2, 6, 23, 0.32);
    color: #67e8f9;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 18px 28px -24px rgba(34, 211, 238, 0.72);
  }

  .pg-guardian-module-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .pg-guardian-module-copy h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .pg-guardian-module-copy p {
    margin: 10px 0 0;
    max-width: 62ch;
    color: rgba(203, 213, 225, 0.7);
    font-size: 13px;
    line-height: 1.55;
  }

  .pg-guardian-module-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    gap: 7px;
    min-height: 28px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #a5f3fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pg-guardian-module-badge.is-good {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(13, 148, 136, 0.14);
    color: #ccfbf1;
  }

  .pg-guardian-module-badge.is-blue {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(14, 165, 233, 0.14);
    color: #bae6fd;
  }

  .pg-guardian-module-badge.is-review {
    border-color: rgba(165, 180, 252, 0.3);
    background: rgba(79, 70, 229, 0.16);
    color: #c7d2fe;
  }

  .pg-guardian-module-badge.is-soft {
    border-color: rgba(147, 197, 253, 0.18);
    background: rgba(59, 130, 246, 0.1);
    color: #bfdbfe;
  }

  .pg-guardian-module-badge.is-warn {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
  }

  .pg-guardian-module-badge.is-danger {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
  }

  .pg-guardian-module-action {
    width: fit-content;
    margin-top: 2px;
  }

  @media (max-width: 1180px) and (min-width: 981px) {
    .pg-guardian-center-v2-page .pg-dashboard-header-body {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "main controls"
        "insights insights";
    }

    .pg-guardian-center-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) {
    .pg-guardian-status-grid-v2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-guardian-module-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-guardian-module-card,
    .pg-guardian-module-card-primary {
      grid-column: span 1;
    }

    .pg-guardian-center-page .pg-guardian-module-card,
    .pg-guardian-center-page .pg-guardian-module-card-primary,
    .pg-guardian-center-page .pg-guardian-module-card-integrity {
      grid-column: span 1;
    }
  }

  @media (max-width: 720px) {
    .pg-guardian-center-v2.pg-guardian-center-content {
      gap: 14px;
    }

    .pg-guardian-status-grid-v2,
    .pg-guardian-module-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .pg-guardian-status-card-v2,
    .pg-guardian-module-card {
      border-radius: 18px;
      padding: 16px;
    }

    .pg-guardian-module-copy h2 {
      font-size: 21px;
    }
  }

  .pg-auto-shield-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(240px, 1fr) minmax(250px, 0.72fr) auto;
    grid-template-areas: "main insights controls";
    align-items: center;
    gap: 12px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    min-width: 0;
  }

  .pg-auto-shield-v2-page .pg-dashboard-mini-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 7px 10px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-mini-stat span,
  .pg-auto-shield-v2-page .pg-dashboard-mini-stat strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .pg-auto-shield-v2-page .pg-dashboard-mini-stat strong {
    flex: 0 1 auto;
    line-height: 1.12;
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-main,
  .pg-auto-shield-v2-page .pg-dashboard-header-text {
    gap: 6px;
  }

  .pg-auto-shield-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-auto-shield-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-auto-shield-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-auto-shield-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    border-radius: 12px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-auto-shield-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px;
  }

  .pg-auto-shield-v2-page .pg-server-switcher-trigger {
    padding-block: 3px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-toolbar {
    min-height: 0;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-toolbar-items {
    flex: 0 1 auto;
    width: auto;
    gap: 8px;
  }

  .pg-auto-shield-v2-page .pg-dashboard-toolbar-items .pg-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 12px;
  }

  .pg-auto-shield-v2.pg-shield-content {
    width: 100%;
    max-width: min(100%, 1560px);
    margin-inline: 0 auto;
    gap: 18px;
    padding: 0 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  .pg-auto-shield-v2,
  .pg-auto-shield-v2 * {
    min-width: 0;
  }

  .pg-auto-shield-v2 .pg-shield-section {
    gap: 16px;
    scroll-margin-top: 5.5rem;
  }

  .pg-auto-shield-v2 .pg-shield-panel,
  .pg-auto-shield-v2 .pg-shield-card,
  .pg-auto-shield-v2 .pg-shield-form,
  .pg-auto-shield-v2 .pg-shield-detail-panel,
  .pg-auto-shield-v2 .pg-shield-event-card,
  .pg-auto-shield-v2 .pg-shield-collapse {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 29, 0.76);
    box-shadow:
      0 26px 54px -42px rgba(2, 6, 23, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .pg-auto-shield-v2 .pg-shield-card,
  .pg-auto-shield-v2 .pg-shield-detail-panel,
  .pg-auto-shield-v2 .pg-shield-event-card {
    padding: 16px;
  }

  .pg-auto-shield-v2 .pg-shield-panel,
  .pg-auto-shield-v2 .pg-shield-form {
    padding: 18px;
  }

  .pg-auto-shield-v2 .pg-shield-panel,
  .pg-auto-shield-v2 .pg-shield-card,
  .pg-auto-shield-v2 .pg-shield-form,
  .pg-auto-shield-v2 .pg-shield-detail-panel {
    align-self: start;
  }

  .pg-auto-shield-v2 .pg-shield-card::before,
  .pg-auto-shield-v2 .pg-shield-panel::before,
  .pg-auto-shield-v2 .pg-shield-event-card::before,
  .pg-auto-shield-v2 .pg-shield-collapse::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.13), transparent 34%),
      linear-gradient(135deg, rgba(14, 165, 233, 0.07), transparent 54%);
    opacity: 0.72;
  }

  .pg-auto-shield-v2 .pg-shield-card > *,
  .pg-auto-shield-v2 .pg-shield-panel > *,
  .pg-auto-shield-v2 .pg-shield-form > *,
  .pg-auto-shield-v2 .pg-shield-detail-panel > *,
  .pg-auto-shield-v2 .pg-shield-event-card > *,
  .pg-auto-shield-v2 .pg-shield-collapse > * {
    position: relative;
    z-index: 1;
  }

  .pg-auto-shield-v2 .pg-shield-card:hover,
  .pg-auto-shield-v2 .pg-shield-event-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.24);
    box-shadow:
      0 32px 68px -48px rgba(34, 211, 238, 0.45),
      0 20px 54px -44px rgba(2, 6, 23, 0.96),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

  .pg-auto-shield-v2 .pg-shield-card,
  .pg-auto-shield-v2 .pg-shield-event-card {
    transition:
      transform 0.24s ease,
      border-color 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease;
  }

  .pg-auto-shield-v2 .pg-auto-shield-hero {
    min-height: 300px;
    padding: 26px;
    border-color: rgba(34, 211, 238, 0.2);
    background:
      radial-gradient(circle at 82% 18%, rgba(34, 211, 238, 0.22), transparent 36%),
      linear-gradient(135deg, rgba(6, 16, 33, 0.98), rgba(8, 25, 49, 0.94) 48%, rgba(2, 8, 23, 0.98));
    box-shadow:
      0 30px 78px -48px rgba(34, 211, 238, 0.58),
      0 18px 52px -40px rgba(2, 6, 23, 1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-auto-shield-v2 .pg-auto-shield-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px),
      linear-gradient(180deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.22;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 78%);
  }

  .pg-auto-shield-v2 .pg-shield-title-xl {
    max-width: 760px;
    margin-top: 14px;
    color: #f8fbff;
    font-size: clamp(2rem, 1.45rem + 1.5vw, 3rem);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: 0;
  }

  .pg-auto-shield-v2 .pg-shield-title {
    color: #f8fbff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .pg-auto-shield-v2 .pg-shield-title-sm {
    color: #f8fbff;
    font-size: 15px;
    font-weight: 850;
  }

  .pg-auto-shield-v2 .pg-shield-helper {
    max-width: 78ch;
    color: rgba(203, 213, 225, 0.7);
    font-size: 13px;
    line-height: 1.55;
  }

  .pg-auto-shield-v2 .pg-shield-helper-xs {
    color: rgba(148, 163, 184, 0.86);
    font-size: 12px;
    line-height: 1.45;
  }

  .pg-auto-shield-v2 .pg-shield-label {
    color: rgba(148, 163, 184, 0.92);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .pg-auto-shield-v2 .pg-shield-value {
    color: #f8fbff;
    font-size: 26px;
    line-height: 1.06;
    font-weight: 900;
  }

  .pg-auto-shield-v2 .pg-shield-pill {
    min-height: 28px;
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(14, 165, 233, 0.12);
    color: #a5f3fc;
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    flex: 0 1 auto;
  }

  .pg-auto-shield-v2 .pg-shield-risk-low {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(13, 148, 136, 0.14);
    color: #ccfbf1;
  }

  .pg-auto-shield-v2 .pg-shield-risk-medium {
    border-color: rgba(251, 191, 36, 0.3);
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
  }

  .pg-auto-shield-v2 .pg-shield-risk-high {
    border-color: rgba(251, 146, 60, 0.32);
    background: rgba(249, 115, 22, 0.12);
    color: #fed7aa;
  }

  .pg-auto-shield-v2 .pg-shield-risk-critical {
    border-color: rgba(248, 113, 113, 0.34);
    background: rgba(239, 68, 68, 0.13);
    color: #fecaca;
  }

  .pg-auto-shield-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
  }

  .pg-auto-shield-hero-metrics div {
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.28);
  }

  .pg-auto-shield-hero-metrics span {
    display: block;
    color: rgba(148, 163, 184, 0.92);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .pg-auto-shield-hero-metrics strong {
    display: block;
    margin-top: 8px;
    color: #e0faff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.14;
    overflow-wrap: anywhere;
  }

  .pg-auto-shield-v2 .pg-shield-grid,
  .pg-auto-shield-v2 .pg-shield-grid-2,
  .pg-auto-shield-v2 .pg-shield-grid-3,
  .pg-auto-shield-v2 .pg-shield-grid-4,
  .pg-auto-shield-v2 .pg-shield-mini-grid {
    align-items: start;
    gap: 14px;
  }

  .pg-auto-shield-v2 .pg-shield-grid-4 > .pg-shield-card,
  .pg-auto-shield-v2 .pg-shield-grid-4 > a.pg-shield-card {
    min-height: 132px;
  }

  .pg-auto-shield-v2 .pg-shield-row,
  .pg-auto-shield-v2 .pg-shield-actions,
  .pg-auto-shield-v2 .pg-shield-event-meta {
    flex-wrap: wrap;
  }

  .pg-auto-shield-v2 .pg-shield-section-nav {
    position: sticky;
    top: 12px;
    z-index: 30;
    padding: 8px;
    border-color: rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(9, 14, 26, 0.82));
    box-shadow:
      0 20px 42px -36px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .pg-auto-shield-v2 .pg-shield-section-link {
    min-height: 32px;
    border-color: rgba(34, 211, 238, 0.14);
    background: rgba(14, 165, 233, 0.08);
    color: rgba(191, 219, 254, 0.86);
    padding: 7px 11px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .pg-auto-shield-v2 .pg-shield-section-link:hover,
  .pg-auto-shield-v2 .pg-shield-section-link:focus-visible {
    border-color: rgba(34, 211, 238, 0.36);
    background: rgba(14, 165, 233, 0.14);
    color: #f8fbff;
  }

  .pg-auto-shield-v2 .pg-shield-input {
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(2, 6, 23, 0.44);
    color: #f8fbff;
  }

  .pg-auto-shield-v2 .pg-shield-input:focus {
    border-color: rgba(34, 211, 238, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
  }

  .pg-auto-shield-v2 .pg-shield-textarea {
    min-height: 10rem;
  }

  .pg-auto-shield-v2 .pg-shield-reason-row {
    border-color: rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.26);
  }

  .pg-auto-shield-v2 .pg-shield-table-wrap {
    border-color: rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background: rgba(2, 6, 23, 0.34);
  }

  .pg-auto-shield-v2 .pg-shield-table thead {
    background: rgba(15, 23, 42, 0.72);
    color: rgba(203, 213, 225, 0.82);
  }

  .pg-auto-shield-v2 .pg-shield-table tbody tr {
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  .pg-auto-shield-v2 .pg-shield-empty {
    align-self: start;
    min-height: 0;
    border-color: rgba(125, 211, 252, 0.14);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.26);
    color: rgba(203, 213, 225, 0.7);
    padding: 14px 16px;
    line-height: 1.45;
  }

  .pg-auto-shield-v2 .pg-shield-empty-title {
    margin-bottom: 4px;
    color: #f8fbff;
  }

  .pg-auto-shield-v2 .pg-shield-collapse > summary {
    padding: 16px 18px;
  }

  .pg-auto-shield-v2 .pg-shield-collapse-body {
    border-top-color: rgba(148, 163, 184, 0.12);
    gap: 16px;
    padding: 16px;
  }

  .pg-auto-shield-v2 .pg-shield-event-details {
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  .pg-auto-shield-v2 .pg-shield-event-details summary {
    min-height: 32px;
    border-color: rgba(34, 211, 238, 0.16);
    background: rgba(14, 165, 233, 0.1);
    padding: 7px 11px;
    font-size: 12px;
  }

  @media (max-width: 1180px) and (min-width: 981px) {
    .pg-auto-shield-v2-page .pg-dashboard-header-body {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "main controls"
        "insights insights";
    }

    .pg-auto-shield-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) {
    .pg-auto-shield-hero-metrics,
    .pg-auto-shield-v2 .pg-shield-grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .pg-auto-shield-v2.pg-shield-content {
      gap: 14px;
    }

    .pg-auto-shield-v2 .pg-auto-shield-hero,
    .pg-auto-shield-v2 .pg-shield-panel,
    .pg-auto-shield-v2 .pg-shield-card,
    .pg-auto-shield-v2 .pg-shield-form,
    .pg-auto-shield-v2 .pg-shield-detail-panel,
    .pg-auto-shield-v2 .pg-shield-event-card,
    .pg-auto-shield-v2 .pg-shield-collapse-body {
      border-radius: 18px;
      padding: 16px;
    }

    .pg-auto-shield-hero-metrics,
    .pg-auto-shield-v2 .pg-shield-grid-2,
    .pg-auto-shield-v2 .pg-shield-grid-3,
    .pg-auto-shield-v2 .pg-shield-grid-4,
    .pg-auto-shield-v2 .pg-shield-mini-grid {
      grid-template-columns: 1fr;
    }

    .pg-auto-shield-v2 .pg-shield-title-xl {
      font-size: 2rem;
    }
  }

  .pg-ticket-system-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main controls"
      "insights insights";
    align-items: center;
    gap: 12px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .pg-ticket-system-v2-page .pg-dashboard-mini-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 7px 9px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-mini-stat span,
  .pg-ticket-system-v2-page .pg-dashboard-mini-stat strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .pg-ticket-system-v2-page .pg-dashboard-mini-stat strong {
    flex: 0 1 auto;
    line-height: 1.12;
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-main,
  .pg-ticket-system-v2-page .pg-dashboard-header-text {
    gap: 6px;
  }

  .pg-ticket-system-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-ticket-system-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-ticket-system-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-ticket-system-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    border-radius: 12px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-ticket-system-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px;
  }

  .pg-ticket-system-v2-page .pg-server-switcher-trigger {
    padding-block: 3px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-toolbar {
    min-height: 0;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-toolbar-items {
    flex: 0 1 auto;
    width: auto;
    gap: 8px;
  }

  .pg-ticket-system-v2-page .pg-dashboard-toolbar-items .pg-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 12px;
  }

  .pg-ticket-system-v2.pg-ticket-system-content {
    width: 100%;
    max-width: min(100%, 1560px);
    margin-inline: 0 auto;
    gap: 18px;
    padding: 0 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  .pg-ticket-system-v2,
  .pg-ticket-system-v2 * {
    min-width: 0;
  }

  .pg-ticket-system-v2 .pg-ticket-system-form {
    align-items: stretch;
    gap: 18px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-section {
    position: relative;
    overflow: hidden;
    gap: 16px;
    align-self: stretch;
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 29, 0.76);
    box-shadow:
      0 26px 54px -42px rgba(2, 6, 23, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    padding: 18px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-section::before,
  .pg-ticket-system-v2 .pg-ticket-type-card::before,
  .pg-ticket-system-v2 .pg-ticket-system-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 84% 18%, rgba(34, 211, 238, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(14, 165, 233, 0.06), transparent 54%);
    opacity: 0.72;
  }

  .pg-ticket-system-v2 .pg-ticket-system-section > *,
  .pg-ticket-system-v2 .pg-ticket-type-card > *,
  .pg-ticket-system-v2 .pg-ticket-system-toggle > * {
    position: relative;
    z-index: 1;
  }

  .pg-ticket-system-v2 .pg-ticket-system-summary-grid,
  .pg-ticket-system-v2 .pg-ticket-system-grid-2,
  .pg-ticket-system-v2 .pg-ticket-system-grid-3,
  .pg-ticket-system-v2 .pg-ticket-system-grid-4,
  .pg-ticket-system-v2 .pg-ticket-system-grid-5 {
    width: 100%;
    align-items: start;
    gap: 14px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-form > .pg-ticket-system-section:first-of-type .pg-ticket-system-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-ticket-system-v2 #pgTicketPanelList,
  .pg-ticket-system-v2 #pgTicketTypeList {
    width: 100%;
  }

  .pg-ticket-system-v2 .pg-ticket-system-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pg-ticket-system-v2 .pg-ticket-system-summary-card {
    min-height: 136px;
    padding: 16px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-toggle,
  .pg-ticket-system-v2 .pg-ticket-system-panel,
  .pg-ticket-system-v2 .pg-ticket-role-option,
  .pg-ticket-system-v2 .pg-ticket-type-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(2, 6, 23, 0.38);
    box-shadow:
      0 18px 38px -34px rgba(2, 6, 23, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .pg-ticket-system-v2 .pg-ticket-system-toggle {
    min-width: 0;
    padding: 14px;
  }

  .pg-ticket-system-v2 .pg-ticket-type-card {
    gap: 14px;
    width: 100%;
    padding: 16px;
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      background 0.22s ease;
  }

  .pg-ticket-system-v2 .pg-ticket-type-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.24);
    box-shadow:
      0 32px 68px -48px rgba(34, 211, 238, 0.42),
      0 20px 54px -44px rgba(2, 6, 23, 0.96),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-ticket-system-v2 .pg-ticket-system-title-lg,
  .pg-ticket-system-v2 .pg-ticket-type-title {
    color: #f8fbff;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .pg-ticket-system-v2 .pg-ticket-system-title {
    color: #f8fbff;
    font-size: 14px;
    font-weight: 850;
  }

  .pg-ticket-system-v2 .pg-ticket-system-kicker,
  .pg-ticket-system-v2 .pg-ticket-system-label {
    color: rgba(148, 163, 184, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pg-ticket-system-v2 .pg-ticket-system-label {
    margin-bottom: 6px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-copy {
    color: rgba(203, 213, 225, 0.72);
    font-size: 13px;
    line-height: 1.5;
  }

  .pg-ticket-system-v2 .pg-ticket-system-help {
    color: rgba(148, 163, 184, 0.82);
    font-size: 12px;
    line-height: 1.45;
  }

  .pg-ticket-system-v2 .pg-ticket-system-value {
    color: #e0faff;
    font-size: 28px;
    line-height: 1.06;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .pg-ticket-system-v2 .pg-ticket-system-input,
  .pg-ticket-system-v2 .pg-ticket-system-select,
  .pg-ticket-system-v2 .pg-ticket-system-textarea {
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(2, 6, 23, 0.44);
    color: #f8fbff;
    padding: 10px 12px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-input:focus,
  .pg-ticket-system-v2 .pg-ticket-system-select:focus,
  .pg-ticket-system-v2 .pg-ticket-system-textarea:focus {
    border-color: rgba(34, 211, 238, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
    outline: none;
  }

  .pg-ticket-system-v2 .pg-ticket-system-textarea {
    min-height: 96px;
    resize: vertical;
  }

  .pg-ticket-system-v2 .pg-ticket-role-grid,
  .pg-ticket-system-v2 .pg-ticket-panel-type-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
  }

  .pg-ticket-system-v2 .pg-ticket-role-option {
    min-height: 38px;
    gap: 8px;
    padding: 8px 10px;
    color: rgba(226, 232, 240, 0.92);
    font-size: 13px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-role-inputs {
    display: none;
  }

  .pg-ticket-system-v2 .pg-ticket-support-roles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 16px;
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.1), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.36);
    padding: 14px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-roles-head,
  .pg-ticket-system-v2 .pg-ticket-support-roles-actions,
  .pg-ticket-system-v2 .pg-ticket-support-role-chips,
  .pg-ticket-system-v2 .pg-ticket-role-filters,
  .pg-ticket-system-v2 .pg-ticket-role-row-main,
  .pg-ticket-system-v2 .pg-ticket-role-row-meta,
  .pg-ticket-system-v2 .pg-ticket-role-modal-footer {
    display: flex;
    align-items: center;
  }

  .pg-ticket-system-v2 .pg-ticket-support-roles-head {
    justify-content: space-between;
    gap: 12px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-roles-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-count {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 999px;
    background: rgba(8, 47, 73, 0.38);
    color: #bae6fd;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 850;
  }

  .pg-ticket-system-v2 .pg-ticket-support-manage {
    min-height: 34px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-role-chips {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pg-ticket-system-v2 .pg-ticket-support-role-chip,
  .pg-ticket-system-v2 .pg-ticket-role-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.66);
    color: rgba(226, 232, 240, 0.92);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
  }

  .pg-ticket-system-v2 .pg-ticket-support-empty {
    color: rgba(148, 163, 184, 0.82);
    font-size: 13px;
  }

  .pg-ticket-role-modal[hidden] {
    display: none !important;
  }

  html.pg-modal-open,
  body.pg-modal-open {
    overflow: hidden;
  }

  #pgModalPortal {
    position: relative;
    z-index: 99990;
  }

  .pg-ticket-role-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto;
  }

  .pg-ticket-role-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(14px);
  }

  .pg-ticket-role-modal-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100dvh - 48px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 20px;
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.16), transparent 44%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow:
      0 32px 80px -36px rgba(34, 211, 238, 0.42),
      0 28px 80px rgba(0, 0, 0, 0.56),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .pg-ticket-role-modal-header,
  .pg-ticket-role-modal-tools,
  .pg-ticket-role-modal-footer {
    flex: 0 0 auto;
    padding: 16px;
  }

  .pg-ticket-role-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .pg-ticket-role-modal-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }

  .pg-ticket-role-modal-tools {
    display: grid;
    gap: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  }

  .pg-ticket-role-filters {
    flex-wrap: wrap;
    gap: 8px;
  }

  .pg-ticket-role-filter {
    min-height: 32px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: rgba(203, 213, 225, 0.86);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
  }

  .pg-ticket-role-filter.is-active {
    border-color: rgba(34, 211, 238, 0.46);
    background: rgba(8, 47, 73, 0.58);
    color: #e0faff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
  }

  .pg-ticket-role-modal-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px 16px;
  }

  .pg-ticket-role-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.34);
    color: #e2e8f0;
    padding: 10px 12px;
  }

  .pg-ticket-role-row:hover {
    border-color: rgba(34, 211, 238, 0.3);
    background: rgba(8, 47, 73, 0.24);
  }

  .pg-ticket-role-row input {
    width: 18px;
    height: 18px;
  }

  .pg-ticket-role-row-main,
  .pg-ticket-role-row-meta {
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pg-ticket-role-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #f8fbff;
    font-size: 14px;
    font-weight: 850;
  }

  .pg-ticket-role-position {
    color: rgba(148, 163, 184, 0.82);
    font-size: 12px;
    font-weight: 750;
  }

  .pg-ticket-role-badge.is-selected {
    border-color: rgba(34, 211, 238, 0.34);
    background: rgba(8, 47, 73, 0.48);
    color: #bae6fd;
  }

  .pg-ticket-role-badge.is-admin {
    border-color: rgba(251, 191, 36, 0.38);
    background: rgba(120, 53, 15, 0.34);
    color: #fde68a;
  }

  .pg-ticket-role-badge.is-manageable {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(20, 83, 45, 0.24);
    color: #bbf7d0;
  }

  .pg-ticket-role-empty {
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    color: rgba(148, 163, 184, 0.9);
    padding: 18px;
    text-align: center;
    font-size: 13px;
  }

  .pg-ticket-role-modal-footer {
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.3);
  }

  body.pg-ticket-role-modal-open {
    overflow: hidden;
  }

  .pg-ticket-system-v2 .pg-ticket-system-field-error {
    color: #fecaca;
    font-weight: 800;
  }

  .pg-ticket-system-v2 .pg-ticket-system-invalid {
    border-color: rgba(248, 113, 113, 0.82) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16);
  }

  .pg-ticket-system-v2 .pg-ticket-system-card-invalid {
    border-color: rgba(248, 113, 113, 0.58) !important;
    box-shadow:
      inset 0 0 0 1px rgba(248, 113, 113, 0.2),
      0 22px 52px -44px rgba(248, 113, 113, 0.52);
  }

  .pg-ticket-system-v2 .pg-ticket-system-alert {
    border-color: rgba(125, 211, 252, 0.18);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(2, 6, 23, 0.58);
    color: rgba(226, 232, 240, 0.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .pg-ticket-system-v2 .pg-ticket-system-alert-error {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(127, 29, 29, 0.26);
  }

  .pg-ticket-system-v2 .pg-ticket-system-alert-warning {
    border-color: rgba(251, 191, 36, 0.44);
    background: rgba(120, 53, 15, 0.22);
  }

  .pg-ticket-system-v2 .pg-ticket-system-alert-success {
    border-color: rgba(45, 212, 191, 0.34);
    background: rgba(13, 148, 136, 0.16);
  }

  .pg-ticket-system-v2 .pg-ticket-system-actions {
    align-items: center;
    gap: 10px;
  }

  .pg-ticket-system-v2 .pg-ticket-system-actions > .pg-btn {
    min-height: 38px;
    border-radius: 13px;
  }

  @media (max-width: 1320px) {
    .pg-ticket-system-v2 .pg-ticket-system-summary-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pg-ticket-system-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) and (min-width: 981px) {
    .pg-ticket-system-v2-page .pg-dashboard-header-body {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "main controls"
        "insights insights";
    }

    .pg-ticket-system-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) {
    .pg-ticket-system-v2 .pg-ticket-system-grid-4,
    .pg-ticket-system-v2 .pg-ticket-system-grid-5 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 720px) {
    .pg-ticket-system-v2.pg-ticket-system-content {
      gap: 14px;
    }

    .pg-ticket-system-v2 .pg-ticket-system-section,
    .pg-ticket-system-v2 .pg-ticket-type-card,
    .pg-ticket-system-v2 .pg-ticket-system-toggle {
      border-radius: 18px;
      padding: 16px;
    }

    .pg-ticket-system-v2 .pg-ticket-system-summary-grid,
    .pg-ticket-system-v2 .pg-ticket-system-grid-2,
    .pg-ticket-system-v2 .pg-ticket-system-grid-3,
    .pg-ticket-system-v2 .pg-ticket-system-grid-4,
    .pg-ticket-system-v2 .pg-ticket-system-grid-5 {
      grid-template-columns: 1fr;
    }

    .pg-ticket-system-v2 .pg-ticket-system-summary-card {
      min-height: 0;
    }
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.5vw, 22px) !important;
    border-radius: 20px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main controls"
      "insights insights";
    align-items: center;
    gap: 12px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-insights {
    grid-area: insights;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-mini-stat {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 42px;
    padding: 7px 9px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-mini-stat span,
  .pg-guardian-logs-v2-page .pg-dashboard-mini-stat strong {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-mini-stat strong {
    flex: 0 1 auto;
    line-height: 1.12;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-main,
  .pg-guardian-logs-v2-page .pg-dashboard-header-text {
    gap: 6px;
  }

  .pg-guardian-logs-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.48rem, 1.2rem + 0.5vw, 1.68rem);
    line-height: 1.06;
  }

  .pg-guardian-logs-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%);
    font-size: 13px;
    line-height: 1.42;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-controls {
    align-self: center;
    gap: 8px;
    max-width: min(100%, 31rem);
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-logs-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-logs-v2-page .pg-server-switcher-trigger {
    min-height: 34px;
    border-radius: 12px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-logs-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px;
  }

  .pg-guardian-logs-v2-page .pg-server-switcher-trigger {
    padding-block: 3px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-toolbar {
    min-height: 0;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items {
    flex: 0 1 auto;
    width: auto;
    gap: 8px;
  }

  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items .pg-btn {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 12px;
  }

  .pg-dashboard-overview-page .pg-dashboard-header,
  .pg-guardian-center-v2-page .pg-dashboard-header,
  .pg-auto-shield-v2-page .pg-dashboard-header,
  .pg-ticket-system-v2-page .pg-dashboard-header,
  .pg-guardian-logs-v2-page .pg-dashboard-header,
  .pg-guardian-page .pg-dashboard-header,
  .pg-cases-page .pg-dashboard-header,
  .pg-rc-page .pg-dashboard-header,
  .pg-am-page .pg-dashboard-header,
  .pg-premium-page .pg-dashboard-header,
  .pg-settings-v2-page .pg-dashboard-header {
    padding: clamp(16px, 1.25vw, 22px) !important;
    border-radius: 20px !important;
    min-height: 0 !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-body,
  .pg-guardian-center-v2-page .pg-dashboard-header-body,
  .pg-auto-shield-v2-page .pg-dashboard-header-body,
  .pg-ticket-system-v2-page .pg-dashboard-header-body,
  .pg-guardian-logs-v2-page .pg-dashboard-header-body,
  .pg-guardian-page .pg-dashboard-header-body,
  .pg-cases-page .pg-dashboard-header-body,
  .pg-rc-page .pg-dashboard-header-body,
  .pg-am-page .pg-dashboard-header-body,
  .pg-premium-page .pg-dashboard-header-body,
  .pg-settings-v2-page .pg-dashboard-header-body {
    gap: 12px !important;
    min-height: 0 !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-main,
  .pg-dashboard-overview-page .pg-dashboard-header-text,
  .pg-guardian-center-v2-page .pg-dashboard-header-main,
  .pg-guardian-center-v2-page .pg-dashboard-header-text,
  .pg-auto-shield-v2-page .pg-dashboard-header-main,
  .pg-auto-shield-v2-page .pg-dashboard-header-text,
  .pg-ticket-system-v2-page .pg-dashboard-header-main,
  .pg-ticket-system-v2-page .pg-dashboard-header-text,
  .pg-guardian-logs-v2-page .pg-dashboard-header-main,
  .pg-guardian-logs-v2-page .pg-dashboard-header-text,
  .pg-guardian-page .pg-dashboard-header-main,
  .pg-guardian-page .pg-dashboard-header-text,
  .pg-cases-page .pg-dashboard-header-main,
  .pg-cases-page .pg-dashboard-header-text,
  .pg-rc-page .pg-dashboard-header-main,
  .pg-rc-page .pg-dashboard-header-text,
  .pg-am-page .pg-dashboard-header-main,
  .pg-am-page .pg-dashboard-header-text,
  .pg-premium-page .pg-dashboard-header-main,
  .pg-premium-page .pg-dashboard-header-text,
  .pg-settings-v2-page .pg-dashboard-header-main,
  .pg-settings-v2-page .pg-dashboard-header-text {
    gap: 6px !important;
  }

  .pg-dashboard-overview-page .pg-page-hero .pg-dashboard-title,
  .pg-guardian-center-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-auto-shield-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-ticket-system-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-guardian-logs-v2-page .pg-page-hero .pg-dashboard-title,
  .pg-guardian-page .pg-page-hero .pg-dashboard-title,
  .pg-cases-page .pg-page-hero .pg-dashboard-title,
  .pg-rc-page .pg-page-hero .pg-dashboard-title,
  .pg-am-page .pg-page-hero .pg-dashboard-title,
  .pg-premium-page .pg-page-hero .pg-dashboard-title,
  .pg-settings-v2-page .pg-page-hero .pg-dashboard-title {
    font-size: clamp(1.45rem, 1.18rem + 0.48vw, 1.66rem) !important;
    line-height: 1.06 !important;
  }

  .pg-dashboard-overview-page .pg-page-hero .pg-dashboard-description,
  .pg-guardian-center-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-auto-shield-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-ticket-system-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-guardian-logs-v2-page .pg-page-hero .pg-dashboard-description,
  .pg-guardian-page .pg-page-hero .pg-dashboard-description,
  .pg-cases-page .pg-page-hero .pg-dashboard-description,
  .pg-rc-page .pg-page-hero .pg-dashboard-description,
  .pg-am-page .pg-page-hero .pg-dashboard-description,
  .pg-premium-page .pg-page-hero .pg-dashboard-description,
  .pg-settings-v2-page .pg-page-hero .pg-dashboard-description {
    max-width: min(62ch, 100%) !important;
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-controls,
  .pg-guardian-center-v2-page .pg-dashboard-header-controls,
  .pg-auto-shield-v2-page .pg-dashboard-header-controls,
  .pg-ticket-system-v2-page .pg-dashboard-header-controls,
  .pg-guardian-logs-v2-page .pg-dashboard-header-controls,
  .pg-guardian-page .pg-dashboard-header-controls,
  .pg-cases-page .pg-dashboard-header-controls,
  .pg-rc-page .pg-dashboard-header-controls,
  .pg-am-page .pg-dashboard-header-controls,
  .pg-premium-page .pg-dashboard-header-controls,
  .pg-settings-v2-page .pg-dashboard-header-controls {
    align-self: center !important;
    gap: 8px !important;
    max-width: min(100%, 31rem) !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-controls .pg-btn,
  .pg-dashboard-overview-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-dashboard-overview-page .pg-server-switcher-trigger,
  .pg-guardian-center-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-center-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-center-v2-page .pg-server-switcher-trigger,
  .pg-auto-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-auto-shield-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-auto-shield-v2-page .pg-server-switcher-trigger,
  .pg-ticket-system-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-ticket-system-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-ticket-system-v2-page .pg-server-switcher-trigger,
  .pg-guardian-logs-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-logs-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-logs-v2-page .pg-server-switcher-trigger,
  .pg-guardian-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-page .pg-server-switcher-trigger,
  .pg-cases-page .pg-dashboard-header-controls .pg-btn,
  .pg-cases-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-cases-page .pg-server-switcher-trigger,
  .pg-rc-page .pg-dashboard-header-controls .pg-btn,
  .pg-rc-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-rc-page .pg-server-switcher-trigger,
  .pg-am-page .pg-dashboard-header-controls .pg-btn,
  .pg-am-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-am-page .pg-server-switcher-trigger,
  .pg-premium-page .pg-dashboard-header-controls .pg-btn,
  .pg-premium-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-premium-page .pg-server-switcher-trigger,
  .pg-settings-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-settings-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-settings-v2-page .pg-server-switcher-trigger {
    min-height: 34px !important;
    border-radius: 12px !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-header-controls .pg-btn,
  .pg-dashboard-overview-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-center-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-center-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-auto-shield-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-auto-shield-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-ticket-system-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-ticket-system-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-logs-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-logs-v2-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-guardian-page .pg-dashboard-header-controls .pg-btn,
  .pg-guardian-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-cases-page .pg-dashboard-header-controls .pg-btn,
  .pg-cases-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-rc-page .pg-dashboard-header-controls .pg-btn,
  .pg-rc-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-am-page .pg-dashboard-header-controls .pg-btn,
  .pg-am-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-premium-page .pg-dashboard-header-controls .pg-btn,
  .pg-premium-page .pg-dashboard-header-chips .pg-status-badge,
  .pg-settings-v2-page .pg-dashboard-header-controls .pg-btn,
  .pg-settings-v2-page .pg-dashboard-header-chips .pg-status-badge {
    padding: 6px 10px !important;
  }

  .pg-dashboard-overview-page .pg-server-switcher-trigger,
  .pg-guardian-center-v2-page .pg-server-switcher-trigger,
  .pg-auto-shield-v2-page .pg-server-switcher-trigger,
  .pg-ticket-system-v2-page .pg-server-switcher-trigger,
  .pg-guardian-logs-v2-page .pg-server-switcher-trigger,
  .pg-guardian-page .pg-server-switcher-trigger,
  .pg-cases-page .pg-server-switcher-trigger,
  .pg-rc-page .pg-server-switcher-trigger,
  .pg-am-page .pg-server-switcher-trigger,
  .pg-premium-page .pg-server-switcher-trigger,
  .pg-settings-v2-page .pg-server-switcher-trigger {
    padding-block: 3px !important;
  }

  .pg-dashboard-overview-page .pg-page-hero + .pg-content,
  .pg-guardian-center-v2-page .pg-page-hero + .pg-content,
  .pg-auto-shield-v2-page .pg-page-hero + .pg-content,
  .pg-ticket-system-v2-page .pg-page-hero + .pg-content,
  .pg-guardian-logs-v2-page .pg-page-hero + .pg-content,
  .pg-guardian-page .pg-page-hero + .pg-content,
  .pg-cases-page .pg-page-hero + .pg-content,
  .pg-rc-page .pg-page-hero + .pg-content,
  .pg-am-page .pg-page-hero + .pg-content,
  .pg-premium-page .pg-page-hero + .pg-content,
  .pg-settings-v2-page .pg-page-hero + .pg-content {
    margin-top: clamp(18px, 1.5vw, 24px) !important;
  }

  .pg-dashboard-overview-page .pg-dashboard-overview-content,
  .pg-guardian-center-v2-page .pg-guardian-center-content,
  .pg-auto-shield-v2-page .pg-shield-content,
  .pg-ticket-system-v2-page .pg-ticket-system-content,
  .pg-guardian-logs-v2-page .pg-guardian-logs-content,
  .pg-guardian-page .pg-guardian-content,
  .pg-cases-page .pg-cases-content,
  .pg-rc-page .pg-rc-content,
  .pg-am-page .pg-am-content,
  .pg-premium-page .pg-premium-content,
  .pg-settings-v2-page .pg-settings-content {
    padding-top: 0 !important;
  }

  .pg-guardian-logs-v2.pg-guardian-logs-content {
    width: 100%;
    max-width: min(100%, 1560px);
    margin-inline: 0 auto;
    gap: 18px;
    padding: 0 0 calc(clamp(28px, 4vw, 44px) + env(safe-area-inset-bottom, 0px));
  }

  .pg-guardian-logs-v2,
  .pg-guardian-logs-v2 * {
    min-width: 0;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-summary-grid,
  .pg-guardian-logs-v2 .pg-guardian-logs-grid-2,
  .pg-guardian-logs-v2 .pg-guardian-logs-grid-3 {
    display: grid;
    width: 100%;
    align-items: start;
    gap: 14px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-form,
  .pg-guardian-logs-v2 .pg-guardian-logs-card,
  .pg-guardian-logs-v2 .pg-guardian-logs-panel,
  .pg-guardian-logs-v2 .pg-guardian-logs-toggle,
  .pg-guardian-logs-v2 .pg-guardian-logs-ignore-item,
  .pg-guardian-logs-v2 .pg-guardian-logs-empty {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      rgba(8, 15, 29, 0.72);
    box-shadow:
      0 22px 46px -38px rgba(2, 6, 23, 0.92),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-form {
    align-items: stretch;
    width: 100%;
    gap: 18px;
    border-radius: 20px;
    padding: 18px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-card,
  .pg-guardian-logs-v2 .pg-guardian-logs-panel {
    padding: 16px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-summary-card {
    min-height: 136px;
    padding: 16px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle,
  .pg-guardian-logs-v2 .pg-guardian-logs-ignore-item {
    gap: 12px;
    padding: 12px 14px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle {
    align-items: center;
    transition:
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle:hover {
    border-color: rgba(34, 211, 238, 0.24);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
      rgba(8, 15, 29, 0.76);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle .pg-guardian-logs-checkbox-lg {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    margin: 0 0 0 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    cursor: pointer;
    background:
      radial-gradient(circle at 12px 50%, #f8fafc 0 7px, transparent 7.6px),
      linear-gradient(180deg, rgba(51, 65, 85, 0.95), rgba(15, 23, 42, 0.95));
    box-shadow:
      inset 0 1px 2px rgba(2, 6, 23, 0.5),
      0 0 0 1px rgba(15, 23, 42, 0.32);
    transition:
      background 190ms ease,
      border-color 180ms ease,
      box-shadow 190ms ease,
      transform 180ms ease;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle .pg-guardian-logs-checkbox-lg:checked {
    border-color: rgba(34, 211, 238, 0.72);
    background:
      radial-gradient(circle at calc(100% - 12px) 50%, #f8fafc 0 7px, transparent 7.6px),
      linear-gradient(135deg, #0284c7, #14b8a6);
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.2),
      0 0 18px rgba(34, 211, 238, 0.22),
      inset 0 1px 2px rgba(8, 47, 73, 0.32);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle .pg-guardian-logs-checkbox-lg:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.72);
    outline-offset: 3px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle-control {
    align-self: center;
    margin-left: auto;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle .pg-toggle-input.pg-guardian-logs-checkbox-lg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle-control .pg-toggle-shell {
    border-color: rgba(125, 211, 252, 0.2);
    background-color: rgba(30, 41, 59, 0.95);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-toggle-control .pg-toggle-input:checked + .pg-toggle-shell {
    border-color: rgba(34, 211, 238, 0.72);
    background-color: #0891b2;
    box-shadow:
      inset 0 1px 2px rgba(8, 47, 73, 0.22),
      0 0 0 1px rgba(34, 211, 238, 0.18),
      0 0 14px rgba(34, 211, 238, 0.22);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-form::before,
  .pg-guardian-logs-v2 .pg-guardian-logs-card::before,
  .pg-guardian-logs-v2 .pg-guardian-logs-panel::before,
  .pg-guardian-logs-v2 .pg-guardian-logs-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 84% 18%, rgba(34, 211, 238, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(14, 165, 233, 0.06), transparent 54%);
    opacity: 0.68;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-form > *,
  .pg-guardian-logs-v2 .pg-guardian-logs-card > *,
  .pg-guardian-logs-v2 .pg-guardian-logs-panel > *,
  .pg-guardian-logs-v2 .pg-guardian-logs-toggle > * {
    position: relative;
    z-index: 1;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-row {
    align-items: flex-start;
    gap: 12px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-row > .pg-badge {
    align-self: center;
    flex: 0 0 auto;
    max-width: 100%;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-title {
    color: #f8fbff;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-card > .pg-guardian-logs-row .pg-guardian-logs-title,
  .pg-guardian-logs-v2 .pg-guardian-logs-form > [data-guardian-logs-tab-panel] > .pg-guardian-logs-row .pg-guardian-logs-title {
    font-size: 20px;
    font-weight: 900;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-kicker {
    color: rgba(148, 163, 184, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-value {
    color: #e0faff;
    font-size: 28px;
    line-height: 1.06;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-description,
  .pg-guardian-logs-v2 .pg-guardian-logs-muted {
    color: rgba(148, 163, 184, 0.82);
    font-size: 12px;
    line-height: 1.45;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-description {
    margin-top: 4px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-mono {
    overflow-wrap: anywhere;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-input,
  .pg-guardian-logs-v2 .pg-guardian-logs-select {
    border-color: rgba(148, 163, 184, 0.16);
    border-radius: 13px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
      rgba(2, 6, 23, 0.44);
    color: #f8fbff;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    padding: 10px 12px;
    text-overflow: ellipsis;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-input:focus,
  .pg-guardian-logs-v2 .pg-guardian-logs-select:focus {
    border-color: rgba(34, 211, 238, 0.72);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
    outline: none;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-type-row {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    align-items: center;
    gap: 10px;
    padding: 7px 0;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-type-row .pg-guardian-logs-description {
    margin-top: 2px;
    line-height: 1.32;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-type-row .pg-guardian-logs-muted {
    margin-top: 2px;
    font-size: 11px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-type-row .pg-guardian-logs-select {
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding: 7px 10px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-divide > * + * {
    border-top-color: rgba(148, 163, 184, 0.12);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-ignore-item {
    min-height: 52px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.28);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-empty {
    min-height: 0;
    padding: 14px 16px;
    border-style: dashed;
    color: rgba(203, 213, 225, 0.7);
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-actions {
    align-items: center;
    gap: 10px;
  }

  .pg-guardian-logs-v2 .pg-guardian-logs-actions > .pg-btn {
    min-height: 38px;
    border-radius: 13px;
  }

  .pg-guardian-logs-v2 .pg-badge {
    min-height: 28px;
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(14, 165, 233, 0.12);
    color: #a5f3fc;
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  @media (max-width: 1320px) {
    .pg-guardian-logs-v2 .pg-guardian-logs-summary-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pg-guardian-logs-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) and (min-width: 981px) {
    .pg-guardian-logs-v2-page .pg-dashboard-header-body {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "main controls"
        "insights insights";
    }

    .pg-guardian-logs-v2-page .pg-dashboard-header-insights {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .pg-guardian-logs-v2 .pg-guardian-logs-type-row {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .pg-guardian-logs-v2.pg-guardian-logs-content {
      gap: 14px;
    }

    .pg-guardian-logs-v2 .pg-guardian-logs-form,
    .pg-guardian-logs-v2 .pg-guardian-logs-card,
    .pg-guardian-logs-v2 .pg-guardian-logs-panel,
    .pg-guardian-logs-v2 .pg-guardian-logs-toggle,
    .pg-guardian-logs-v2 .pg-guardian-logs-ignore-item {
      border-radius: 18px;
      padding: 16px;
    }

    .pg-guardian-logs-v2 .pg-guardian-logs-summary-grid,
    .pg-guardian-logs-v2 .pg-guardian-logs-grid-2,
    .pg-guardian-logs-v2 .pg-guardian-logs-grid-3 {
      grid-template-columns: 1fr;
    }

    .pg-guardian-logs-v2 .pg-guardian-logs-summary-card {
      min-height: 0;
    }
  }

  @media (max-width: 1320px) {
    .pg-overview-stat-grid-v2 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1180px) {
    .pg-overview-hero-grid,
    .pg-overview-workspace-grid {
      grid-template-columns: 1fr;
    }

    .pg-overview-side-stack {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pg-overview-side-stack.has-no-tickets {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-overview-right-column {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .pg-overview-protection-list {
      grid-column: 1 / -1;
    }

    .pg-overview-pulse-card {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 860px) {
    .pg-overview-main-body,
    .pg-overview-analytics-grid-v2,
    .pg-overview-side-stack,
    .pg-overview-right-column {
      grid-template-columns: 1fr;
    }

    .pg-overview-snapshot-card .pg-snapshot-grid-v2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-overview-stat-grid-v2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .pg-dashboard-overview-v2 {
      gap: 14px;
    }

    .pg-overview-main-card,
    .pg-overview-side-card,
    .pg-overview-activity-card,
    .pg-overview-stat-card {
      border-radius: 18px;
      padding: 16px;
    }

    .pg-dashboard-overview-v2 .pg-overview-card-head,
    .pg-overview-section-head {
      flex-direction: column;
      align-items: flex-start;
    }

    .pg-overview-card-metric {
      justify-items: start;
      text-align: left;
    }

    .pg-dashboard-overview-v2 .pg-overview-card-head h2 {
      font-size: 28px;
    }

    .pg-overview-metric strong {
      font-size: 44px;
    }

    .pg-overview-coverage-visual {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .pg-overview-system-breakdown {
      width: 100%;
    }

    .pg-overview-hero-stats,
    .pg-overview-stat-grid-v2,
    .pg-overview-snapshot-card .pg-snapshot-grid-v2,
    .pg-quick-grid-v2 {
      grid-template-columns: 1fr;
    }

    .pg-overview-chart-lines,
    .pg-overview-coverage-visual {
      height: 112px;
    }

    .pg-overview-coverage-visual {
      height: auto;
      min-height: 0;
    }
  }

  @media (max-width: 1280px) {
    .pg-overview-stat-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1080px) {
    .pg-overview-hero,
    .pg-overview-grid-2 {
      grid-template-columns: 1fr;
    }

    .pg-overview-chip-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pg-health-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-overview-analytics-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pg-overview-chart-card:first-child,
    .pg-overview-chart-card:nth-child(2) {
      grid-column: span 2;
    }
  }

  @media (max-width: 720px) {
    .pg-overview-hero {
      padding: 20px;
      border-radius: 20px;
    }

    .pg-overview-chip-row,
    .pg-overview-stat-grid,
    .pg-overview-analytics-grid,
    .pg-health-grid,
    .pg-snapshot-grid,
    .pg-quick-action-grid {
      grid-template-columns: 1fr;
    }

    .pg-overview-chart-card:first-child,
    .pg-overview-chart-card:nth-child(2) {
      grid-column: span 1;
    }

    .pg-overview-panel-grid {
      grid-template-columns: 1fr;
    }

    .pg-system-card,
    .pg-feed-item {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .pg-system-card .pg-badge,
    .pg-feed-item time {
      grid-column: 2;
      justify-self: start;
    }
  }

  .pg-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pg-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .pg-delay-1 { transition-delay: 0.08s; }
  .pg-delay-2 { transition-delay: 0.16s; }
  .pg-delay-3 { transition-delay: 0.24s; }
  .pg-delay-4 { transition-delay: 0.32s; }

  .pg-landing-shell {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pg-landing-shell,
  .pg-layout-shell,
  .pg-main,
  .pg-content {
    max-width: 100%;
    overflow-x: clip;
  }

  .pg-landing-topbar {
    position: relative;
    gap: 14px;
  }

  .pg-landing-topbar-brand {
    min-width: 0;
  }

  .pg-landing-topbar-brand > div:last-child {
    min-width: 0;
  }

  .pg-landing-topbar-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .pg-landing-locale-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
  }

  .pg-landing-topbar-actions {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-landing-topbar-actions .pg-btn {
    width: 100%;
  }

  .pg-topbar-secondary-cta {
    border-color: rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 24px -22px rgba(15, 23, 42, 0.92);
  }

  .pg-topbar-primary-cta {
    position: relative;
    border-color: rgba(167, 139, 250, 0.52);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.2),
      0 22px 44px -18px rgba(79, 70, 229, 0.96),
      0 0 36px rgba(99, 102, 241, 0.28);
    will-change: transform, box-shadow, filter;
  }

  .pg-landing-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgba(99, 102, 241, 0.08), transparent 28%, transparent 72%, rgba(34, 211, 238, 0.08)),
      radial-gradient(circle at top left, rgba(99, 102, 241, 0.12), transparent 28%);
    pointer-events: none;
  }

  .pg-hero-title {
    font-size: clamp(2.55rem, 5.35vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
    max-width: 10.5ch;
  }

  .pg-gradient-title {
    background: linear-gradient(135deg, #ffffff 0%, #dbeafe 38%, #a5b4fc 70%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .pg-kpi-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(20px);
  }

  .pg-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(148, 163, 184, 0.72);
  }

  .pg-kpi-value {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1;
    font-weight: 700;
    color: #f8fafc;
    margin-top: 12px;
  }

  .pg-kpi-sub {
    font-size: 13px;
    color: rgba(226, 232, 240, 0.72);
    margin-top: 8px;
  }

  .pg-feature-card {
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    padding: 24px;
    position: relative;
    overflow: hidden;
  }

  .pg-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.18), transparent 40%);
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .pg-feature-card:hover::before {
    opacity: 1;
  }

  .pg-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(34, 211, 238, 0.2));
    border: 1px solid rgba(129, 140, 248, 0.24);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
    color: #dbeafe;
  }

  .pg-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pg-hero-panel {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 28px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.72);
  }

  .pg-hero-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), transparent 42%, rgba(34, 211, 238, 0.12));
    pointer-events: none;
  }

  .pg-hero-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(14px);
    opacity: 0.8;
    animation: pgFloat 8s ease-in-out infinite;
  }

  .pg-hero-orb.orb-a {
    width: 140px;
    height: 140px;
    top: -40px;
    right: -20px;
    background: rgba(99, 102, 241, 0.32);
  }

  .pg-hero-orb.orb-b {
    width: 110px;
    height: 110px;
    bottom: -36px;
    left: -12px;
    background: rgba(34, 211, 238, 0.24);
    animation-delay: -2s;
  }

  .pg-grid-ambient {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 82%);
    pointer-events: none;
  }

  .pg-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .pg-trust-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(16px);
  }

  .pg-feature-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(165, 180, 252, 0.78);
  }

  .pg-feature-card.is-featured {
    background:
      radial-gradient(circle at top right, rgba(34, 211, 238, 0.14), transparent 34%),
      linear-gradient(155deg, rgba(17, 24, 39, 0.92), rgba(15, 23, 42, 0.74));
    border-color: rgba(96, 165, 250, 0.22);
    box-shadow:
      0 24px 48px -28px rgba(2, 6, 23, 0.88),
      0 0 36px rgba(59, 130, 246, 0.12);
  }

  .pg-feature-card.is-featured::before {
    opacity: 1;
    background:
      radial-gradient(circle at top right, rgba(59, 130, 246, 0.22), transparent 40%),
      radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.14), transparent 42%);
  }

  .pg-feature-card.is-featured .pg-feature-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.26), rgba(34, 211, 238, 0.26));
    border-color: rgba(125, 211, 252, 0.3);
    box-shadow: 0 14px 28px rgba(8, 47, 73, 0.34);
  }

  .pg-why-list {
    display: grid;
    gap: 14px;
  }

  .pg-why-item {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.48));
  }

  .pg-why-item::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.92), rgba(34, 211, 238, 0.78));
  }

  .pg-proof-card,
  .pg-proof-metric,
  .pg-preview-metric,
  .pg-preview-module,
  .pg-final-cta {
    position: relative;
    overflow: hidden;
  }

  .pg-proof-card {
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.18), transparent 36%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 26px;
    padding: 26px;
    box-shadow: 0 28px 60px -34px rgba(2, 6, 23, 0.9);
  }

  .pg-proof-metric {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.56));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    padding: 20px;
    min-height: 100%;
  }

  .pg-proof-value {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    color: #f8fafc;
    margin-bottom: 12px;
  }

  .pg-proof-note {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(203, 213, 225, 0.74);
  }

  .pg-preview-shell {
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.18), transparent 32%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.66));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 32px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow:
      0 40px 80px -40px rgba(2, 6, 23, 0.96),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .pg-preview-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.04), transparent 22%, transparent 78%, rgba(34, 211, 238, 0.05)),
      radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.1), transparent 28%);
    pointer-events: none;
  }

  .pg-preview-shell > * {
    position: relative;
    z-index: 1;
  }

  .pg-preview-metric {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.62));
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    padding: 20px;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  }

  .pg-preview-metric:hover {
    transform: translateY(-4px);
    border-color: rgba(129, 140, 248, 0.26);
    box-shadow: 0 20px 36px -26px rgba(59, 130, 246, 0.42);
  }

  .pg-preview-metric-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(148, 163, 184, 0.74);
  }

  .pg-preview-metric-value {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1;
    font-weight: 700;
    color: #f8fafc;
    margin-top: 14px;
  }

  .pg-preview-metric-note {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(203, 213, 225, 0.74);
  }

  .pg-preview-feed-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
  }

  .pg-preview-feed-item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .pg-preview-feed-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 8px;
    flex: 0 0 auto;
  }

  .pg-dot-green {
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12);
  }

  .pg-dot-blue {
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12);
  }

  .pg-dot-purple {
    background: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
  }

  .pg-dot-amber {
    background: #fbbf24;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);
  }

  .pg-preview-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.42);
    color: #e2e8f0;
  }

  .pg-preview-module-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-preview-module {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.46);
    padding: 16px;
    transition: border-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  }

  .pg-preview-module:hover {
    transform: translateY(-4px);
    border-color: rgba(129, 140, 248, 0.24);
    box-shadow: 0 20px 34px -26px rgba(99, 102, 241, 0.28);
  }

  .pg-final-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 36px);
    border-radius: 32px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
      radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 30%),
      linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.62));
    box-shadow: 0 34px 72px -42px rgba(2, 6, 23, 0.94);
  }

  .pg-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 24%, transparent 76%, rgba(99, 102, 241, 0.06));
    pointer-events: none;
  }

  .pg-final-cta > * {
    position: relative;
    z-index: 1;
  }

  .pg-home-hero {
    display: grid;
    gap: clamp(1.85rem, 3.6vw, 3.25rem);
    align-items: start;
    position: relative;
  }

  @media (min-width: 1080px) {
    .pg-home-hero {
      grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
      align-items: start;
    }
  }

  .pg-home-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    max-width: 40rem;
    padding-top: 0.2rem;
  }

  .pg-home-lead {
    font-size: clamp(1.02rem, 1.45vw, 1.16rem);
    line-height: 1.72;
    color: rgba(226, 232, 240, 0.92);
    max-width: 31rem;
  }

  .pg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
  }

  .pg-hero-actions .pg-btn,
  .pg-final-cta-actions .pg-btn {
    justify-content: center;
    min-width: 190px;
  }

  .pg-hero-primary-cta {
    position: relative;
    min-width: 260px !important;
    font-weight: 800;
    letter-spacing: -0.01em;
    border-color: rgba(167, 139, 250, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 26px 54px -22px rgba(79, 70, 229, 0.98),
      0 0 42px rgba(99, 102, 241, 0.3);
    will-change: transform, box-shadow, filter;
  }

  .pg-hero-primary-cta::before,
  .pg-topbar-primary-cta::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.04) 38%, rgba(255,255,255,0.12) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .pg-hero-primary-cta:hover,
  .pg-topbar-primary-cta:hover {
    transform: translateY(-2px) scale(1.022);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      0 30px 60px -22px rgba(79, 70, 229, 1),
      0 0 50px rgba(99, 102, 241, 0.36);
  }

  .pg-hero-primary-cta:active,
  .pg-topbar-primary-cta:active {
    transform: translateY(0) scale(0.985);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 16px 30px -18px rgba(79, 70, 229, 0.82),
      0 0 22px rgba(99, 102, 241, 0.2);
  }

  .pg-hero-secondary-cta {
    border-color: rgba(148, 163, 184, 0.16);
    color: rgba(226, 232, 240, 0.84);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 28px -22px rgba(15, 23, 42, 0.94);
  }

  .pg-hero-cta-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.58;
    color: rgba(226, 232, 240, 0.9);
  }

  .pg-hero-cta-note::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #4ade80 0%, #22d3ee 100%);
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.09);
    flex: 0 0 auto;
  }

  .pg-hero-support-line {
    margin-top: -0.35rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(148, 163, 184, 0.86);
  }

  .pg-hero-support-line a,
  .pg-legal-section a,
  .pg-landing-footer a {
    color: rgba(191, 219, 254, 0.92);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  .pg-hero-support-line a:hover,
  .pg-legal-section a:hover,
  .pg-landing-footer a:hover {
    color: #e0f2fe;
  }

  .pg-support-btn {
    color: rgba(226, 232, 240, 0.82);
    border-color: rgba(148, 163, 184, 0.15);
  }

  .pg-hero-metrics {
    margin-top: 0.35rem;
  }

  .pg-home-hero-visual {
    position: relative;
  }

  .pg-home-hero-visual::before {
    content: '';
    position: absolute;
    inset: 8% -6% -8% 12%;
    border-radius: 2.25rem;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.16), transparent 62%);
    filter: blur(32px);
    pointer-events: none;
    z-index: 0;
  }

  .pg-home-hero-visual > * {
    position: relative;
    z-index: 1;
  }

  .pg-home-trust-note {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(191, 219, 254, 0.82);
    max-width: 34rem;
  }

  .pg-home-section {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.15vw, 1.85rem);
  }

  .pg-section-head {
    max-width: 64rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
  }

  .pg-section-head h2,
  .pg-final-cta h2 {
    text-wrap: balance;
    letter-spacing: -0.045em;
    line-height: 1.04;
  }

  .pg-section-head h2 {
    max-width: 17ch;
    font-size: clamp(1.9rem, 3.55vw, 2.9rem);
  }

  .pg-section-head p {
    max-width: 40rem;
    font-size: 1rem;
    line-height: 1.75;
  }

  .pg-feature-grid,
  .pg-usecase-grid,
  .pg-pricing-grid {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .pg-feature-benefit {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: rgba(191, 219, 254, 0.86);
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .pg-proof-browser {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(180deg, rgba(8, 15, 30, 0.92), rgba(15, 23, 42, 0.78));
    box-shadow: 0 34px 80px -42px rgba(2, 6, 23, 0.96);
  }

  .pg-proof-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(2, 6, 23, 0.5);
  }

  .pg-proof-browser-dots {
    display: inline-flex;
    gap: 0.4rem;
  }

  .pg-proof-browser-dots span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.42);
  }

  .pg-proof-browser-dots span:nth-child(1) { background: #f87171; }
  .pg-proof-browser-dots span:nth-child(2) { background: #fbbf24; }
  .pg-proof-browser-dots span:nth-child(3) { background: #4ade80; }

  .pg-proof-browser-url {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.76);
    color: rgba(226, 232, 240, 0.74);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-proof-browser-body {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 485px;
  }

  .pg-proof-sidebar {
    padding: 1.15rem;
    border-right: 1px solid rgba(148, 163, 184, 0.08);
    background: linear-gradient(180deg, rgba(3, 8, 20, 0.92), rgba(10, 16, 30, 0.88));
  }

  .pg-proof-sidebar-brand {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 1rem;
  }

  .pg-proof-sidebar-nav {
    display: grid;
    gap: 0.55rem;
  }

  .pg-proof-sidebar-nav span {
    padding: 0.72rem 0.85rem;
    border-radius: 0.95rem;
    color: rgba(148, 163, 184, 0.94);
    font-size: 0.84rem;
    font-weight: 600;
    background: rgba(15, 23, 42, 0.3);
  }

  .pg-proof-sidebar-nav .is-active {
    color: #eef2ff;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.22), rgba(34, 211, 238, 0.08));
    border: 1px solid rgba(129, 140, 248, 0.16);
  }

  .pg-proof-workspace {
    padding: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.15), transparent 42%),
      rgba(15, 23, 42, 0.42);
  }

  .pg-proof-kpis {
    display: grid;
    gap: 0.95rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-proof-tile {
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.54));
    min-height: 128px;
    display: flex;
    flex-direction: column;
  }

  .pg-proof-tile-label {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.72);
  }

  .pg-proof-tile-value {
    margin-top: 0.7rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
  }

  .pg-proof-tile-note {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(203, 213, 225, 0.72);
  }

  .pg-proof-lower {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: stretch;
  }

  .pg-proof-lower > article {
    height: 100%;
    min-width: 0;
  }

  .pg-proof-feature-card h3 {
    max-width: 22ch;
    line-height: 1.24;
  }

  .pg-proof-mobile-card {
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(96, 165, 250, 0.14);
    background:
      radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 42%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.56));
  }

  .pg-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
  }

  @media (max-width: 1380px) {
    .pg-proof-lower {
      grid-template-columns: 1fr;
    }
  }

  .pg-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.78rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(224, 231, 255, 0.95);
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(129, 140, 248, 0.18);
  }

  .pg-visual-proof-grid,
  .pg-problem-solution-grid,
  .pg-trust-grid {
    display: grid;
    gap: 1rem;
    align-items: start;
  }

  @media (min-width: 1024px) {
    .pg-visual-proof-grid,
    .pg-trust-grid {
      grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    }

    .pg-problem-solution-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .pg-visual-proof-panel,
  .pg-proof-detail-card,
  .pg-proof-steps-card,
  .pg-problem-card,
  .pg-solution-panel,
  .pg-trust-card,
  .pg-trust-metric-card,
  .pg-price-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.58));
    border-radius: 1.6rem;
    padding: 1.35rem;
    box-shadow: 0 24px 48px -34px rgba(2, 6, 23, 0.9);
  }

  .pg-visual-proof-stage {
    position: relative;
    min-height: 430px;
    border-radius: 1.5rem;
    padding: 1.1rem;
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.22), transparent 34%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.76), rgba(2, 6, 23, 0.5));
    border: 1px solid rgba(148, 163, 184, 0.1);
    overflow: hidden;
  }

  .pg-visual-window {
    max-width: 90%;
    border-radius: 1.3rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 30px 60px -38px rgba(2, 6, 23, 0.95);
  }

  .pg-visual-window-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .pg-visual-window-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-visual-mini-card {
    padding: 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(2, 6, 23, 0.42);
  }

  .pg-visual-mini-label {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.72);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .pg-visual-mini-value {
    margin-top: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
  }

  .pg-visual-phone {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: min(220px, 48%);
    border-radius: 1.4rem;
    padding: 0.9rem;
    background:
      radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 42%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.64));
    border: 1px solid rgba(125, 211, 252, 0.16);
    box-shadow: 0 24px 60px -36px rgba(6, 182, 212, 0.45);
  }

  .pg-visual-phone-header {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(186, 230, 253, 0.74);
  }

  .pg-visual-phone-body {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.7rem;
    color: rgba(226, 232, 240, 0.84);
    line-height: 1.65;
  }

  .pg-proof-detail-label {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(165, 180, 252, 0.82);
  }

  .pg-proof-detail-stack,
  .pg-trust-card-stack {
    display: grid;
    gap: 1rem;
  }

  .pg-proof-step-list,
  .pg-list-stack,
  .pg-price-list {
    display: grid;
    gap: 0.8rem;
  }

  .pg-proof-step,
  .pg-list-row,
  .pg-price-item {
    position: relative;
    padding: 0.85rem 0.95rem 0.85rem 2.2rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.48);
    color: rgba(226, 232, 240, 0.86);
    line-height: 1.65;
  }

  .pg-proof-step::before,
  .pg-list-row::before,
  .pg-price-item::before {
    content: '';
    position: absolute;
    left: 0.95rem;
    top: 1.08rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #818cf8 0%, #22d3ee 100%);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
  }

  .pg-problem-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
  }

  .pg-list-row.is-problem::before {
    background: linear-gradient(180deg, #fb7185 0%, #f97316 100%);
    box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.08);
  }

  .pg-list-row.is-solution::before,
  .pg-price-item::before {
    background: linear-gradient(180deg, #22c55e 0%, #38bdf8 100%);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
  }

  .pg-solution-note,
  .pg-sentinel-note {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.14);
    color: rgba(191, 219, 254, 0.88);
    line-height: 1.7;
  }

  .pg-sentinel-shell {
    display: grid;
    gap: 1rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.18), transparent 34%),
      radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.12), transparent 42%),
      linear-gradient(160deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.62));
    box-shadow: 0 34px 72px -42px rgba(2, 6, 23, 0.96);
  }

  @media (min-width: 1024px) {
    .pg-sentinel-shell {
      grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
      align-items: center;
    }
  }

  .pg-sentinel-rules {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-sentinel-rule {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(129, 140, 248, 0.12);
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
  }

  .pg-compare-table {
    border-radius: 1.7rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.58));
    box-shadow: 0 28px 64px -40px rgba(2, 6, 23, 0.94);
  }

  .pg-compare-head,
  .pg-compare-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-compare-head {
    background: rgba(2, 6, 23, 0.42);
    color: rgba(226, 232, 240, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .pg-compare-head > div,
  .pg-compare-cell {
    padding: 1rem 1.1rem;
  }

  .pg-compare-row + .pg-compare-row {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
  }

  .pg-compare-cell {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.98rem;
    line-height: 1.75;
    color: rgba(226, 232, 240, 0.82);
  }

  .pg-compare-mobile-label {
    display: none;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.66);
  }

  .pg-compare-cell.is-traditional {
    color: rgba(248, 113, 113, 0.86);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.12), rgba(127, 29, 29, 0.07));
  }

  .pg-compare-cell.is-pguardian {
    color: rgba(191, 219, 254, 0.92);
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.1), rgba(30, 64, 175, 0.06));
  }

  .pg-usecase-card {
    border-radius: 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.56));
    padding: 1.35rem;
    box-shadow: 0 22px 42px -34px rgba(2, 6, 23, 0.9);
  }

  .pg-trust-metric-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pg-price-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.5rem;
    border-radius: 1.75rem;
  }

  .pg-price-card.is-highlighted {
    border-color: rgba(129, 140, 248, 0.24);
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.2), transparent 36%),
      radial-gradient(circle at bottom left, rgba(34, 211, 238, 0.09), transparent 42%),
      linear-gradient(155deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.64));
    box-shadow:
      0 34px 64px -38px rgba(79, 70, 229, 0.58),
      0 0 38px rgba(99, 102, 241, 0.12);
    transform: translateY(-10px);
  }

  .pg-price-value {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.05em;
  }

  .pg-price-top {
    min-height: 3.25rem;
  }

  .pg-price-subtitle {
    color: rgba(148, 163, 184, 0.82);
  }

  .pg-price-desc {
    max-width: 28ch;
    color: rgba(226, 232, 240, 0.78);
  }

  .pg-price-card .pg-btn {
    margin-top: auto;
    justify-content: center;
  }

  .pg-final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .pg-feature-card,
  .pg-usecase-card,
  .pg-trust-card,
  .pg-proof-detail-card,
  .pg-proof-steps-card {
    height: 100%;
  }

  .pg-feature-card,
  .pg-usecase-card,
  .pg-trust-card,
  .pg-proof-detail-card {
    display: flex;
    flex-direction: column;
  }

  .pg-feature-card h3,
  .pg-usecase-card h3,
  .pg-trust-card h3,
  .pg-proof-detail-card h3 {
    letter-spacing: -0.025em;
    line-height: 1.12;
  }

  .pg-feature-card p,
  .pg-usecase-card p,
  .pg-trust-card p,
  .pg-proof-detail-card p,
  .pg-price-desc {
    max-width: 34ch;
  }

  .pg-feature-benefit {
    margin-top: auto;
  }

  @media (min-width: 1024px) {
    .pg-final-cta {
      flex-direction: row;
      align-items: end;
    }

    .pg-final-cta-actions {
      justify-content: flex-end;
      align-self: stretch;
    }

    .pg-home-hero-copy {
      padding-top: 0;
    }
  }

  .pg-landing-footer {
    color: rgba(148, 163, 184, 0.74);
  }

  .pg-landing-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 0.9rem;
  }

  .pg-landing-footer nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.95rem;
  }

  .pg-legal-shell {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1.8rem;
    background:
      radial-gradient(circle at top right, rgba(99, 102, 241, 0.14), transparent 34%),
      linear-gradient(155deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.62));
    box-shadow: 0 34px 72px -42px rgba(2, 6, 23, 0.96);
    padding: clamp(1.4rem, 4vw, 2.4rem);
  }

  .pg-legal-title {
    margin-top: 1.1rem;
    font-size: clamp(2.35rem, 6vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: #f8fafc;
  }

  .pg-legal-intro {
    margin-top: 1rem;
    max-width: 46rem;
    color: rgba(203, 213, 225, 0.84);
    line-height: 1.75;
  }

  .pg-legal-section-list {
    display: grid;
    gap: 1.1rem;
    margin-top: 1.6rem;
  }

  .pg-legal-section {
    padding-top: 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
  }

  .pg-legal-section h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
  }

  .pg-legal-section p {
    margin-top: 0.7rem;
    color: rgba(203, 213, 225, 0.78);
    line-height: 1.75;
  }

  @keyframes pgFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -14px, 0); }
  }

  @media (max-width: 767px) {
    .pg-landing-shell header,
    .pg-landing-shell main {
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    .pg-landing-topbar-brand {
      align-items: flex-start;
    }

    .pg-landing-topbar-rail {
      width: 100%;
      justify-content: space-between;
      align-items: stretch;
    }

    .pg-landing-locale-slot {
      flex: 0 0 auto;
      margin-left: auto;
    }

    .pg-landing-topbar-actions {
      width: 100%;
    }

    .pg-hero-title {
      font-size: clamp(2.6rem, 12vw, 4rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
      text-wrap: balance;
    }

    .pg-feature-card,
    .pg-proof-card,
    .pg-proof-metric,
    .pg-preview-shell,
    .pg-final-cta {
      padding: 20px;
    }

    .pg-hero-panel {
      padding: 22px;
      border-radius: 26px;
    }

    .pg-hero-panel .flex.items-center.justify-between.gap-4,
    .pg-hero-panel .flex.items-center.justify-between.gap-3,
    .pg-preview-shell > .flex.flex-col.gap-4.lg\:flex-row.lg\:items-center.lg\:justify-between {
      flex-direction: column;
      align-items: flex-start;
    }

    .pg-hero-panel .pg-badge,
    .pg-preview-shell .pg-badge {
      align-self: flex-start;
    }

    .pg-trust-strip {
      gap: 10px;
    }

    .pg-proof-browser-body,
    .pg-proof-lower,
    .pg-compare-head,
    .pg-compare-row,
    .pg-trust-metric-grid,
    .pg-sentinel-rules,
    .pg-visual-window-grid {
      grid-template-columns: 1fr;
    }

    .pg-proof-sidebar {
      display: none;
    }

    .pg-home-hero {
      gap: 1.35rem;
    }

    .pg-home-lead {
      font-size: 1rem;
      line-height: 1.68;
    }

    .pg-visual-window {
      max-width: 100%;
    }

    .pg-visual-phone {
      position: static;
      width: 100%;
      margin-top: 1rem;
    }

    .pg-preview-module-grid {
      grid-template-columns: 1fr;
    }

    .pg-proof-card,
    .pg-proof-metric,
    .pg-preview-shell,
    .pg-final-cta {
      border-radius: 24px;
    }

    .pg-home-hero-copy,
    .pg-home-section {
      gap: 1.25rem;
    }

    .pg-section-head h2 {
      max-width: 12ch;
      font-size: clamp(1.8rem, 8vw, 2.7rem);
    }

    .pg-section-head p {
      max-width: none;
      font-size: 0.98rem;
      line-height: 1.72;
    }

    .pg-proof-browser {
      border-radius: 22px;
    }

    .pg-proof-browser-body,
    .pg-visual-proof-stage {
      min-height: 0;
    }

    .pg-proof-workspace {
      padding: 1rem;
    }

    .pg-proof-tile {
      min-height: 0;
    }

    .pg-hero-actions .pg-btn,
    .pg-final-cta-actions .pg-btn {
      width: 100%;
      min-width: 0;
    }

    .pg-hero-primary-cta {
      min-width: 0 !important;
    }

    .pg-proof-detail-stack,
    .pg-trust-card-stack {
      gap: 0.85rem;
    }

    .pg-compare-head {
      display: none;
    }

    .pg-compare-table {
      overflow: visible;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .pg-compare-row {
      gap: 0.85rem;
      padding: 0.85rem;
      border-radius: 1.2rem;
      border: 1px solid rgba(148, 163, 184, 0.12);
      background: linear-gradient(160deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.58));
      box-shadow: 0 20px 42px -34px rgba(2, 6, 23, 0.9);
    }

    .pg-compare-row + .pg-compare-row {
      margin-top: 0.75rem;
      border-top: 0;
    }

    .pg-compare-cell {
      padding: 0.95rem 1rem;
      border-radius: 1rem;
      border: 1px solid rgba(148, 163, 184, 0.12);
    }

    .pg-compare-mobile-label {
      display: block;
    }

    .pg-price-card.is-highlighted {
      transform: none;
    }
  }

  /* ==========================================
     COMPREHENSIVE RESPONSIVE DESIGN
     ========================================== */

  /* Touch-friendly tap targets */
  @media (pointer: coarse) {
    .pg-btn, .pg-nav-item, .pg-badge, button, a {
      min-height: 44px;
      min-width: 44px;
    }

    /* Larger touch targets on mobile */
    .pg-btn {
      padding: 12px 18px;
    }
  }

  /* Large Desktop (1400px+) */
  @media (min-width: 1400px) {
    :root {
      --sidebar-width: 300px;
    }

    .pg-stat-value {
      font-size: 36px;
    }

    .pg-card, .pg-surface-card {
      padding: 24px;
    }

    .pg-section-title {
      font-size: 24px;
    }
  }

  /* Desktop (1024px - 1399px) */
  @media (min-width: 1024px) and (max-width: 1399px) {
    :root {
      --sidebar-width: 260px;
    }

    .pg-stat-value {
      font-size: 32px;
    }
  }

  /* Page-specific phone adjustments stay in base to preserve override order. */
  @media (max-width: 479px) {
    .pg-landing-shell header,
    .pg-landing-shell main {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    .pg-landing-topbar {
      padding: 16px;
      border-radius: 20px;
    }

    .pg-landing-topbar-brand {
      gap: 12px;
    }

    .pg-landing-topbar-brand .h-14,
    .pg-landing-topbar-brand .w-14 {
      width: 48px;
      height: 48px;
    }

    .pg-landing-topbar-actions {
      grid-template-columns: 1fr;
    }

    .pg-landing-locale-slot .pg-btn,
    .pg-landing-topbar-actions .pg-btn {
      min-height: 48px;
    }

    .pg-hero-title {
      font-size: clamp(2.15rem, 12vw, 3.2rem);
      line-height: 1.01;
    }

    .pg-preview-metric-note,
    .pg-proof-note {
      line-height: 1.55;
    }

    .pg-feature-card,
    .pg-proof-card,
    .pg-proof-metric,
    .pg-preview-shell,
    .pg-final-cta {
      padding: 18px;
      border-radius: 20px;
    }

    .pg-preview-toggle {
      padding: 12px 14px;
      gap: 10px;
      align-items: flex-start;
    }

    .pg-preview-toggle span:first-child {
      min-width: 0;
    }
  }

  /* ==========================================
     DESKTOP SIDEBAR BEHAVIOR
     ========================================== */

  @media (min-width: 1024px) {
    .pg-layout-shell {
      display: block;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
    }

    .pg-sidebar {
      position: fixed !important;
      top: 0;
      left: 0;
      bottom: 0;
      flex-shrink: 0;
      transform: translateX(0) !important;
    }

    .pg-main {
      margin-left: var(--sidebar-width);
    }

    .pg-sidebar-overlay {
      display: none !important;
    }
  }

  /* ==========================================
     TABLE RESPONSIVE DESIGN
     ========================================== */

  .pg-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  .pg-table {
    min-width: 600px;
  }

  /* ==========================================
     GRID LAYOUT RESPONSIVE
     ========================================== */

  .pg-stats-grid {
    display: grid;
    grid-gap: 16px;
  }

  @media (min-width: 1024px) {
    .pg-stats-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 768px) {
    .pg-form-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }

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

  /* ==========================================
     UTILITY CLASSES
     ========================================== */

  .pg-hide-mobile { display: none; }
  .pg-show-mobile { display: block; }

  @media (min-width: 768px) {
    .pg-hide-mobile { display: block; }
    .pg-show-mobile { display: none; }
    .pg-hide-tablet-up { display: block; }
  }

  @media (max-width: 767px) {
    .pg-hide-tablet-up { display: none; }
  }

  /* ==========================================
     ANIMATIONS & TRANSITIONS
     ========================================== */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ==========================================
     SCROLLBAR STYLING
     ========================================== */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
  }

  /* ==========================================
     INPUT & FORM STYLES
     ========================================== */
  .pg-card, .pg-btn, .pg-badge, input, select, textarea, a, button, tr {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pg-input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    width: 100%;
    font-size: 14px;
  }

  .pg-input::placeholder {
    color: rgba(148, 163, 184, 0.5);
  }

  .pg-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    background: rgba(15, 23, 42, 0.8);
  }

  input[type="date"] {
    color-scheme: dark;
  }

  .pg-select-shell {
    position: relative;
    width: 100%;
  }

  .pg-select-shell::after {
    content: '';
    position: absolute;
    top: 24px;
    right: 18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(191, 219, 254, 0.72);
    border-bottom: 2px solid rgba(191, 219, 254, 0.72);
    transform: translateY(-62%) rotate(45deg);
    pointer-events: none;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .pg-select-shell:hover::after {
    border-color: rgba(224, 231, 255, 0.95);
  }

  .pg-select-shell.is-open::after {
    transform: translateY(-20%) rotate(-135deg);
  }

  .pg-select-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 22px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: rgba(191, 219, 254, 0.88);
    pointer-events: none;
    z-index: 2;
  }

  .pg-select-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
  }

  .pg-select-shell select,
  select.pg-select-input {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 13px 48px 13px 44px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
      rgba(15, 23, 42, 0.68);
    color: #e5eefb;
    backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 28px -20px rgba(2, 6, 23, 0.92);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
  }

  .pg-select-shell select:hover,
  select.pg-select-input:hover {
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 18px 30px -22px rgba(30, 41, 59, 0.96),
      0 0 24px rgba(99, 102, 241, 0.12);
  }

  .pg-select-shell select:focus,
  select.pg-select-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.62);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%),
      rgba(15, 23, 42, 0.82);
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 18px 34px -20px rgba(79, 70, 229, 0.38);
  }

  .pg-select-shell select[multiple] {
    min-height: 180px;
    padding-inline-start: 18px;
    background-image: none;
  }

  .pg-select-shell select option,
  select.pg-select-input option {
    background: #0f172a;
    color: #e5eefb;
  }

  .pg-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .pg-select-trigger {
    width: 100%;
    min-height: 56px;
    padding: 12px 48px 12px 44px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%),
      rgba(15, 23, 42, 0.68);
    color: #e5eefb;
    backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 28px -20px rgba(2, 6, 23, 0.92);
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    text-align: left;
  }

  .pg-select-trigger:hover {
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.1),
      0 18px 30px -22px rgba(30, 41, 59, 0.96),
      0 0 24px rgba(99, 102, 241, 0.12);
  }

  .pg-select-shell.is-open .pg-select-trigger,
  .pg-select-trigger:focus-visible {
    outline: none;
    border-color: rgba(99, 102, 241, 0.62);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%),
      rgba(15, 23, 42, 0.82);
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 18px 34px -20px rgba(79, 70, 229, 0.38);
  }

  .pg-select-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, 0.22);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.12));
    color: #e0e7ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pg-select-placeholder {
    color: rgba(148, 163, 184, 0.66);
    font-size: 13px;
  }

  .pg-select-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 140;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(8, 12, 22, 0.98) 100%);
    backdrop-filter: blur(18px);
    box-shadow:
      0 30px 60px -26px rgba(2, 6, 23, 0.96),
      0 0 24px rgba(99, 102, 241, 0.12);
    padding: 14px;
    display: none;
  }

  .pg-select-shell.is-open .pg-select-panel {
    display: block;
    animation: pgFadeIn 0.18s ease;
  }

  .pg-select-search {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.66);
    color: #e5eefb;
    font-size: 13px;
  }

  .pg-select-search:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.56);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
  }

  .pg-select-search::placeholder {
    color: rgba(148, 163, 184, 0.58);
  }

  .pg-select-options {
    margin-top: 12px;
    max-height: 280px;
    overflow: auto;
    display: grid;
    gap: 10px;
    padding-right: 4px;
  }

  .pg-select-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(148, 163, 184, 0.68);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pg-select-group {
    display: grid;
    gap: 6px;
  }

  .pg-select-group-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.62);
    padding: 0 4px;
  }

  .pg-select-option {
    width: 100%;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.42);
    color: #e5eefb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
  }

  .pg-select-option:hover {
    border-color: rgba(129, 140, 248, 0.24);
    background: rgba(79, 70, 229, 0.12);
  }

  .pg-select-option.is-active {
    border-color: rgba(129, 140, 248, 0.3);
    background: rgba(79, 70, 229, 0.18);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.12);
  }

  .pg-select-option.is-selected {
    border-color: rgba(129, 140, 248, 0.28);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .pg-select-option-check {
    color: #c4b5fd;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .pg-select-empty {
    padding: 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.5);
    color: rgba(148, 163, 184, 0.74);
    text-align: center;
    font-size: 13px;
  }

  .pg-quick-filter {
    position: relative;
    z-index: 12;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(10, 15, 28, 0.76);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 34px -28px rgba(2, 6, 23, 0.9);
  }

  .pg-quick-filter-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(148, 163, 184, 0.66);
    margin-bottom: 10px;
  }

  .pg-quick-filter-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.7);
    color: #e5eefb;
  }

  .pg-quick-filter-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.56);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
  }

  .pg-section-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }

  .pg-section-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.56);
    color: #dbe7fb;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }

  .pg-section-jump:hover {
    border-color: rgba(129, 140, 248, 0.3);
    background: rgba(79, 70, 229, 0.14);
    box-shadow: 0 14px 24px -20px rgba(79, 70, 229, 0.72);
  }

  .pg-filter-hidden {
    display: none !important;
  }

  /* ==========================================
     FINAL RESPONSIVE ADJUSTMENTS
     ========================================== */

  .pg-stat-value {
    word-break: break-word;
  }

  /* Print styles */
  @media print {
    .pg-sidebar, .pg-page-hero, .pg-btn, #pgToastWrap, .pg-savebar, .pg-3d-bg {
      display: none !important;
    }

  }

  /* ============================================
     FUTURISTIC GUARDIAN CONTROL CENTER
     ============================================ */

  /* Main Background Container */
  .pg-control-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    contain: paint;
    isolation: isolate;
    background: linear-gradient(135deg, #0a0f1c 0%, #0d1525 50%, #0a1628 100%);
  }

  .pg-dashboard-backdrop-image {
    display: none;
  }

  @media (min-width: 641px) {
    body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-dashboard-backdrop-image {
      display: block;
      position: fixed;
      inset: -28px;
      z-index: 2;
      pointer-events: none;
      background-image:
        linear-gradient(180deg, rgba(2, 6, 23, 0.44) 0%, rgba(2, 6, 23, 0.66) 66%, rgba(2, 6, 23, 0.86) 100%),
        radial-gradient(ellipse 52% 46% at 52% 42%, rgba(2, 6, 23, 0.28), transparent 68%),
        radial-gradient(ellipse 78% 58% at 56% 40%, rgba(34, 211, 238, 0.14), transparent 62%),
        url("/static/brand/pguardian-dashboard-backdrop.webp");
      background-size: cover;
      background-position: center center, center center, center center, 56% 44%;
      background-repeat: no-repeat;
      opacity: 0.25;
      filter: blur(5px) saturate(1.2) brightness(0.9);
      transform: scale(1.04);
      transform-origin: center center;
      contain: paint;
    }
  }

  @media (min-width: 641px) and (max-width: 1023px) {
    body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-dashboard-backdrop-image {
      opacity: 0.16;
      filter: blur(6px) saturate(1.15) brightness(0.88);
    }
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-control-bg {
    z-index: 0;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-layout,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-layout-shell,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-main,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-main-content {
    position: relative;
    z-index: 1;
  }

  .pg-control-bg,
  .pg-control-bg * {
    pointer-events: none;
  }

  .pg-control-bg,
  .pg-control-bg.pg-bg-lite,
  .pg-control-bg .pg-3d-bg {
    overflow: hidden;
    max-width: 100vw;
  }

  .pg-control-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background:
      radial-gradient(ellipse 95% 78% at 50% 42%, transparent 0%, transparent 52%, rgba(2, 6, 23, 0.22) 100%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.16) 0%, rgba(2, 6, 23, 0.34) 62%, rgba(2, 6, 23, 0.64) 100%);
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-control-bg::after {
    z-index: 6;
    background:
      radial-gradient(ellipse 96% 76% at 52% 42%, transparent 0%, transparent 58%, rgba(2, 6, 23, 0.18) 100%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.08) 0%, rgba(2, 6, 23, 0.2) 62%, rgba(2, 6, 23, 0.44) 100%);
  }

  .pg-3d-bg {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    perspective: 900px;
    transform-style: preserve-3d;
    opacity: 0.72;
    contain: paint;
    background:
      radial-gradient(ellipse 110% 72% at 50% 108%, rgba(34, 211, 238, 0.07), transparent 56%),
      radial-gradient(ellipse 78% 54% at 16% 14%, rgba(124, 58, 237, 0.055), transparent 54%),
      radial-gradient(ellipse 70% 50% at 86% 20%, rgba(6, 182, 212, 0.05), transparent 52%);
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-3d-bg {
    opacity: 0.22;
    background:
      radial-gradient(ellipse 110% 72% at 50% 108%, rgba(34, 211, 238, 0.035), transparent 56%),
      radial-gradient(ellipse 72% 52% at 86% 20%, rgba(6, 182, 212, 0.035), transparent 54%);
  }

  .pg-control-bg.pg-cinematic-active .pg-3d-bg {
    transform: translate3d(var(--pg-cinematic-bg-x, 0px), var(--pg-cinematic-bg-y, 0px), 0) scale(var(--pg-cinematic-bg-scale, 1));
    transform-origin: 50% 56%;
    will-change: transform;
  }

  .pg-control-bg.pg-cinematic-active .pg-grid-floor {
    opacity: 0.38;
  }

  .pg-control-bg.pg-cinematic-active .pg-depth-tunnel {
    opacity: 0.2;
  }

  @media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .pg-control-bg.pg-cinematic-active .pg-3d-bg {
      transform: none !important;
      will-change: auto;
    }

    .pg-control-bg.pg-cinematic-active .pg-grid-floor {
      opacity: 0.16;
    }
  }

  .pg-3d-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 64% 44% at 50% 73%, rgba(34, 211, 238, 0.08), transparent 62%),
      linear-gradient(180deg, rgba(2, 6, 23, 0.18) 0%, transparent 34%, rgba(2, 6, 23, 0.36) 100%);
  }

  .pg-3d-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 31vh;
    z-index: 3;
    width: min(960px, 84vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.26), rgba(167, 139, 250, 0.18), transparent);
    filter: blur(0.5px);
    opacity: 0.5;
  }

  .pg-depth-tunnel {
    position: absolute;
    inset: -2% 0 24% 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    perspective: 1100px;
    transform-style: preserve-3d;
    opacity: 0.16;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 62% 58% at 54% 46%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.76) 42%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 54% 46%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.76) 42%, transparent 76%);
  }

  .pg-depth-tunnel::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 47%;
    width: min(680px, 64vw);
    height: min(680px, 64vw);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, -220px) rotateX(66deg);
    background:
      radial-gradient(circle, rgba(34, 211, 238, 0.16) 0 1px, transparent 2px 18%),
      radial-gradient(circle, transparent 0 30%, rgba(34, 211, 238, 0.11) 31%, transparent 32%, transparent 44%, rgba(167, 139, 250, 0.1) 45%, transparent 46%),
      radial-gradient(circle, rgba(2, 6, 23, 0.7), transparent 68%);
    filter: blur(0.2px);
    opacity: 0.42;
  }

  .pg-depth-tunnel::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30%;
    width: min(1320px, 118vw);
    height: 78%;
    transform: translateX(-50%) rotateX(68deg);
    transform-origin: 50% 100%;
    background-image:
      linear-gradient(90deg, transparent 49.85%, rgba(34, 211, 238, 0.16) 50%, transparent 50.15%),
      repeating-linear-gradient(90deg, transparent 0 88px, rgba(167, 139, 250, 0.08) 89px 90px, transparent 91px 176px),
      repeating-linear-gradient(0deg, transparent 0 60px, rgba(34, 211, 238, 0.08) 61px 62px, transparent 63px 120px);
    background-size: 100% 100%, 176px 100%, 100% 120px;
    opacity: 0.16;
    animation: none;
  }

  .pg-tunnel-lines {
    position: absolute;
    left: 50%;
    top: 51%;
    width: min(1040px, 92vw);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.13;
    background:
      repeating-radial-gradient(circle, transparent 0 42px, rgba(34, 211, 238, 0.09) 43px 44px, transparent 45px 82px),
      repeating-conic-gradient(from 0deg, rgba(167, 139, 250, 0.08) 0deg 0.55deg, transparent 0.75deg 14deg);
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -47%, 0) rotateX(66deg) rotateZ(4deg) scale(0.9);
    animation: none;
  }

  .pg-tunnel-lines::before {
    content: '';
    position: absolute;
    inset: 17%;
    border-radius: 50%;
    border: 1px solid rgba(34, 211, 238, 0.16);
    opacity: 0.46;
  }

  .pg-tunnel-lines-b {
    width: min(1180px, 106vw);
    opacity: 0.08;
    transform: translate3d(-50%, -47%, 0) rotateX(67deg) rotateZ(-9deg) scale(0.78);
    background:
      repeating-radial-gradient(circle, transparent 0 56px, rgba(167, 139, 250, 0.075) 57px 58px, transparent 59px 108px),
      repeating-conic-gradient(from 7deg, rgba(34, 211, 238, 0.07) 0deg 0.45deg, transparent 0.65deg 16deg);
  }

  @keyframes pgTunnelRush {
    0%, 100% { transform: translate3d(-50%, -47%, 0) rotateX(66deg) rotateZ(2deg) scale(0.88); opacity: 0.11; }
    50% { transform: translate3d(-50%, -47%, 0) rotateX(66deg) rotateZ(5deg) scale(0.9); opacity: 0.14; }
  }

  @keyframes pgTunnelRushAlt {
    0%, 100% { transform: translate3d(-50%, -47%, 0) rotateX(67deg) rotateZ(-10deg) scale(0.76); opacity: 0.07; }
    50% { transform: translate3d(-50%, -47%, 0) rotateX(67deg) rotateZ(-7deg) scale(0.78); opacity: 0.09; }
  }

  @keyframes pgTunnelPlanePull {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 0, 176px 0, 0 120px; }
  }

  .pg-holo-ring {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: clamp(320px, 38vw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    right: 4%;
    top: 13%;
    opacity: 0.12;
    mix-blend-mode: screen;
    border: 1px solid rgba(34, 211, 238, 0.1);
    background:
      radial-gradient(circle, transparent 0 54%, rgba(34, 211, 238, 0.08) 55%, transparent 57%, transparent 65%, rgba(167, 139, 250, 0.07) 66%, transparent 68%),
      conic-gradient(from 90deg, transparent 0deg, rgba(34, 211, 238, 0.12) 20deg, transparent 42deg, rgba(167, 139, 250, 0.1) 96deg, transparent 126deg, rgba(34, 211, 238, 0.08) 210deg, transparent 252deg, rgba(167, 139, 250, 0.08) 310deg, transparent 360deg);
    --pg-ring-rx: 64deg;
    --pg-ring-ry: -18deg;
    --pg-ring-rz: 0deg;
    transform: rotateX(var(--pg-ring-rx)) rotateY(var(--pg-ring-ry)) rotateZ(var(--pg-ring-rz));
    transform-origin: 50% 50%;
    animation:
      pgHoloRingSpin 96s linear infinite,
      pgHoloRingPulse 28s ease-in-out infinite;
    will-change: transform, opacity;
  }

  .pg-holo-ring::before,
  .pg-holo-ring::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
  }

  .pg-holo-ring::before {
    inset: 8%;
    border: 1px solid rgba(34, 211, 238, 0.12);
  }

  .pg-holo-ring::after {
    inset: 22%;
    border: 1px solid rgba(167, 139, 250, 0.1);
    background: radial-gradient(circle, transparent 0 62%, rgba(34, 211, 238, 0.09) 63%, transparent 66%);
  }

  .pg-holo-ring-secondary {
    right: 18%;
    top: 24%;
    width: clamp(220px, 25vw, 430px);
    opacity: 0.06;
    animation-duration: 120s, 36s;
    animation-direction: reverse, normal;
    --pg-ring-rx: 68deg;
    --pg-ring-ry: 18deg;
    --pg-ring-rz: 22deg;
  }

  @keyframes pgHoloRingSpin {
    0% { transform: rotateX(var(--pg-ring-rx)) rotateY(var(--pg-ring-ry)) rotateZ(var(--pg-ring-rz)) scale(1); }
    100% { transform: rotateX(var(--pg-ring-rx)) rotateY(var(--pg-ring-ry)) rotateZ(calc(var(--pg-ring-rz) + 360deg)) scale(1); }
  }

  @keyframes pgHoloRingPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.14; }
  }

  .pg-grid-floor {
    position: absolute;
    left: 50%;
    bottom: -15vh;
    z-index: 2;
    width: max(160vw, 1440px);
    height: 72vh;
    transform: translateX(-50%) rotateX(64deg);
    transform-origin: 50% 100%;
    background-image:
      linear-gradient(rgba(34, 211, 238, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(167, 139, 250, 0.1) 1px, transparent 1px),
      linear-gradient(180deg, rgba(34, 211, 238, 0.08), transparent 42%, rgba(2, 6, 23, 0.3));
    background-size: 72px 72px, 72px 72px, 100% 100%;
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.48) 58%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.48) 58%, transparent 100%);
    opacity: 0.32;
    animation: pgGridFloorDrift 120s linear infinite;
    will-change: background-position;
  }

  .pg-grid-floor::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.28;
    animation: none;
  }

  .pg-grid-floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 48% 18% at 50% 34%, rgba(34, 211, 238, 0.28), transparent 62%),
      linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.22) 50%, transparent 100%);
    opacity: 0.32;
  }

  @keyframes pgGridFloorDrift {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 72px, 72px 0, 0 0; }
  }

  @keyframes pgGridFineDrift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 18px, 18px 0; }
  }

  .pg-glow-orb {
    position: absolute;
    z-index: 1;
    width: clamp(300px, 36vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(92px);
    opacity: 0.16;
    mix-blend-mode: screen;
    animation: pgGlowOrbDrift 90s ease-in-out infinite;
    will-change: transform;
  }

  .pg-glow-orb-cyan {
    top: -18%;
    right: -9%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.74) 0%, rgba(34, 211, 238, 0.18) 42%, transparent 70%);
  }

  .pg-glow-orb-purple {
    left: -12%;
    bottom: -14%;
    animation-delay: -14s;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.68) 0%, rgba(168, 85, 247, 0.18) 44%, transparent 72%);
  }

  .pg-glow-orb-blue {
    top: 34%;
    left: 42%;
    width: clamp(240px, 28vw, 460px);
    animation-delay: -25s;
    opacity: 0.14;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.54) 0%, rgba(99, 102, 241, 0.16) 46%, transparent 74%);
  }

  @keyframes pgGlowOrbDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(8px, -6px, 0) scale(1.015); }
  }

  .pg-bg-particles {
    position: absolute;
    inset: -8%;
    z-index: 4;
    opacity: 0.14;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(125, 211, 252, 0.6) 0 1px, transparent 1.9px),
      radial-gradient(circle at 72% 26%, rgba(196, 181, 253, 0.5) 0 1px, transparent 1.8px),
      radial-gradient(circle at 38% 78%, rgba(34, 211, 238, 0.44) 0 1px, transparent 1.7px),
      radial-gradient(circle at 88% 72%, rgba(167, 139, 250, 0.4) 0 1px, transparent 1.8px);
    background-size: 360px 280px, 420px 320px, 300px 260px, 460px 340px;
    animation: pgParticlesFloat 140s linear infinite;
  }

  .pg-bg-particles::before,
  .pg-bg-particles::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    opacity: 0.42;
  }

  .pg-bg-particles::before {
    background-image:
      radial-gradient(circle at 24% 32%, rgba(226, 232, 240, 0.42) 0 0.8px, transparent 1.8px),
      radial-gradient(circle at 82% 58%, rgba(103, 232, 249, 0.42) 0 0.9px, transparent 1.8px);
    background-size: 520px 420px, 460px 360px;
    animation: none;
  }

  .pg-bg-particles::after {
    background-image:
      radial-gradient(circle at 42% 22%, rgba(216, 180, 254, 0.34) 0 0.8px, transparent 1.6px),
      radial-gradient(circle at 66% 86%, rgba(125, 211, 252, 0.34) 0 0.8px, transparent 1.6px);
    background-size: 620px 500px, 540px 430px;
    animation: none;
  }

  @keyframes pgParticlesFloat {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-12px, -18px, 0); }
  }

  @keyframes pgParticlesFloatReverse {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(10px, -14px, 0); }
  }

  .pg-depth-particles-far,
  .pg-depth-particles-near {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background-repeat: repeat;
    mix-blend-mode: screen;
    will-change: transform;
  }

  .pg-depth-particles-far {
    z-index: 3;
    opacity: 0.065;
    background-image:
      radial-gradient(circle at 18% 28%, rgba(125, 211, 252, 0.46) 0 0.65px, transparent 1.5px),
      radial-gradient(circle at 66% 18%, rgba(196, 181, 253, 0.36) 0 0.65px, transparent 1.5px),
      radial-gradient(circle at 84% 72%, rgba(34, 211, 238, 0.34) 0 0.6px, transparent 1.4px);
    background-size: 520px 420px, 660px 520px, 760px 560px;
    animation: pgDepthParticlesFar 180s linear infinite;
  }

  .pg-depth-particles-near {
    display: none;
    z-index: 6;
    opacity: 0.04;
    background-image:
      radial-gradient(circle at 16% 64%, rgba(226, 232, 240, 0.38) 0 1.25px, transparent 2.6px),
      radial-gradient(circle at 72% 34%, rgba(34, 211, 238, 0.38) 0 1.2px, transparent 2.5px),
      radial-gradient(circle at 42% 18%, rgba(167, 139, 250, 0.32) 0 1.1px, transparent 2.4px);
    background-size: 720px 560px, 860px 640px, 980px 700px;
    animation: none;
  }

  @keyframes pgDepthParticlesFar {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-8px, -12px, 0); }
  }

  @keyframes pgDepthParticlesNear {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(46px, -68px, 0); }
  }

  .pg-float-cube {
    display: none;
    position: absolute;
    z-index: 7;
    width: 58px;
    height: 58px;
    pointer-events: none;
    transform-style: preserve-3d;
    opacity: 0.08;
    border: 1px solid rgba(34, 211, 238, 0.18);
    background:
      linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(167, 139, 250, 0.05)),
      linear-gradient(180deg, rgba(2, 6, 23, 0.12), rgba(2, 6, 23, 0.34));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation: pgFloatCube 120s ease-in-out infinite;
    --pg-cube-x: 0px;
    --pg-cube-y: 0px;
    --pg-cube-rx: 58deg;
    --pg-cube-ry: -28deg;
    --pg-cube-rz: 12deg;
  }

  .pg-control-bg.pg-bg-experimental .pg-float-cube {
    display: block;
  }

  .pg-float-cube::before,
  .pg-float-cube::after {
    content: '';
    position: absolute;
    pointer-events: none;
  }

  .pg-float-cube::before {
    inset: 9px -10px -10px 9px;
    border: 1px solid rgba(167, 139, 250, 0.12);
    background: rgba(34, 211, 238, 0.03);
    transform: translateZ(-22px);
  }

  .pg-float-cube::after {
    inset: 0;
    background:
      linear-gradient(135deg, transparent 0 46%, rgba(34, 211, 238, 0.18) 47%, transparent 49%),
      radial-gradient(circle at 78% 18%, rgba(167, 139, 250, 0.22), transparent 26%);
    opacity: 0.48;
  }

  .pg-float-cube-a {
    top: 18%;
    right: 18%;
    --pg-cube-x: 0px;
    --pg-cube-y: 0px;
    --pg-cube-rx: 62deg;
    --pg-cube-ry: -34deg;
    --pg-cube-rz: 18deg;
  }

  .pg-float-cube-b {
    top: 57%;
    right: 9%;
    width: 42px;
    height: 42px;
    opacity: 0.1;
    animation-delay: -16s;
    animation-duration: 46s;
    --pg-cube-x: 0px;
    --pg-cube-y: 0px;
    --pg-cube-rx: 48deg;
    --pg-cube-ry: 26deg;
    --pg-cube-rz: -12deg;
  }

  .pg-float-cube-c {
    top: 30%;
    left: 16%;
    width: 50px;
    height: 50px;
    opacity: 0.09;
    animation-delay: -28s;
    animation-duration: 52s;
    --pg-cube-x: 0px;
    --pg-cube-y: 0px;
    --pg-cube-rx: 66deg;
    --pg-cube-ry: -18deg;
    --pg-cube-rz: -20deg;
  }

  @keyframes pgFloatCube {
    0%, 100% {
      transform:
        translate3d(var(--pg-cube-x), var(--pg-cube-y), 0)
        rotateX(var(--pg-cube-rx))
        rotateY(var(--pg-cube-ry))
        rotateZ(var(--pg-cube-rz));
    }
    50% {
      transform:
        translate3d(calc(var(--pg-cube-x) + 18px), calc(var(--pg-cube-y) - 26px), 0)
        rotateX(calc(var(--pg-cube-rx) + 8deg))
        rotateY(calc(var(--pg-cube-ry) - 10deg))
        rotateZ(calc(var(--pg-cube-rz) + 6deg));
    }
  }

  .pg-control-bg.pg-bg-lite .pg-depth-particles-near,
  .pg-control-bg.pg-bg-lite .pg-float-cube,
  .pg-control-bg.pg-bg-lite .pg-scan-line,
  .pg-control-bg.pg-bg-lite .pg-data-pulse {
    display: none;
  }

  .pg-control-bg.pg-bg-lite .pg-depth-tunnel::after,
  .pg-control-bg.pg-bg-lite .pg-tunnel-lines,
  .pg-control-bg.pg-bg-lite .pg-depth-particles-near,
  .pg-control-bg.pg-bg-lite .pg-depth-particles-far,
  .pg-control-bg.pg-bg-lite .pg-grid-floor,
  .pg-control-bg.pg-bg-lite .pg-grid-floor::before,
  .pg-control-bg.pg-bg-lite .pg-grid-canvas,
  .pg-control-bg.pg-bg-lite .pg-bg-particles,
  .pg-control-bg.pg-bg-lite .pg-bg-particles::before,
  .pg-control-bg.pg-bg-lite .pg-bg-particles::after,
  .pg-control-bg.pg-bg-lite .pg-light-wave {
    animation: none;
  }

  .pg-control-bg.pg-bg-lite .pg-holo-ring {
    animation-duration: 120s, 40s;
  }

  .pg-control-bg.pg-bg-lite .pg-holo-ring-secondary {
    opacity: 0.04;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-bg-base {
    opacity: 0.72;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-grid-canvas {
    opacity: 0.14;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-scan-line,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-waves-container {
    opacity: 0.06;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-grid-floor {
    opacity: 0.12;
  }

  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-depth-tunnel,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-tunnel-lines,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-holo-ring,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-bg-particles,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-depth-particles-far,
  body:not(.pg-public-shell):not(.pg-login-page):not(.pg-dev-login-page):not(.pg-docs-page):not(.pg-legal-page):not(.pg-homepage-3d-lab-page) .pg-glow-orb {
    opacity: 0.06;
  }

  .pg-control-bg.pg-bg-experimental:not(.pg-bg-lite) .pg-depth-particles-near {
    display: block;
    animation: pgDepthParticlesNear 180s linear infinite;
  }

  .pg-control-bg.pg-bg-experimental:not(.pg-bg-lite) .pg-float-cube {
    display: block;
  }

  /* Layer 0: Scanning Line Effect */
  .pg-scan-line {
    position: absolute;
    top: -20%;
    left: -50%;
    z-index: 5;
    width: 200%;
    height: 40%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(34, 211, 238, 0.012) 45%,
      rgba(34, 211, 238, 0.035) 50%,
      rgba(34, 211, 238, 0.012) 55%,
      transparent 100%
    );
    opacity: 0.22;
    animation: pgScanLine 72s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes pgScanLine {
    0% { top: -30%; opacity: 0; }
    18% { opacity: 0.12; }
    82% { opacity: 0.1; }
    100% { top: 120%; opacity: 0; }
  }

  /* Layer A: Dark base gradient with slow movement */
  .pg-bg-base {
    position: absolute;
    inset: -50%;
    z-index: 0;
    width: 200%;
    height: 200%;
    background: 
      radial-gradient(ellipse 100% 80% at 20% 20%, rgba(0, 224, 255, 0.08), transparent 50%),
      radial-gradient(ellipse 80% 60% at 80% 80%, rgba(0, 255, 163, 0.06), transparent 50%),
      linear-gradient(180deg, #0a0f1c 0%, #0d1525 50%, #0a1628 100%);
    animation: pgBaseShift 120s ease-in-out infinite;
  }

  @keyframes pgBaseShift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-0.6%, 0.3%) scale(1.004); }
    50% { transform: translate(0.4%, -0.3%) scale(1); }
    75% { transform: translate(-0.4%, 0.5%) scale(1.003); }
  }

  /* Layer B: Network Grid Background */
  .pg-grid-canvas {
    position: absolute;
    inset: -50%;
    z-index: 2;
    width: 200%;
    height: 200%;
    background-image: 
      linear-gradient(rgba(0, 224, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 224, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: pgGridMove 260s linear infinite;
  }

  @keyframes pgGridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(24px, 24px); }
  }

  /* Layer C: Animated Light Waves */
  .pg-waves-container {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    opacity: 0.12;
  }

  .pg-light-wave {
    position: absolute;
    width: 300%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 224, 255, 0.3), rgba(0, 255, 163, 0.2), rgba(0, 224, 255, 0.3), transparent);
    opacity: 0.34;
  }

  .pg-wave-1 {
    top: 20%;
    left: -100%;
    animation: pgWaveMove1 140s linear infinite;
  }

  .pg-wave-2 {
    top: 50%;
    left: -100%;
    animation: pgWaveMove2 160s linear infinite;
    opacity: 0.24;
  }

  .pg-wave-3 {
    top: 75%;
    left: -100%;
    animation: pgWaveMove3 150s linear infinite;
    opacity: 0.28;
  }

  @keyframes pgWaveMove1 {
    0% { transform: translateX(0) rotate(-2deg); }
    100% { transform: translateX(12%) rotate(-2deg); }
  }

  @keyframes pgWaveMove2 {
    0% { transform: translateX(0) rotate(1deg); }
    100% { transform: translateX(14%) rotate(1deg); }
  }

  @keyframes pgWaveMove3 {
    0% { transform: translateX(0) rotate(-1deg); }
    100% { transform: translateX(13%) rotate(-1deg); }
  }

  /* Layer D: Animated Nodes */
  .pg-nodes-container {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
  }

  .pg-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #00E0FF 0%, rgba(0, 224, 255, 0.4) 50%, transparent 70%);
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.28);
    animation: pgNodeGlow 18s ease-in-out infinite;
    opacity: 0.22;
  }

  .pg-node-static {
    animation: pgNodePulse 22s ease-in-out infinite;
  }

  .pg-node-drift {
    animation: pgNodeDrift 100s ease-in-out infinite;
  }

  @keyframes pgNodeGlow {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50% { opacity: 0.34; transform: scale(1.08); }
  }

  @keyframes pgNodePulse {
    0%, 100% { opacity: 0.16; transform: scale(1); }
    50% { opacity: 0.28; transform: scale(1.06); }
  }

  @keyframes pgNodeDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.16; }
    50% { transform: translate(8px, -6px); opacity: 0.24; }
  }

  /* Layer 3: Data Pulses */
  .pg-pulse-container {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
  }

  .pg-data-pulse {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00E0FF, transparent);
    opacity: 0;
    animation: pgDataFlow 90s ease-in-out infinite;
  }

  @keyframes pgDataFlow {
    0% { transform: translateX(-10vw); opacity: 0; }
    25% { opacity: 0.08; }
    75% { opacity: 0.08; }
    100% { transform: translateX(30vw); opacity: 0; }
  }

  /* Layer 4: Ambient Glow Shapes */
  .pg-ambient-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(82px);
    opacity: 0.07;
    animation: pgAmbientShift 120s ease-in-out infinite;
  }

  .pg-ambient-cyan {
    background: radial-gradient(circle, #00E0FF 0%, transparent 70%);
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
    animation-delay: 0s;
  }

  .pg-ambient-teal {
    background: radial-gradient(circle, #00FFA3 0%, transparent 70%);
    width: 500px;
    height: 500px;
    bottom: -150px;
    left: -100px;
    animation-delay: -10s;
  }

  .pg-ambient-purple {
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
    width: 400px;
    height: 400px;
    top: 40%;
    left: 30%;
    animation-delay: -20s;
  }

  .pg-ambient-green {
    background: radial-gradient(circle, #00FFA3 0%, transparent 70%);
    width: 450px;
    height: 450px;
    bottom: 20%;
    right: 10%;
    animation-delay: -30s;
    opacity: 0.08;
  }

  @keyframes pgAmbientShift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.07; }
    50% { transform: translate(10px, -8px) scale(1.015); opacity: 0.09; }
  }

  /* Futuristic Color System */
  :root {
    --pg-cyan: #00E0FF;
    --pg-cyan-glow: rgba(0, 224, 255, 0.4);
    --pg-teal: #00FFA3;
    --pg-teal-glow: rgba(0, 255, 163, 0.4);
    --pg-guardian-glow: 0 0 30px rgba(0, 224, 255, 0.3), 0 0 60px rgba(0, 224, 255, 0.1);
  }

  /* Futuristic Card Design */
  .pg-guardian-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(5, 10, 20, 0.95) 100%);
    border: 1px solid rgba(0, 224, 255, 0.15);
    border-radius: 20px;
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 0 0 1px rgba(0, 224, 255, 0.05);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  .pg-guardian-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 224, 255, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .pg-guardian-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(0, 224, 255, 0.08), transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }

  .pg-guardian-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 224, 255, 0.3);
    box-shadow: 
      0 30px 60px -15px rgba(0, 0, 0, 0.7),
      var(--pg-guardian-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-guardian-card:hover::before {
    opacity: 1;
  }

  .pg-guardian-card:hover::after {
    opacity: 1;
  }

  /* Futuristic Stats Card */
  .pg-stat-guardian {
    padding: 24px;
    min-height: 180px;
    position: relative;
  }

  .pg-stat-guardian .pg-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.2), rgba(0, 255, 163, 0.1));
    border: 1px solid rgba(0, 224, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.2);
  }

  .pg-stat-guardian .pg-stat-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--pg-cyan);
  }

  .pg-stat-guardian .pg-stat-icon.threats {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
  }

  .pg-stat-guardian .pg-stat-icon.threats svg {
    stroke: #ef4444;
  }

  .pg-stat-guardian .pg-stat-icon.success {
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.1));
    border-color: rgba(0, 255, 163, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 163, 0.2);
  }

  .pg-stat-guardian .pg-stat-icon.success svg {
    stroke: var(--pg-teal);
  }

  .pg-stat-guardian .pg-stat-value {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #f8fafc 0%, var(--pg-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Hero Section Animations */
  .pg-hero-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    background: linear-gradient(135deg, #ffffff 0%, var(--pg-cyan) 50%, var(--pg-teal) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pgTitleGlow 4s ease-in-out infinite;
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.3);
  }

  @keyframes pgTitleGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 20px rgba(0, 224, 255, 0.3)); }
    50% { filter: brightness(1.1) drop-shadow(0 0 30px rgba(0, 224, 255, 0.5)); }
  }

  .pg-hero-subtitle {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--pg-cyan), var(--pg-teal), var(--pg-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: pgSubtitleFlow 3s linear infinite;
  }

  @keyframes pgSubtitleFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  /* Live Status Indicator */
  .pg-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 255, 163, 0.1);
    border: 1px solid rgba(0, 255, 163, 0.3);
  }

  .pg-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pg-teal);
    box-shadow: 0 0 10px var(--pg-teal), 0 0 20px var(--pg-teal-glow);
    animation: pgLivePulse 1.5s ease-in-out infinite;
  }

  @keyframes pgLivePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
  }

  .pg-live-indicator span {
    font-size: 12px;
    font-weight: 700;
    color: var(--pg-teal);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* Quick Action Buttons */
  .pg-action-guardian {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.15), rgba(0, 255, 163, 0.1));
    border: 1px solid rgba(0, 224, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.15);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  .pg-action-guardian::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .pg-action-guardian:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 224, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 224, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .pg-action-guardian:hover::before {
    opacity: 1;
  }

  .pg-action-guardian.primary {
    background: linear-gradient(135deg, var(--pg-cyan), #00b8d4);
    border-color: var(--pg-cyan);
    box-shadow: 0 0 30px var(--pg-cyan-glow);
  }

  .pg-action-guardian.primary:hover {
    box-shadow: 0 0 40px var(--pg-cyan-glow), 0 15px 40px rgba(0, 0, 0, 0.4);
  }

  .pg-action-guardian svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
  }

  /* System Card */
  .pg-system-guardian {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 224, 255, 0.1);
    transition: all 0.3s ease;
  }

  .pg-system-guardian:hover {
    background: rgba(20, 30, 55, 0.8);
    border-color: rgba(0, 224, 255, 0.25);
    transform: translateX(4px);
  }

  .pg-system-guardian-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.15), rgba(0, 255, 163, 0.1));
    border: 1px solid rgba(0, 224, 255, 0.2);
    flex-shrink: 0;
  }

  .pg-system-guardian-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--pg-cyan);
    stroke-width: 2;
  }

  .pg-system-guardian-content {
    flex: 1;
    min-width: 0;
  }

  .pg-system-guardian-title {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 4px;
  }

  .pg-system-guardian-desc {
    font-size: 13px;
    color: rgba(148, 163, 184, 0.8);
    line-height: 1.4;
  }

  /* Activity Feed */
  .pg-feed-guardian {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .pg-feed-item-guardian {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(0, 224, 255, 0.08);
    animation: pgFeedSlideIn 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
  }

  @keyframes pgFeedSlideIn {
    to { opacity: 1; transform: translateY(0); }
  }

  .pg-feed-item-guardian:nth-child(1) { animation-delay: 0.1s; }
  .pg-feed-item-guardian:nth-child(2) { animation-delay: 0.2s; }
  .pg-feed-item-guardian:nth-child(3) { animation-delay: 0.3s; }
  .pg-feed-item-guardian:nth-child(4) { animation-delay: 0.4s; }
  .pg-feed-item-guardian:nth-child(5) { animation-delay: 0.5s; }

  .pg-feed-icon-guardian {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 224, 255, 0.1);
    border: 1px solid rgba(0, 224, 255, 0.2);
  }

  .pg-feed-icon-guardian svg {
    width: 16px;
    height: 16px;
    stroke: var(--pg-cyan);
  }

  .pg-feed-icon-guardian.alert {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
  }

  .pg-feed-icon-guardian.alert svg {
    stroke: #ef4444;
  }

  .pg-feed-icon-guardian.success {
    background: rgba(0, 255, 163, 0.1);
    border-color: rgba(0, 255, 163, 0.2);
  }

  .pg-feed-icon-guardian.success svg {
    stroke: var(--pg-teal);
  }

  .pg-feed-content-guardian {
    flex: 1;
    min-width: 0;
  }

  .pg-feed-title-guardian {
    font-size: 14px;
    font-weight: 600;
    color: #f8fafc;
    margin-bottom: 4px;
  }

  .pg-feed-time-guardian {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.6);
  }

  /* Quick Actions Panel */
  .pg-quick-panel {
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(5, 10, 20, 0.98));
    border: 1px solid rgba(0, 224, 255, 0.15);
    box-shadow: 0 0 30px rgba(0, 224, 255, 0.1);
  }

  .pg-quick-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pg-quick-panel-title::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--pg-cyan), var(--pg-teal));
    border-radius: 2px;
  }

  .pg-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pg-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 224, 255, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .pg-quick-item:hover {
    background: rgba(0, 224, 255, 0.08);
    border-color: rgba(0, 224, 255, 0.3);
    transform: translateY(-2px);
  }

  .pg-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.2), rgba(0, 255, 163, 0.1));
    border: 1px solid rgba(0, 224, 255, 0.2);
  }

  .pg-quick-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--pg-cyan);
  }

  .pg-quick-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.9);
    text-align: center;
  }

  /* Sidebar Futuristic */
  .pg-sidebar-guardian {
    background: linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(2, 5, 12, 0.99) 100%) !important;
    border-right: 1px solid rgba(0, 224, 255, 0.1);
    box-shadow: inset -1px 0 0 rgba(0, 224, 255, 0.05);
  }

  /* Guardian Sidebar Header */
  .pg-sidebar-guardian .pg-sidebar-header {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 12px;
    background: linear-gradient(180deg, rgba(0, 224, 255, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 224, 255, 0.1);
    padding: 20px 16px;
  }

  .pg-sidebar-guardian .pg-sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.2), rgba(0, 255, 163, 0.1));
    border: 1px solid rgba(0, 224, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 224, 255, 0.12);
  }

  .pg-sidebar-guardian .pg-sidebar-logo-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
  }

  .pg-sidebar-guardian .pg-sidebar-logo-link:hover,
  .pg-sidebar-guardian .pg-sidebar-logo-link:focus-visible {
    border-color: rgba(34, 211, 238, 0.58);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.26), rgba(20, 184, 166, 0.14));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34), 0 0 18px rgba(34, 211, 238, 0.2);
    outline: none;
  }

  .pg-sidebar-guardian .pg-sidebar-logo .pg-logo,
  .pg-sidebar-guardian .pg-sidebar-logo img {
    width: 28px !important;
    height: 28px !important;
    min-width: 0;
    max-width: 28px;
    object-fit: contain;
  }

  .pg-sidebar-guardian .pg-sidebar-header > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 54px);
    overflow: hidden;
  }

  .pg-sidebar-guardian .pg-sidebar-header .pg-hero-title {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.98rem, 0.72rem + 0.45vw, 1.1rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-shadow: none;
    animation: none;
  }

  .pg-sidebar-guardian .pg-sidebar-header .pg-hero-title + div {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.09em !important;
  }

  .pg-nav-guardian {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    color: rgba(148, 163, 184, 0.75);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin: 4px 0;
  }

  .pg-nav-guardian > span:not(.pg-nav-icon-guardian) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-nav-guardian::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--pg-cyan), var(--pg-teal));
    border-radius: 0 4px 4px 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pg-nav-guardian:hover {
    background: rgba(0, 224, 255, 0.06);
    color: #f8fafc;
    transform: translateX(2px);
  }

  .pg-nav-guardian:hover::before {
    height: 20px;
  }

  .pg-nav-guardian.active {
    background: linear-gradient(90deg, rgba(0, 224, 255, 0.12) 0%, rgba(0, 255, 163, 0.06) 100%);
    color: #f8fafc;
    border: 1px solid rgba(0, 224, 255, 0.25);
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.1);
  }

  .pg-nav-guardian.active::before {
    height: 28px;
    box-shadow: 0 0 12px var(--pg-cyan-glow);
    animation: pgNavPulse 2s ease-in-out infinite;
  }

  @keyframes pgNavPulse {
    0%, 100% { box-shadow: 0 0 8px var(--pg-cyan-glow); }
    50% { box-shadow: 0 0 16px var(--pg-cyan-glow), 0 0 24px rgba(0, 224, 255, 0.3); }
  }

  .pg-nav-icon-guardian {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 224, 255, 0.08);
    border: 1px solid rgba(0, 224, 255, 0.12);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pg-nav-guardian:hover .pg-nav-icon-guardian,
  .pg-nav-guardian.active .pg-nav-icon-guardian {
    background: linear-gradient(135deg, rgba(0, 224, 255, 0.2), rgba(0, 255, 163, 0.12));
    border-color: rgba(0, 224, 255, 0.35);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.03);
  }

  .pg-nav-icon-guardian i,
  .pg-nav-icon-guardian svg {
    width: 16px;
    height: 16px;
    stroke: var(--pg-cyan);
    stroke-width: 2;
    color: var(--pg-cyan);
    transition: all 0.25s ease;
  }

  .pg-nav-guardian.active .pg-nav-icon-guardian i,
  .pg-nav-guardian.active .pg-nav-icon-guardian svg {
    stroke: var(--pg-teal);
    color: var(--pg-teal);
    filter: drop-shadow(0 0 4px var(--pg-teal-glow));
  }

  /* Active indicator dot */
  .pg-nav-guardian.active::after {
    content: '';
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pg-teal);
    box-shadow: 0 0 8px var(--pg-teal-glow);
    animation: pgDotPulse 2s ease-in-out infinite;
  }

  @keyframes pgDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
  }

  @media (min-width: 1024px) {
    .pg-layout-shell {
      --pg-sidebar-collapsed: 76px;
      --pg-sidebar-expanded: 248px;
      --pg-sidebar-rail-size: 48px;
      --pg-sidebar-rail-icon: 36px;
      --pg-sidebar-rail-gap: 8px;
      --sidebar-width: var(--pg-sidebar-collapsed);
      --pg-sidebar-content-gap: clamp(10px, 1.1vw, 16px);
      overflow-x: clip;
    }

    .pg-layout-shell > .pg-main {
      margin-left: var(--pg-sidebar-collapsed) !important;
      padding-left: max(var(--pg-sidebar-content-gap), env(safe-area-inset-left, 0px));
    }

    .pg-sidebar-shell {
      position: fixed !important;
      inset: 0 auto 0 0;
      width: var(--pg-sidebar-collapsed);
      min-width: var(--pg-sidebar-collapsed);
      max-width: var(--pg-sidebar-expanded);
      background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.13), transparent 26%),
        linear-gradient(180deg, rgba(3, 8, 20, 0.99), rgba(2, 6, 17, 1)) !important;
      border-right-color: rgba(34, 211, 238, 0.14);
      box-shadow:
        inset -1px 0 0 rgba(34, 211, 238, 0.06),
        18px 0 44px -36px rgba(2, 6, 23, 0.9);
      transition:
        width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        min-width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
      transform: translateZ(0);
      z-index: 9400;
      will-change: width;
    }

    .pg-sidebar-shell:hover,
    .pg-sidebar-shell:focus-within {
      width: var(--pg-sidebar-expanded);
      min-width: var(--pg-sidebar-expanded);
      border-right-color: rgba(34, 211, 238, 0.22);
      z-index: 9800;
      box-shadow:
        inset -1px 0 0 rgba(34, 211, 238, 0.09),
        24px 0 60px -42px rgba(34, 211, 238, 0.32),
        22px 0 54px -42px rgba(2, 6, 23, 1);
    }

    .pg-sidebar-shell .pg-sidebar-header {
      min-height: 72px;
      padding: 14px 15px;
      gap: 11px;
      justify-content: flex-start;
      transition:
        padding 0.28s ease,
        gap 0.28s ease,
        justify-content 0.28s ease;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-header {
      justify-content: center;
      padding-inline: 14px;
      gap: 0;
    }

    .pg-sidebar-shell .pg-sidebar-logo {
      width: 44px;
      height: 44px;
      min-width: 44px;
      flex-basis: 44px;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-logo {
      width: var(--pg-sidebar-rail-size);
      height: var(--pg-sidebar-rail-size);
      min-width: var(--pg-sidebar-rail-size);
      flex: 0 0 var(--pg-sidebar-rail-size);
      border-radius: 15px;
    }

    .pg-sidebar-shell .pg-sidebar-brand-copy,
    .pg-sidebar-shell .pg-sidebar-label,
    .pg-sidebar-shell .pg-nav-badge-soon {
      opacity: 0;
      max-width: 0;
      transform: translateX(-7px);
      pointer-events: none;
      transition:
        opacity 0.2s ease,
        max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.3s ease;
      white-space: nowrap;
    }

    .pg-sidebar-shell.pg-sidebar-guardian:not(:hover):not(:focus-within) .pg-sidebar-header > .pg-sidebar-brand-copy {
      width: 0;
      flex: 0 1 0;
      max-width: 0;
    }

    .pg-sidebar-shell:hover .pg-sidebar-brand-copy,
    .pg-sidebar-shell:focus-within .pg-sidebar-brand-copy,
    .pg-sidebar-shell:hover .pg-sidebar-label,
    .pg-sidebar-shell:focus-within .pg-sidebar-label,
    .pg-sidebar-shell:hover .pg-nav-badge-soon,
    .pg-sidebar-shell:focus-within .pg-nav-badge-soon {
      opacity: 1;
      max-width: 168px;
      transform: translateX(0);
      pointer-events: auto;
    }

    .pg-sidebar-shell.pg-sidebar-guardian:hover .pg-sidebar-header > .pg-sidebar-brand-copy,
    .pg-sidebar-shell.pg-sidebar-guardian:focus-within .pg-sidebar-header > .pg-sidebar-brand-copy {
      width: auto;
      flex: 1 1 auto;
      max-width: calc(100% - 54px);
    }

    .pg-sidebar-shell .pg-sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: stretch;
      padding: 12px 10px !important;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: auto;
    }

    .pg-sidebar-shell .pg-sidebar-link {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 44px;
      margin: 0;
      padding: 8px 10px;
      gap: 12px;
      border-radius: 14px;
      border: 1px solid transparent;
      outline: none;
      transition:
        transform 0.22s ease,
        background 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        color 0.24s ease;
    }

    .pg-sidebar-shell .pg-sidebar-link:hover {
      transform: none;
    }

    .pg-sidebar-shell .pg-sidebar-link:hover,
    .pg-sidebar-shell .pg-sidebar-link:focus-visible {
      background:
        linear-gradient(90deg, rgba(14, 165, 233, 0.13), rgba(45, 212, 191, 0.06));
      border-color: rgba(34, 211, 238, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link {
      width: var(--pg-sidebar-rail-size);
      height: var(--pg-sidebar-rail-size);
      min-height: var(--pg-sidebar-rail-size);
      flex: 0 0 var(--pg-sidebar-rail-size);
      justify-content: center;
      padding: 0;
      gap: 0;
      border-radius: 16px;
    }

    .pg-sidebar-shell .pg-sidebar-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.12;
    }

    .pg-sidebar-shell .pg-sidebar-link.active {
      background:
        radial-gradient(circle at 22% 50%, rgba(34, 211, 238, 0.2), transparent 34%),
        linear-gradient(90deg, rgba(14, 165, 233, 0.18), rgba(45, 212, 191, 0.09));
      border-color: rgba(34, 211, 238, 0.32);
      color: #f8fbff;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 26px -20px rgba(34, 211, 238, 0.52);
    }

    .pg-sidebar-shell .pg-sidebar-link.active,
    .pg-sidebar-shell .pg-sidebar-link.active:hover {
      transform: none;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link.active {
      background:
        radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.2), transparent 52%),
        rgba(14, 165, 233, 0.08);
      border-color: rgba(34, 211, 238, 0.24);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 18px rgba(34, 211, 238, 0.08);
    }

    .pg-sidebar-shell .pg-sidebar-link.active::before {
      width: 3px;
      height: 28px;
      background: linear-gradient(180deg, #67e8f9, #22d3ee 52%, #2dd4bf);
      box-shadow: 0 0 16px rgba(34, 211, 238, 0.72);
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link.active::before {
      left: 0;
      height: 24px;
    }

    .pg-sidebar-shell .pg-sidebar-link.active::after {
      top: 50%;
      right: 10px;
      translate: 0 -50%;
      background: #67e8f9;
      box-shadow: 0 0 12px rgba(34, 211, 238, 0.9);
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link.active::after {
      right: 6px;
      width: 5px;
      height: 5px;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-nav-badge-soon {
      margin-left: 0;
      padding-inline: 0;
      border-width: 0;
    }

    .pg-sidebar-shell .pg-sidebar-icon {
      width: var(--pg-sidebar-rail-icon);
      height: var(--pg-sidebar-rail-icon);
      flex: 0 0 var(--pg-sidebar-rail-icon);
      border-radius: 12px;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-nav {
      align-items: center;
      gap: var(--pg-sidebar-rail-gap);
      padding: 10px 14px !important;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-icon,
    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link:hover .pg-sidebar-icon,
    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-link.active .pg-sidebar-icon {
      transform: none;
    }

    .pg-sidebar-shell .pg-sidebar-footer {
      align-items: stretch;
      min-width: 0;
      max-width: 100%;
      padding: 10px !important;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-footer {
      align-items: center;
      padding: 10px 14px !important;
    }

    .pg-sidebar-shell:hover .pg-sidebar-footer,
    .pg-sidebar-shell:focus-within .pg-sidebar-footer {
      align-items: stretch;
      padding: 12px 14px !important;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-footer-card {
      align-items: center;
      gap: 0;
      width: var(--pg-sidebar-rail-size);
      max-width: var(--pg-sidebar-rail-size);
      padding: 6px;
      border-radius: 14px;
      overflow: hidden;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-footer-card {
      background:
        radial-gradient(circle at center, rgba(34, 211, 238, 0.13), transparent 62%),
        rgba(5, 10, 20, 0.78);
    }

    .pg-sidebar-shell:hover .pg-sidebar-footer-card,
    .pg-sidebar-shell:focus-within .pg-sidebar-footer-card {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-support {
      display: grid;
      place-items: center;
      width: 38px;
      max-width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 4px;
      border-radius: 14px;
      overflow: hidden;
    }

    .pg-sidebar-shell:hover .pg-sidebar-support,
    .pg-sidebar-shell:focus-within .pg-sidebar-support {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-support-body {
      display: none;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-support-visual {
      position: relative;
      top: auto;
      right: auto;
      width: 32px;
      height: 32px;
      animation: none;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-support-visual::after {
      inset: auto 5px 0;
      height: 10px;
    }

    .pg-sidebar-shell:not(:hover):not(:focus-within) .pg-sidebar-support-mascot {
      width: 32px;
      height: 32px;
      max-width: 32px;
      max-height: 32px;
    }
  }

  /* Guardian Page Hero */
  .pg-page-hero-guardian {
    border-color: rgba(34, 211, 238, 0.16) !important;
    box-shadow:
      0 26px 52px -40px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 0 32px rgba(34, 211, 238, 0.05) !important;
  }

  .pg-page-hero-guardian::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.015) 36%,
      rgba(15, 23, 42, 0.02) 100%
    ) !important;
  }

  .pg-page-hero-guardian::after {
    background:
      radial-gradient(circle at top right, rgba(34, 211, 238, 0.09) 0%, transparent 32%),
      linear-gradient(135deg, transparent 0%, rgba(34, 211, 238, 0.035) 100%) !important;
  }

  .pg-page-hero-guardian .pg-dashboard-title {
    color: #f8fbff;
  }

  .pg-page-hero-premium {
    border-color: rgba(251, 191, 36, 0.22) !important;
    box-shadow:
      0 26px 52px -40px rgba(2, 6, 23, 0.95),
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 36px rgba(245, 158, 11, 0.08) !important;
  }

  .pg-page-hero-premium::after {
    background:
      radial-gradient(circle at top right, rgba(251, 191, 36, 0.13) 0%, transparent 32%),
      linear-gradient(135deg, transparent 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  }

  .pg-page-hero-premium .pg-dashboard-title {
    background: linear-gradient(135deg, #fff9e8 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .pg-page-hero-guardian .pg-dashboard-description {
    color: rgba(148, 163, 184, 0.8) !important;
  }

  /* Guardian Card Styling */
  .pg-card-guardian {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(8, 15, 30, 0.98) 100%);
    border: 1px solid rgba(0, 224, 255, 0.12);
    border-radius: 16px;
    transition: all 0.3s ease;
  }

  .pg-card-guardian:hover {
    border-color: rgba(0, 224, 255, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 224, 255, 0.1);
    transform: translateY(-2px);
  }

  .pg-card-guardian-inner {
    background: rgba(0, 224, 255, 0.03);
    border: 1px solid rgba(0, 224, 255, 0.08);
    border-radius: 12px;
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .pg-hero-title {
      font-size: clamp(28px, 6vw, 40px);
    }

    .pg-overview-hero {
      grid-template-columns: 1fr;
    }

    .pg-overview-chip-row {
      grid-template-columns: repeat(3, 1fr);
    }

    .pg-overview-stat-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .pg-overview-analytics-grid {
      grid-template-columns: 1fr;
    }

    .pg-overview-chart-card:first-child,
    .pg-overview-chart-card:nth-child(2) {
      grid-column: span 1;
    }

    .pg-depth-tunnel,
    .pg-holo-ring,
    .pg-depth-particles-far,
    .pg-depth-particles-near,
    .pg-bg-particles,
    .pg-float-cube,
    .pg-scan-line,
    .pg-waves-container,
    .pg-pulse-container {
      display: none;
    }

    .pg-grid-floor,
    .pg-grid-canvas,
    .pg-glow-orb {
      animation: none;
    }

    .pg-grid-floor {
      opacity: 0.16;
    }
  }

  @media (max-width: 768px) {
    .pg-hero-title {
      font-size: clamp(24px, 7vw, 32px);
    }

    .pg-hero-subtitle {
      font-size: 14px;
      letter-spacing: 0.1em;
    }

    .pg-overview-chip-row {
      grid-template-columns: repeat(2, 1fr);
    }

    .pg-overview-stat-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .pg-quick-grid {
      grid-template-columns: 1fr;
    }

    .pg-grid-canvas {
      background-size: 50px 50px;
    }

    .pg-3d-bg {
      opacity: 0.22;
      perspective: none;
    }

    .pg-3d-bg::after {
      opacity: 0;
    }

    .pg-bg-base,
    .pg-node,
    .pg-node-static,
    .pg-node-drift {
      animation: none !important;
    }

    .pg-nodes-container {
      display: none;
    }

    .pg-depth-tunnel {
      display: none;
    }

    .pg-tunnel-lines {
      animation: none;
    }

    .pg-tunnel-lines-b {
      opacity: 0;
    }

    .pg-holo-ring {
      display: none;
    }

    .pg-holo-ring-secondary {
      display: none;
    }

    .pg-grid-floor {
      bottom: -22vh;
      height: 58vh;
      width: 180vw;
      background-size: 56px 56px, 56px 56px, 100% 100%;
      opacity: 0.08;
      animation: none;
    }

    .pg-grid-floor::after {
      opacity: 0.08;
    }

    .pg-glow-orb {
      width: clamp(220px, 64vw, 390px);
      filter: blur(40px);
      opacity: 0.06;
      animation: none;
    }

    .pg-bg-particles {
      display: none;
    }

    .pg-depth-particles-far {
      display: none;
    }

    .pg-depth-particles-near {
      display: none;
    }

    .pg-float-cube {
      display: none;
    }

    .pg-scan-line,
    .pg-waves-container,
    .pg-pulse-container {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .pg-overview-stat-grid {
      grid-template-columns: 1fr;
    }

    .pg-stat-guardian {
      min-height: 140px;
    }

    .pg-grid-floor {
      bottom: -26vh;
      height: 52vh;
      opacity: 0.06;
    }

    .pg-depth-tunnel {
      display: none;
    }

    .pg-tunnel-lines {
      width: 130vw;
    }

    .pg-holo-ring {
      display: none;
    }

    .pg-depth-particles-near {
      display: none;
    }

    .pg-node-drift,
    .pg-data-pulse {
      opacity: 0.16;
    }
  }

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    .pg-3d-bg,
    .pg-3d-bg::before,
    .pg-3d-bg::after,
    .pg-depth-tunnel,
    .pg-depth-tunnel::after,
    .pg-tunnel-lines,
    .pg-holo-ring,
    .pg-float-cube,
    .pg-depth-particles-near,
    .pg-depth-particles-far,
    .pg-grid-floor,
    .pg-grid-floor::before,
    .pg-grid-floor::after,
    .pg-glow-orb,
    .pg-bg-particles,
    .pg-bg-particles::before,
    .pg-bg-particles::after,
    .pg-scan-line,
    .pg-bg-base,
    .pg-light-wave,
    .pg-grid-canvas,
    .pg-node,
    .pg-node-static,
    .pg-node-drift,
    .pg-data-pulse,
    .pg-ambient-glow,
    .pg-hero-title,
    .pg-hero-subtitle,
    .pg-live-dot,
    .pg-feed-item-guardian {
      animation: none !important;
    }

    .pg-3d-bg {
      opacity: 0.54;
    }

    .pg-grid-floor {
      opacity: 0.2;
    }

    .pg-depth-tunnel {
      opacity: 0.2;
    }

    .pg-tunnel-lines-a {
      opacity: 0.14;
      transform: translate3d(-50%, -47%, 0) rotateX(66deg) rotateZ(4deg) scale(0.92);
    }

    .pg-tunnel-lines-b {
      opacity: 0.1;
      transform: translate3d(-50%, -47%, 0) rotateX(67deg) rotateZ(-8deg) scale(0.78);
    }

    .pg-holo-ring {
      opacity: 0.12;
    }

    .pg-bg-particles {
      opacity: 0.12;
    }

    .pg-depth-particles-far {
      opacity: 0.08;
    }

    .pg-depth-particles-near {
      opacity: 0.06;
    }

    .pg-glow-orb {
      opacity: 0.14;
      transform: none !important;
    }

    .pg-float-cube {
      opacity: 0.06;
    }

    .pg-ambient-glow {
      opacity: 0.08;
    }
  }


  html.pg-loader-booting {
    overflow: hidden;
  }

  body.pg-global-loader-active {
    overflow: hidden;
  }

  .pg-global-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--pg-loader-backdrop);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }

  .pg-global-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .pg-global-loader.is-hiding {
    pointer-events: none;
  }

  .pg-global-loader-panel {
    position: relative;
    width: min(100%, 352px);
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 28px 24px 22px;
    border-radius: 30px;
    border: 1px solid var(--pg-loader-border);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
      linear-gradient(180deg, rgba(7, 12, 24, 0.94) 0%, rgba(7, 12, 24, 0.66) 100%);
    box-shadow: var(--pg-loader-shadow);
    overflow: hidden;
    isolation: isolate;
    opacity: 0.9;
    transform: translateY(10px) scale(0.985);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
  }

  .pg-global-loader.is-visible .pg-global-loader-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .pg-global-loader-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at top, rgba(125, 211, 252, 0.1) 0%, transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%);
    pointer-events: none;
    z-index: -1;
  }

  .pg-global-loader-visual {
    position: relative;
    width: min(100%, 248px);
    min-height: 224px;
    display: grid;
    place-items: center;
  }

  .pg-global-loader-aura,
  .pg-global-loader-aura::before,
  .pg-global-loader-aura::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
  }

  .pg-global-loader-aura {
    width: 208px;
    height: 208px;
    background: radial-gradient(circle, var(--pg-loader-glow) 0%, rgba(34, 211, 238, 0.18) 32%, rgba(59, 130, 246, 0.08) 54%, transparent 76%);
    filter: blur(12px);
    animation: pgLoaderGlowPulse 3.8s ease-in-out infinite;
    opacity: 0.88;
  }

  .pg-global-loader-aura::before {
    width: 178px;
    height: 178px;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.34) 0%, rgba(14, 165, 233, 0.08) 56%, transparent 76%);
    filter: blur(18px);
    opacity: 0.72;
  }

  .pg-global-loader-aura::after {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, var(--pg-loader-glow-soft) 0%, transparent 68%);
    filter: blur(28px);
    opacity: 0.38;
  }

  .pg-global-loader-image-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
  }

  .pg-global-loader-image {
    position: relative;
    z-index: 1;
    width: min(74vw, 210px);
    max-width: 210px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 28px rgba(2, 6, 23, 0.3));
    animation: pgLoaderRobotFloat 4.8s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
  }

  .pg-global-loader-copy {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
  }

  .pg-global-loader-text {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(241, 245, 249, 0.96);
    text-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
    animation: pgLoaderTextBreathe 2.8s ease-in-out infinite;
  }

  .pg-global-loader-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 14px;
  }

  .pg-global-loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.34);
    opacity: 0.34;
    animation: pgLoaderDotPulse 1.4s ease-in-out infinite;
  }

  .pg-global-loader-dots span:nth-child(2) {
    animation-delay: 0.18s;
  }

  .pg-global-loader-dots span:nth-child(3) {
    animation-delay: 0.36s;
  }

  @keyframes pgLoaderRobotFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes pgLoaderGlowPulse {
    0%, 100% {
      transform: translate(-50%, -50%) scale(0.96);
      opacity: 0.76;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.05);
      opacity: 1;
    }
  }

  @keyframes pgLoaderTextBreathe {
    0%, 100% {
      opacity: 0.82;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes pgLoaderDotPulse {
    0%, 100% {
      transform: translateY(0) scale(0.9);
      opacity: 0.24;
    }
    40% {
      transform: translateY(-2px) scale(1.08);
      opacity: 0.96;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-global-loader,
    .pg-global-loader-image,
    .pg-global-loader-aura,
    .pg-global-loader-text,
    .pg-global-loader-dots span {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Neon Glass A dashboard shell */
  .pg-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .pg-command-bar.pg-dashboard-header {
    width: min(100% - 28px, 1560px);
    margin: clamp(3px, 0.45vw, 7px) auto 0;
    padding: 6px clamp(12px, 1.25vw, 18px) !important;
    border: 1px solid rgba(34, 211, 238, 0.14) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 18% -10%, rgba(34, 211, 238, 0.16), transparent 38%),
      radial-gradient(circle at 82% 0%, rgba(168, 85, 247, 0.12), transparent 34%),
      linear-gradient(135deg, rgba(7, 17, 31, 0.54), rgba(2, 6, 23, 0.42));
    box-shadow:
      0 18px 45px rgba(8, 13, 28, 0.28),
      0 0 28px rgba(34, 211, 238, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: visible;
  }

  .pg-command-bar.pg-dashboard-header::before {
    background:
      radial-gradient(ellipse 48% 18px at 50% 0%, rgba(34, 211, 238, 0.18), transparent 72%),
      linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.11), transparent) !important;
    opacity: 0.36 !important;
  }

  .pg-command-bar.pg-dashboard-header::after {
    display: none !important;
  }

  .pg-command-bar .pg-command-shell.pg-dashboard-header-body {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(0, auto) minmax(260px, 1fr) !important;
    grid-template-areas:
      "left title actions"
      "tabs tabs tabs" !important;
    align-items: center !important;
    gap: 5px 12px !important;
    width: 100%;
  }

  .pg-command-left {
    grid-area: left;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    justify-self: start;
  }

  .pg-command-center {
    display: contents;
    min-width: 0;
    text-align: center;
  }

  .pg-command-server-block {
    grid-area: title;
    display: grid;
    justify-items: center;
    justify-self: center;
    gap: 1px;
    min-width: 0;
    max-width: min(100%, 680px);
  }

  .pg-command-kicker {
    color: rgba(148, 163, 184, 0.82);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
  }

  .pg-command-server-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }

  .pg-command-server-name {
    max-width: min(100%, 460px);
    color: #f8fafc;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.28rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow:
      0 0 18px rgba(34, 211, 238, 0.22),
      0 0 34px rgba(59, 130, 246, 0.14);
  }

  .pg-command-change-server {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 4px 9px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
      rgba(7, 17, 31, 0.58);
    color: rgba(207, 250, 254, 0.9);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }

  .pg-command-change-server:hover,
  .pg-command-change-server:focus-visible {
    color: #ffffff;
    border-color: rgba(34, 211, 238, 0.36);
    background: rgba(14, 165, 233, 0.14);
    box-shadow:
      0 0 0 3px rgba(34, 211, 238, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .pg-command-tabs {
    grid-area: tabs;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    justify-self: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px;
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: 999px;
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.08), transparent 58%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.22);
    scrollbar-width: none;
  }

  .pg-command-tabs::-webkit-scrollbar {
    display: none;
  }

  .pg-command-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 29px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(203, 213, 225, 0.78);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    transition:
      color 180ms ease,
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .pg-command-tab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #3b82f6, #a855f7);
    opacity: 0;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
    transition: opacity 180ms ease;
  }

  .pg-command-tab:hover,
  .pg-command-tab:focus-visible {
    color: #f8fafc;
    border-color: rgba(34, 211, 238, 0.2);
    background: rgba(14, 165, 233, 0.12);
    outline: none;
  }

  .pg-command-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
  }

  .pg-command-tab.is-active {
    color: #ecfeff;
    border-color: rgba(34, 211, 238, 0.28);
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.24), transparent 68%),
      linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.1));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 22px rgba(34, 211, 238, 0.16);
  }

  .pg-command-tab.is-active::after {
    opacity: 1;
  }

  .pg-command-actions.pg-dashboard-header-controls {
    grid-area: actions;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 9px !important;
    max-width: none !important;
    min-width: 0;
    justify-self: end;
  }

  .pg-command-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
    max-width: 190px;
    padding: 4px 10px;
    border: 1px solid rgba(52, 211, 153, 0.24);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
      rgba(6, 18, 27, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 24px rgba(52, 211, 153, 0.1);
  }

  .pg-command-online-pill.is-waiting {
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .pg-command-online-pill.is-waiting .pg-command-online-dot {
    box-shadow:
      0 0 0 5px rgba(148, 163, 184, 0.08),
      0 0 14px rgba(148, 163, 184, 0.24);
  }

  .pg-command-online-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    box-shadow:
      0 0 0 5px rgba(52, 211, 153, 0.1),
      0 0 18px rgba(52, 211, 153, 0.42);
  }

  .pg-command-online-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .pg-command-online-copy strong {
    color: #f0fdf4;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .pg-command-online-copy small {
    max-width: 132px;
    color: rgba(187, 247, 208, 0.72);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-command-icon-btn,
  .pg-command-bar .pg-help-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
      rgba(7, 17, 31, 0.72);
    color: #dffbff;
    text-decoration: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 14px 30px -25px rgba(34, 211, 238, 0.7);
    cursor: pointer;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .pg-command-icon-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .pg-command-brand-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 132px;
    height: 42px;
    min-height: 42px;
    padding: 5px 12px 5px 7px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 999px;
    background:
      radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.16), transparent 38%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.08)),
      rgba(7, 17, 31, 0.74);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 24px rgba(34, 211, 238, 0.12);
    text-decoration: none;
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .pg-command-brand-link img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
  }

  .pg-command-brand-text {
    color: #ecfeff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.01em;
    line-height: 1;
    text-shadow:
      0 0 18px rgba(34, 211, 238, 0.22),
      0 0 28px rgba(59, 130, 246, 0.12);
    white-space: nowrap;
  }

  .pg-command-brand-link:hover,
  .pg-command-brand-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.42);
    box-shadow:
      0 0 0 3px rgba(34, 211, 238, 0.12),
      0 0 28px rgba(34, 211, 238, 0.18);
    outline: none;
  }

  .pg-command-icon-btn:hover,
  .pg-command-icon-btn:focus-visible,
  .pg-command-bar .pg-help-button:hover,
  .pg-command-bar .pg-help-button:focus-visible {
    transform: translateY(-1px);
    color: #ffffff;
    border-color: rgba(34, 211, 238, 0.38);
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.2), transparent 68%),
      rgba(8, 24, 42, 0.92);
    box-shadow:
      0 0 0 3px rgba(34, 211, 238, 0.12),
      0 0 24px rgba(34, 211, 238, 0.16);
    outline: none;
  }

  .pg-command-notification-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(2, 6, 23, 0.9);
    border-radius: 999px;
    background: #f87171;
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.64);
  }

  .pg-command-notification-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 35;
  }

  .pg-command-notification-wrap.is-open .pg-command-notification-btn {
    color: #ffffff;
    border-color: rgba(34, 211, 238, 0.42);
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.2), transparent 68%),
      rgba(8, 24, 42, 0.94);
    box-shadow:
      0 0 0 3px rgba(34, 211, 238, 0.12),
      0 0 26px rgba(34, 211, 238, 0.18);
  }

  .pg-command-notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid rgba(2, 6, 23, 0.9);
    border-radius: 999px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 0 14px rgba(248, 113, 113, 0.42);
  }

  .pg-command-notification-count.is-critical {
    background: linear-gradient(135deg, #ef4444, #fb7185);
  }

  .pg-command-notification-count.is-warning {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.34);
  }

  .pg-command-alerts-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(370px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 120px));
    padding: 12px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 20px;
    background:
      radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.16), transparent 44%),
      radial-gradient(circle at 92% 10%, rgba(168, 85, 247, 0.14), transparent 38%),
      linear-gradient(145deg, rgba(7, 17, 31, 0.92), rgba(2, 6, 23, 0.88));
    box-shadow:
      0 24px 70px rgba(2, 6, 23, 0.56),
      0 0 34px rgba(34, 211, 238, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .pg-command-alerts-panel[hidden] {
    display: none !important;
  }

  .pg-command-alerts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .pg-command-alerts-head span {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .pg-command-alerts-head strong {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.1;
  }

  .pg-command-alerts-head small {
    color: rgba(148, 163, 184, 0.82);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.15;
  }

  .pg-command-alert-list {
    display: grid;
    gap: 9px;
    padding-top: 10px;
  }

  .pg-command-alert-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }

  .pg-command-alert-item.is-critical {
    border-color: rgba(248, 113, 113, 0.34);
    box-shadow:
      0 0 22px rgba(248, 113, 113, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .pg-command-alert-item.is-warning {
    border-color: rgba(245, 158, 11, 0.3);
  }

  .pg-command-alert-item.is-info {
    border-color: rgba(34, 211, 238, 0.24);
  }

  .pg-command-alert-severity-dot {
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.42);
  }

  .pg-command-alert-item.is-critical .pg-command-alert-severity-dot {
    background: #f87171;
    box-shadow: 0 0 14px rgba(248, 113, 113, 0.58);
  }

  .pg-command-alert-item.is-warning .pg-command-alert-severity-dot {
    background: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
  }

  .pg-command-alert-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .pg-command-alert-copy strong {
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  .pg-command-alert-copy p {
    margin: 0;
    color: rgba(203, 213, 225, 0.78);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
  }

  .pg-command-alert-action {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 9px;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #cffafe;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease;
  }

  .pg-command-alert-action:hover,
  .pg-command-alert-action:focus-visible {
    color: #ffffff;
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(14, 165, 233, 0.18);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
    outline: none;
  }

  .pg-command-alert-empty {
    display: grid;
    gap: 6px;
    padding: 18px 12px 10px;
    text-align: center;
  }

  .pg-command-alert-empty strong {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 900;
  }

  .pg-command-alert-empty p {
    max-width: 260px;
    margin: 0 auto;
    color: rgba(148, 163, 184, 0.84);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.42;
  }

  .pg-command-logout-btn {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.22);
  }

  .pg-command-bar .pg-dashboard-menu,
  .pg-command-bar .pg-dashboard-back-btn {
    min-height: 40px;
    border-color: rgba(34, 211, 238, 0.18);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
      rgba(7, 17, 31, 0.72);
    color: #dffbff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-command-bar .pg-dashboard-back-label {
    font-size: 12px;
    font-weight: 850;
  }

  @media (min-width: 768px) {
    .pg-command-bar .pg-dashboard-menu {
      display: none !important;
    }
  }

  .pg-command-bar + .pg-content,
  .pg-command-bar + .pg-dashboard-toolbar,
  .pg-command-bar + .pg-discord-resilience-banner {
    margin-top: var(--pg-shell-gap);
  }

  .pg-command-bar .pg-dashboard-header-insights,
  .pg-command-bar .pg-dashboard-header-main,
  .pg-command-bar .pg-dashboard-header-text,
  .pg-command-bar .pg-dashboard-header-chips,
  .pg-command-bar .pg-dashboard-header-switcher {
    display: none !important;
  }

  /* Neon Glass A sidebar polish */
  .pg-sidebar-guardian {
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.14), transparent 30%),
      linear-gradient(180deg, rgba(3, 8, 20, 0.99), rgba(2, 6, 17, 1)) !important;
    border-right-color: rgba(34, 211, 238, 0.16) !important;
  }

  .pg-sidebar-guardian .pg-sidebar-logo {
    border-color: rgba(34, 211, 238, 0.36);
    background:
      radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.2), transparent 34%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(59, 130, 246, 0.14), rgba(168, 85, 247, 0.1));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 20px rgba(34, 211, 238, 0.16);
  }

  .pg-sidebar-guardian .pg-nav-guardian {
    border: 1px solid rgba(148, 163, 184, 0.09);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      rgba(7, 17, 31, 0.34);
  }

  .pg-sidebar-guardian .pg-nav-icon-guardian {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.17);
    background:
      radial-gradient(circle at 35% 20%, rgba(34, 211, 238, 0.14), transparent 58%),
      rgba(2, 6, 23, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 18px rgba(34, 211, 238, 0.06);
  }

  .pg-sidebar-guardian .pg-nav-guardian:hover,
  .pg-sidebar-guardian .pg-nav-guardian:focus-visible {
    border-color: rgba(34, 211, 238, 0.22);
    background:
      linear-gradient(90deg, rgba(34, 211, 238, 0.13), rgba(59, 130, 246, 0.07)),
      rgba(7, 17, 31, 0.6);
    box-shadow: 0 0 22px rgba(34, 211, 238, 0.08);
  }

  .pg-sidebar-guardian .pg-nav-guardian:hover .pg-nav-icon-guardian,
  .pg-sidebar-guardian .pg-nav-guardian:focus-visible .pg-nav-icon-guardian {
    border-color: rgba(34, 211, 238, 0.36);
    background:
      radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.16), transparent 36%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(59, 130, 246, 0.14));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 20px rgba(34, 211, 238, 0.2);
  }

  .pg-sidebar-guardian .pg-nav-guardian.active {
    border-color: rgba(34, 211, 238, 0.38);
    background:
      radial-gradient(circle at 18% 50%, rgba(34, 211, 238, 0.24), transparent 38%),
      linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.08));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 20px rgba(34, 211, 238, 0.05),
      0 0 26px rgba(34, 211, 238, 0.14);
  }

  .pg-sidebar-guardian .pg-nav-guardian.active .pg-nav-icon-guardian {
    color: #ecfeff;
    border-color: rgba(34, 211, 238, 0.52);
    background:
      radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.18), transparent 36%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.34), rgba(59, 130, 246, 0.2), rgba(168, 85, 247, 0.12));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 18px rgba(34, 211, 238, 0.12),
      0 0 24px rgba(34, 211, 238, 0.32);
  }

  /* Neon Glass A overview */
  .pg-dashboard-overview-page .pg-dashboard-overview-content {
    padding-top: 0;
  }

  .pg-dashboard-overview-v2 {
    max-width: min(100% - 28px, 1560px);
    margin-inline: auto;
  }

  .pg-dashboard-overview-v2 .pg-overview-hero-grid {
    grid-template-columns: 1fr;
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card {
    min-height: 0;
    padding: clamp(17px, 1.55vw, 24px);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 24px;
    background:
      radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.18), transparent 34%),
      radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.16), transparent 36%),
      linear-gradient(135deg, rgba(7, 17, 31, 0.96), rgba(11, 22, 40, 0.94) 48%, rgba(2, 6, 23, 0.98));
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.05),
      0 34px 86px -58px rgba(34, 211, 238, 0.7),
      0 22px 62px -50px rgba(168, 85, 247, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card::before {
    opacity: 0.18;
    background:
      linear-gradient(90deg, rgba(34, 211, 238, 0.11) 1px, transparent 1px),
      linear-gradient(180deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
    background-size: 52px 52px;
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 32%, rgba(34, 211, 238, 0.05));
    pointer-events: none;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-head,
  .pg-overview-main-body,
  .pg-overview-meter,
  .pg-overview-hero-stats {
    position: relative;
    z-index: 1;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-head h2 {
    color: #f8fafc;
    font-size: clamp(2rem, 1.55rem + 1.2vw, 3.15rem);
    text-shadow: 0 0 28px rgba(34, 211, 238, 0.16);
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card > .pg-overview-card-head {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(430px, 1fr);
    align-items: start;
    gap: clamp(14px, 1.7vw, 24px);
  }

  .pg-dashboard-overview-v2 .pg-overview-card-title {
    min-width: 0;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-title h2 {
    margin-top: 9px;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-title .pg-overview-muted {
    max-width: 54ch;
    margin-top: 7px;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-status-rail {
    display: grid;
    gap: 8px;
    justify-items: end;
    min-width: 0;
  }

  .pg-dashboard-overview-v2 .pg-overview-card-status-rail > .pg-overview-pill {
    justify-self: end;
    min-height: 25px;
    padding-block: 5px;
  }

  .pg-dashboard-overview-v2 .pg-overview-integrated-status {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 0;
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini {
    display: grid;
    align-content: start;
    gap: 4px;
    min-height: 0;
    padding: 9px 10px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 14px;
    background:
      radial-gradient(circle at 92% 0%, rgba(34, 211, 238, 0.1), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 18px 36px -32px rgba(34, 211, 238, 0.28);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini:hover,
  .pg-dashboard-overview-v2 .pg-overview-status-mini:focus-within {
    border-color: rgba(34, 211, 238, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 20px 40px -32px rgba(34, 211, 238, 0.34);
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini.is-good {
    border-color: rgba(52, 211, 153, 0.2);
    background:
      radial-gradient(circle at 92% 0%, rgba(52, 211, 153, 0.12), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.32);
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini.is-soft {
    border-color: rgba(168, 85, 247, 0.2);
    background:
      radial-gradient(circle at 92% 0%, rgba(168, 85, 247, 0.12), transparent 48%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
      rgba(2, 6, 23, 0.32);
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini span,
  .pg-dashboard-overview-v2 .pg-overview-status-mini small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini span {
    color: rgba(147, 197, 253, 0.86);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini strong {
    color: #f8fafc;
    font-size: clamp(0.96rem, 0.9rem + 0.25vw, 1.18rem);
    font-weight: 900;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .pg-dashboard-overview-v2 .pg-overview-status-mini small {
    color: rgba(148, 163, 184, 0.88);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.24;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .pg-dashboard-overview-v2 .pg-overview-main-body {
    grid-template-columns: minmax(210px, 0.52fr) minmax(420px, 1fr);
    align-items: center;
    gap: clamp(14px, 1.7vw, 24px);
    margin-top: 16px;
  }

  .pg-overview-pill {
    border-color: rgba(34, 211, 238, 0.28);
    background:
      linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.08));
    color: #cffafe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-overview-muted {
    color: rgba(148, 163, 184, 0.9);
  }

  .pg-dashboard-overview-v2 .pg-overview-metric span {
    color: #93c5fd;
  }

  .pg-dashboard-overview-v2 .pg-overview-metric strong {
    color: #f8fafc;
    font-size: clamp(3.15rem, 2.45rem + 2vw, 4.65rem);
    text-shadow:
      0 0 26px rgba(34, 211, 238, 0.24),
      0 0 46px rgba(59, 130, 246, 0.16);
  }

  .pg-dashboard-overview-v2 .pg-overview-meter {
    height: 12px;
    margin-top: 12px;
    border-color: rgba(34, 211, 238, 0.2);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
      rgba(2, 6, 23, 0.74);
    box-shadow: inset 0 0 18px rgba(2, 6, 23, 0.7);
  }

  .pg-dashboard-overview-v2 .pg-overview-meter span {
    background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 52%, #a855f7 100%);
    box-shadow:
      0 0 22px rgba(34, 211, 238, 0.42),
      0 0 30px rgba(168, 85, 247, 0.18);
  }

  .pg-dashboard-overview-v2 .pg-overview-coverage-ring {
    width: 104px;
    background:
      conic-gradient(from 210deg, #22d3ee 0deg, #3b82f6 var(--pg-coverage-deg), #a855f7 var(--pg-coverage-deg), rgba(51, 65, 85, 0.7) var(--pg-coverage-deg), rgba(15, 23, 42, 0.92) 360deg);
    box-shadow:
      0 0 30px rgba(34, 211, 238, 0.24),
      0 0 42px rgba(168, 85, 247, 0.1),
      inset 0 0 18px rgba(15, 23, 42, 0.44);
  }

  .pg-dashboard-overview-v2 .pg-overview-system-mini,
  .pg-dashboard-overview-v2 .pg-overview-system-summary-pill,
  .pg-dashboard-overview-v2 .pg-overview-hero-stats div {
    border-color: rgba(34, 211, 238, 0.15);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
      rgba(2, 6, 23, 0.38);
  }

  .pg-dashboard-overview-v2 .pg-overview-coverage-visual {
    grid-template-columns: 108px minmax(0, 1fr);
    min-height: 118px;
    padding: 11px;
    gap: 12px;
  }

  .pg-dashboard-overview-v2 .pg-overview-system-mini-list {
    gap: 4px;
    margin-top: 8px;
  }

  .pg-dashboard-overview-v2 .pg-overview-hero-stats {
    gap: 8px;
    margin-top: 11px;
  }

  .pg-dashboard-overview-v2 .pg-overview-hero-stats div {
    padding: 9px 10px;
  }

  .pg-dashboard-overview-v2 .pg-overview-side-stack .pg-overview-side-card {
    min-height: 0;
    padding: 14px;
    flex: 0 0 auto;
    border-color: rgba(34, 211, 238, 0.16);
    border-radius: 18px;
    background:
      radial-gradient(circle at 92% 0%, rgba(34, 211, 238, 0.13), transparent 44%),
      linear-gradient(180deg, rgba(7, 17, 31, 0.88), rgba(2, 6, 23, 0.76));
    box-shadow:
      0 26px 58px -48px rgba(34, 211, 238, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-dashboard-overview-v2 .pg-overview-side-stack {
    align-self: start;
    gap: 12px;
  }

  .pg-dashboard-overview-v2 .pg-overview-side-stack.has-no-tickets .pg-overview-side-card {
    flex-basis: auto;
    min-height: 0;
  }

  .pg-dashboard-overview-v2 .pg-overview-side-value {
    margin-top: 9px;
    font-size: clamp(1.18rem, 1.05rem + 0.54vw, 1.55rem);
  }

  .pg-dashboard-overview-v2 .pg-overview-side-value + .pg-overview-muted {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  .pg-dashboard-overview-v2 .pg-overview-side-card .pg-overview-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.48);
  }

  .pg-dashboard-overview-v2 .pg-overview-side-card .pg-overview-pill.is-good::before {
    background: #34d399;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.48);
  }

  .pg-dashboard-overview-v2 .pg-overview-side-card .pg-overview-pill.is-soft::before {
    background: #a855f7;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.42);
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card {
    --pg-card-accent: #22d3ee;
    --pg-card-accent-rgb: 34, 211, 238;
    min-height: 168px;
    border-color: rgba(var(--pg-card-accent-rgb), 0.25);
    border-radius: 22px;
    background:
      linear-gradient(120deg, rgba(var(--pg-card-accent-rgb), 0.14), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
      rgba(7, 17, 31, 0.82);
    box-shadow:
      0 26px 58px -48px rgba(var(--pg-card-accent-rgb), 0.62),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 28%),
      linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58% 100%);
    opacity: 0.52;
    pointer-events: none;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card.is-structure {
    --pg-card-accent: #3b82f6;
    --pg-card-accent-rgb: 59, 130, 246;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card.is-access {
    --pg-card-accent: #34d399;
    --pg-card-accent-rgb: 52, 211, 153;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card.is-automation {
    --pg-card-accent: #a855f7;
    --pg-card-accent-rgb: 168, 85, 247;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card.is-coverage {
    --pg-card-accent: #8b5cf6;
    --pg-card-accent-rgb: 139, 92, 246;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-card .pg-overview-pill {
    border-color: rgba(var(--pg-card-accent-rgb), 0.3);
    background: rgba(var(--pg-card-accent-rgb), 0.13);
    color: color-mix(in srgb, var(--pg-card-accent) 42%, #f8fafc);
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-icon {
    border-color: rgba(var(--pg-card-accent-rgb), 0.34);
    background:
      radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.18), transparent 38%),
      rgba(var(--pg-card-accent-rgb), 0.14);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 22px rgba(var(--pg-card-accent-rgb), 0.16);
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-value {
    color: #f8fafc;
  }

  .pg-dashboard-overview-v2 .pg-overview-stat-label,
  .pg-dashboard-overview-v2 .pg-overview-stat-value,
  .pg-dashboard-overview-v2 .pg-overview-stat-card .pg-overview-muted,
  .pg-dashboard-overview-v2 .pg-overview-stat-top {
    position: relative;
    z-index: 1;
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card,
  .pg-dashboard-overview-v2 .pg-overview-side-card,
  .pg-dashboard-overview-v2 .pg-overview-stat-card,
  .pg-dashboard-overview-v2 .pg-overview-activity-card {
    transform: none;
    transition:
      border-color 200ms ease,
      box-shadow 200ms ease,
      background 200ms ease;
  }

  .pg-dashboard-overview-v2 .pg-overview-main-card:hover,
  .pg-dashboard-overview-v2 .pg-overview-side-card:hover,
  .pg-dashboard-overview-v2 .pg-overview-stat-card:hover,
  .pg-dashboard-overview-v2 .pg-overview-activity-card:hover {
    transform: none;
  }

  .pg-dashboard-overview-v2 .pg-overview-system-mini,
  .pg-dashboard-overview-v2 .pg-overview-system-summary-pill,
  .pg-dashboard-overview-v2 .pg-overview-hero-stats div {
    transform: none;
    transition:
      border-color 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      opacity 180ms ease;
  }

  .pg-dashboard-overview-v2 .pg-overview-system-mini:hover,
  .pg-dashboard-overview-v2 .pg-overview-system-mini:focus-visible,
  .pg-dashboard-overview-v2 .pg-chart-reveal.pg-chart-visible .pg-overview-system-mini:hover,
  .pg-dashboard-overview-v2 .pg-chart-reveal.pg-chart-visible .pg-overview-system-mini:focus-visible {
    transform: none;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.08);
  }

  @media (max-width: 1180px) {
    .pg-command-bar .pg-command-shell.pg-dashboard-header-body {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
      grid-template-areas:
        "left title actions"
        "tabs tabs tabs" !important;
    }

    .pg-command-tabs {
      width: fit-content;
      max-width: 100%;
    }

    .pg-command-online-pill {
      max-width: 160px;
    }

    .pg-command-online-copy small {
      max-width: 104px;
    }
  }

  @media (max-width: 860px) {
    .pg-command-bar.pg-dashboard-header {
      width: calc(100% - 20px);
      padding: 8px 10px !important;
      border-radius: 20px !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .pg-command-bar .pg-command-shell.pg-dashboard-header-body {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
      grid-template-areas:
        "left title actions"
        "tabs tabs tabs" !important;
      gap: 7px !important;
    }

    .pg-command-center {
      display: contents;
    }

    .pg-command-server-block {
      grid-area: title;
      justify-items: center;
      gap: 1px;
    }

    .pg-command-tabs {
      grid-area: tabs;
      justify-content: flex-start;
      max-width: 100%;
    }

    .pg-command-alerts-panel {
      right: 0;
      width: min(360px, calc(100vw - 20px));
      max-height: min(480px, calc(100vh - 112px));
    }

    .pg-command-kicker {
      display: none;
    }

    .pg-command-actions.pg-dashboard-header-controls {
      gap: 6px !important;
    }

    .pg-command-online-pill {
      min-height: 38px;
      max-width: 42px;
      padding: 0;
      justify-content: center;
    }

    .pg-command-online-copy {
      display: none;
    }

    .pg-command-icon-btn,
    .pg-command-bar .pg-help-button,
    .pg-command-bar .pg-dashboard-menu,
    .pg-command-bar .pg-dashboard-back-btn {
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
      border-radius: 13px;
    }

    .pg-command-brand-link {
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 14px;
    }

    .pg-command-brand-link img {
      width: 28px;
      height: 28px;
      flex-basis: 28px;
    }

    .pg-command-brand-text {
      display: none;
    }

    .pg-dashboard-overview-v2 .pg-overview-main-body {
      grid-template-columns: 1fr;
    }

    .pg-dashboard-overview-v2 .pg-overview-main-card > .pg-overview-card-head {
      grid-template-columns: 1fr;
    }

    .pg-dashboard-overview-v2 .pg-overview-card-status-rail {
      justify-items: stretch;
    }

    .pg-dashboard-overview-v2 .pg-overview-card-status-rail > .pg-overview-pill {
      justify-self: start;
    }

    .pg-dashboard-overview-v2 .pg-overview-integrated-status {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

  }

  @media (max-width: 560px) {
    .pg-command-bar.pg-dashboard-header {
      margin-top: 4px;
      box-shadow:
        0 14px 34px rgba(8, 13, 28, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }

    .pg-command-bar .pg-command-shell.pg-dashboard-header-body {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
      grid-template-areas:
        "left actions actions"
        "title title title"
        "tabs tabs tabs" !important;
    }

    .pg-command-server-name {
      font-size: 1rem;
      max-width: 100%;
    }

    .pg-command-brand-link {
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
    }

    .pg-command-brand-link img {
      width: 25px;
      height: 25px;
      flex-basis: 25px;
    }

    .pg-command-server-row {
      flex-wrap: wrap;
      gap: 5px;
    }

    .pg-command-change-server {
      min-height: 22px;
      padding: 4px 8px;
      font-size: 10px;
    }

    .pg-command-tab {
      min-height: 30px;
      padding: 7px 10px;
      font-size: 11px;
    }

    .pg-command-tabs {
      border-radius: 18px;
      justify-content: flex-start;
    }

    .pg-command-alerts-panel {
      position: fixed;
      top: 70px;
      right: 10px;
      left: 10px;
      width: auto;
      max-width: none;
      max-height: calc(100vh - 92px);
      padding: 10px;
      border-radius: 18px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .pg-dashboard-overview-v2 {
      max-width: calc(100% - 20px);
    }

    .pg-dashboard-overview-v2 .pg-overview-integrated-status {
      grid-template-columns: 1fr;
      gap: 8px;
      margin-top: 0;
    }

    .pg-dashboard-overview-v2 .pg-overview-status-mini {
      padding: 9px 10px;
    }

    .pg-dashboard-overview-v2 .pg-overview-coverage-visual {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .pg-dashboard-overview-v2 .pg-overview-system-breakdown {
      width: 100%;
    }

    .pg-dashboard-overview-v2 .pg-overview-main-card,
    .pg-dashboard-overview-v2 .pg-overview-side-card,
    .pg-dashboard-overview-v2 .pg-overview-stat-card,
    .pg-dashboard-overview-v2 .pg-overview-activity-card {
      border-radius: 18px;
      box-shadow:
        0 18px 38px -32px rgba(34, 211, 238, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .pg-dashboard-overview-v2 .pg-overview-main-card::before {
      opacity: 0.1;
    }
  }

  /* Neon Glass A Phase 2: top-navigation-only shell */
  .pg-sidebar,
  .pg-sidebar-overlay,
  #pgSidebar,
  #pgSidebarOverlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .pg-layout-shell {
    --sidebar-width: 0px !important;
    --pg-sidebar-collapsed: 0px !important;
    --pg-sidebar-expanded: 0px !important;
    --pg-sidebar-content-gap: 0px !important;
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .pg-layout-shell > .pg-main,
  .pg-main {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
    padding-left: max(clamp(16px, 2vw, 28px), env(safe-area-inset-left, 0px)) !important;
  }

  .pg-dashboard-overview-shell > .pg-main {
    padding-top: max(clamp(8px, 1vw, 14px), env(safe-area-inset-top, 0px)) !important;
  }

  /* Neon Glass A compact internal action bars */
  .pg-rc-page .pg-dashboard-toolbar,
  .pg-welcome-page .pg-dashboard-toolbar,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar {
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    align-self: center;
    margin-inline: auto;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    border-color: rgba(34, 211, 238, 0.16);
    background:
      radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.1), transparent 46%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.42));
    box-shadow:
      0 18px 42px -36px rgba(34, 211, 238, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .pg-rc-page .pg-dashboard-toolbar-items,
  .pg-welcome-page .pg-dashboard-toolbar-items,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    gap: 8px;
  }

  .pg-rc-page .pg-dashboard-toolbar-items .pg-btn,
  .pg-welcome-page .pg-dashboard-toolbar-items .pg-btn,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items .pg-btn,
  .pg-welcome-page .pg-welcome-content > .pg-welcome-tab-row .pg-btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 12px;
    white-space: nowrap;
    border-color: rgba(148, 163, 184, 0.14);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
      rgba(2, 6, 23, 0.36);
    transition:
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease,
      color 180ms ease;
  }

  .pg-rc-page .pg-dashboard-toolbar-items .pg-btn-primary,
  .pg-welcome-page .pg-dashboard-toolbar-items .pg-btn-primary,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items .pg-btn-primary,
  .pg-welcome-page .pg-welcome-content > .pg-welcome-tab-row .pg-btn-primary {
    border-color: rgba(34, 211, 238, 0.36);
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.13), transparent 42%),
      linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(59, 130, 246, 0.18), rgba(168, 85, 247, 0.12));
    color: #ecfeff;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 20px rgba(34, 211, 238, 0.18);
  }

  .pg-rc-page .pg-dashboard-toolbar-items .pg-btn:hover,
  .pg-rc-page .pg-dashboard-toolbar-items .pg-btn:focus-visible,
  .pg-welcome-page .pg-dashboard-toolbar-items .pg-btn:hover,
  .pg-welcome-page .pg-dashboard-toolbar-items .pg-btn:focus-visible,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items .pg-btn:hover,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar-items .pg-btn:focus-visible,
  .pg-welcome-page .pg-welcome-content > .pg-welcome-tab-row .pg-btn:hover,
  .pg-welcome-page .pg-welcome-content > .pg-welcome-tab-row .pg-btn:focus-visible {
    border-color: rgba(34, 211, 238, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 18px rgba(34, 211, 238, 0.12);
  }

  .pg-welcome-page .pg-welcome-content > .pg-welcome-tab-row {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 18px;
    background:
      radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.11), transparent 44%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(2, 6, 23, 0.42));
    box-shadow:
      0 18px 42px -36px rgba(168, 85, 247, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.055);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .pg-rc-page .pg-command-bar + .pg-dashboard-toolbar,
  .pg-welcome-page .pg-command-bar + .pg-dashboard-toolbar,
  .pg-guardian-logs-v2-page .pg-command-bar + .pg-dashboard-toolbar {
    margin-top: clamp(10px, 0.8vw, 14px);
  }

  .pg-rc-page .pg-dashboard-toolbar + .pg-content,
  .pg-welcome-page .pg-dashboard-toolbar + .pg-content,
  .pg-guardian-logs-v2-page .pg-dashboard-toolbar + .pg-content {
    margin-top: clamp(10px, 0.85vw, 14px);
  }

  .pg-welcome-page .pg-welcome-content {
    gap: 0.9rem;
  }

  body.pg-sidebar-open {
    overflow: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .pg-command-tab,
    .pg-command-tab::after,
    .pg-command-icon-btn,
    .pg-command-brand-link,
    .pg-command-change-server,
    .pg-command-bar .pg-help-button,
    .pg-sidebar-guardian .pg-nav-guardian,
    .pg-sidebar-guardian .pg-nav-icon-guardian,
    .pg-dashboard-overview-v2 .pg-overview-main-card,
    .pg-dashboard-overview-v2 .pg-overview-side-card,
    .pg-dashboard-overview-v2 .pg-overview-stat-card,
    .pg-dashboard-overview-v2 .pg-overview-activity-card,
    .pg-dashboard-overview-v2 .pg-overview-system-mini {
      transition: none !important;
    }
  }