@networkpro/web 1.10.0 → 1.11.0

package/src/lib/pages/TermsUseContent.svelte

@@ -15,9 +15,9 @@ This file is part of Network Pro.
   // Log the base path to verify its value
   //console.log("Base path:", base);
 
-  console.log(CONSTANTS.APP_NAME);
+  console.log(CONSTANTS.COMPANY_INFO.APP_NAME);
 
-  const { COMPANY } = CONSTANTS;
+  const { COMPANY_INFO, PAGE, NAV } = CONSTANTS;
 
   /**
    * URL to Terms and Conditions page, using the base path
@@ -62,15 +62,11 @@ This file is part of Network Pro.
 
   /**
    * Constants for reusable content
-   * @type {{ effectiveDate: string, classSmall: string, rel: string, hrefTop: string, targetBlank: string, targetSelf: string }}
+   * @type {{ effectiveDate: string, classSmall: string }}
    */
   const constants = {
     effectiveDate: "May 21, 2025",
     classSmall: "small-text",
-    rel: "noopener noreferrer",
-    hrefTop: "#top",
-    targetBlank: "_blank",
-    targetSelf: "_self",
   };
 </script>
 
@@ -78,9 +74,9 @@ This file is part of Network Pro.
 <section id="top">
   <span class={constants.classSmall}>
     <a
-      rel={constants.rel}
+      rel={PAGE.REL}
       href="https://spdx.dev/learn/handling-license-info"
-      target={constants.targetBlank}>
+      target={PAGE.BLANK}>
       SPDX License Identifier
     </a>: &nbsp;<code>CC-BY-4.0 OR GPL-3.0-or-later</code>
   </span>
@@ -89,7 +85,7 @@ This file is part of Network Pro.
 <section id="page-title">
   <h1>Website Terms of Use</h1>
   <p>
-    <strong>{COMPANY}</strong><br />
+    <strong>{COMPANY_INFO.NAME}</strong><br />
     <strong>Effective Date:</strong>
     {constants.effectiveDate}
   </p>
@@ -113,7 +109,7 @@ This file is part of Network Pro.
   available via this website and its associated web properties. For provisions
   governing our consulting and implementation services, please refer to the
   applicable
-  <a href={tandcLink} target={constants.targetSelf}>Terms and Conditions</a>.
+  <a href={tandcLink} target={PAGE.SELF}>Terms and Conditions</a>.
 </p>
 
 <hr />
@@ -124,8 +120,7 @@ This file is part of Network Pro.
       <strong>Formats Available:</strong> &nbsp;<span class="visited"
         >HTML</span>
       |
-      <a rel={constants.rel} href={termsLink} target={constants.targetSelf}
-        >Docs</a>
+      <a rel={PAGE.REL} href={termsLink} target={PAGE.SELF}>Docs</a>
     </sup>
   </p>
 </section>
@@ -137,7 +132,7 @@ This file is part of Network Pro.
 
     {#if link.id === "introduction"}
       <p>
-        Welcome! By accessing or using any of the platforms operated by {COMPANY}
+        Welcome! By accessing or using any of the platforms operated by {COMPANY_INFO.NAME}
         ("Company," "we," "us," or "our"), you agree to be bound by these Terms of
         Use ("Terms"). If you do not agree to these Terms, please refrain from using
         our services.
@@ -202,10 +197,10 @@ This file is part of Network Pro.
       </p>
     {:else if link.id === "jurisdiction"}
       <p>
-        {COMPANY} is based in Maricopa County, Arizona. Any legal action or dispute
-        arising from these Terms of Use shall be subject to the exclusive jurisdiction
-        of the state and federal courts located in Maricopa County, Arizona. These
-        Terms shall be governed by the
+        {COMPANY_INFO.NAME} is based in Maricopa County, Arizona. Any legal action
+        or dispute arising from these Terms of Use shall be subject to the exclusive
+        jurisdiction of the state and federal courts located in Maricopa County,
+        Arizona. These Terms shall be governed by the
         <strong>Arizona Revised Statutes (A.R.S.)</strong> and applicable
         provisions of the <strong>United States Code (U.S.C.)</strong>.
       </p>
@@ -224,7 +219,7 @@ This file is part of Network Pro.
     {/if}
 
     <span class={constants.classSmall}
-      ><a href={constants.hrefTop}>Back to top</a></span>
+      ><a href={NAV.HREFTOP}>{NAV.BACKTOP}</a></span>
   </section>
 {/each}
 
@@ -232,10 +227,9 @@ This file is part of Network Pro.
   <p class="bquote">
     <strong>Note:</strong> For more details regarding our privacy practices,
     refer to our
-    <a rel={constants.rel} href={privacyLink} target={constants.targetSelf}
-      >Privacy Policy</a
-    >. For licensing terms and content usage rights, please visit our
-    <a rel={constants.rel} href={licenseLink} target={constants.targetSelf}
+    <a rel={PAGE.REL} href={privacyLink} target={PAGE.SELF}>Privacy Policy</a>.
+    For licensing terms and content usage rights, please visit our
+    <a rel={PAGE.REL} href={licenseLink} target={PAGE.SELF}
       >Legal, Copyright, and Licensing</a>
     page.
   </p>

package/src/lib/stores/posthog.js

@@ -0,0 +1,115 @@
+/* ==========================================================================
+src/lib/stores/posthog.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+========================================================================== */
+
+/**
+ * @file posthog.js
+ * @description Privacy-aware PostHog tracking store with reactive state and safe API surface.
+ * @module src/lib/stores
+ */
+
+import {
+  shouldRemindUserToReconsent,
+  shouldTrackUser,
+} from "$lib/utils/privacy.js";
+import { get, writable } from "svelte/store";
+
+/**
+ * Tracks whether tracking is allowed based on cookies, DNT/GPC, and user preference.
+ * @type {import("svelte/store").Writable<boolean>}
+ */
+export const trackingEnabled = writable(false);
+
+/**
+ * Determines if the user should be reminded to re-consent (after 6 months).
+ * @type {import("svelte/store").Writable<boolean>}
+ */
+export const showReminder = writable(false);
+
+/** @type {boolean} Internal one-time init guard */
+let initialized = false;
+
+/** @type {import("posthog-js").PostHog | null} Loaded PostHog instance */
+let ph = null;
+
+/**
+ * Initializes the PostHog analytics client if tracking is permitted.
+ * Uses dynamic import to avoid SSR failures.
+ * @returns {Promise<void>}
+ */
+export async function initPostHog() {
+  if (initialized || typeof window === "undefined") return;
+  initialized = true;
+
+  const allowTracking = shouldTrackUser();
+  trackingEnabled.set(allowTracking);
+  showReminder.set(shouldRemindUserToReconsent());
+
+  if (!allowTracking) {
+    console.log("[PostHog] Tracking is disabled — skipping init.");
+    return;
+  }
+
+  const posthogModule = await import("posthog-js");
+  ph = posthogModule.default;
+
+  // cspell:disable-next-line
+  ph.init("phc_Qshfo6AXzh4pS7aPigfqyeo4qj1qlyh7gDuHDeVMSR0", {
+    api_host: "https://us.i.posthog.com",
+    autocapture: true,
+    capture_pageview: false,
+    person_profiles: "identified_only",
+    loaded: (phInstance) => {
+      if (!allowTracking) {
+        console.log(
+          "[PostHog] ⛔ User opted out — calling opt_out_capturing()",
+        );
+        phInstance.opt_out_capturing();
+      } else {
+        console.log("[PostHog] ✅ Tracking enabled");
+      }
+    },
+  });
+
+  ph.capture("$pageview");
+}
+
+/**
+ * Conditionally captures an event if tracking is enabled.
+ * @param {string} event - The event name to track
+ * @param {Record<string, any>} [properties={}] - Optional event properties
+ */
+export function capture(event, properties = {}) {
+  if (ph !== null && get(trackingEnabled)) {
+    ph.capture(event, properties);
+  }
+}
+
+/**
+ * Conditionally identifies a user if tracking is enabled.
+ * @param {string} id - Unique user identifier
+ * @param {Record<string, any>} [properties={}] - Optional user traits
+ */
+export function identify(id, properties = {}) {
+  if (ph !== null && get(trackingEnabled)) {
+    ph.identify(id, properties);
+  }
+}
+
+/**
+ * For test cleanup only — resets internal state.
+ * No-op in production.
+ * @returns {void}
+ */
+export function _resetPostHog() {
+  if (import.meta.env.MODE === "production") {
+    console.warn("[PostHog] _resetPostHog() called in production — no-op");
+    return;
+  }
+
+  initialized = false;
+  ph = null;
+}

package/src/lib/stores/trackingStatus.js

@@ -0,0 +1,30 @@
+/* ==========================================================================
+src/lib/stores/trackingStatus.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+========================================================================== */
+
+/**
+ * @file trackingStatus.js
+ * @description Tracks state of PostHog tracking status for instant updates
+ * in Privacy Policy and Privacy Dashboard.
+ * @module src/lib/stores
+ */
+
+import { writable } from "svelte/store";
+
+/**
+ * Writable tracking status store.
+ * Initialized with fallback value and updated in browser context.
+ * @type {import("svelte/store").Writable<string>}
+ */
+export const trackingStatus = writable("⏳ Checking tracking preferences...");
+
+// Dynamically import browser-only logic after mount
+if (typeof window !== "undefined") {
+  import("$lib/utils/trackingStatus.js").then(({ getTrackingPreferences }) => {
+    const prefs = getTrackingPreferences();
+    trackingStatus.set(prefs.status);
+  });
+}

package/src/lib/types/appConstants.js

@@ -0,0 +1,60 @@
+/* ==========================================================================
+src/lib/types/appConstants.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * @file appConstants.js
+ * @description Type definitions for app constants in src/lib/index.js
+ * @module src/lib/types
+ * @author SunDevil311
+ * @updated 2025-06-03
+ */
+
+/**
+ * @typedef {object} CompanyInfo
+ * @property {string} NAME - Full company name
+ * @property {string} APP_NAME - Application name
+ * @property {string} YEAR - Current copyright year
+ */
+
+/**
+ * @typedef {object} ContactInfo
+ * @property {string} EMAIL - Primary contact email
+ * @property {string} SECURE - Secure contact email
+ * @property {string} PRIVACY - Privacy policy email
+ * @property {string} PHONE - Support phone number
+ */
+
+/**
+ * @typedef {object} PageTargets
+ * @property {string} BLANK - Value for `target="_blank"`
+ * @property {string} SELF - Value for `target="_self"`
+ * @property {string} REL - Value for `rel="noopener noreferrer"`
+ */
+
+/**
+ * @typedef {object} NavigationLabels
+ * @property {string} BACKTOP
+ * @property {string} HREFTOP
+ */
+
+/**
+ * @typedef {object} Links
+ * @property {string} HOME - Main website URL
+ * @property {string} BLOG - External blog URL
+ */
+
+/**
+ * @typedef {object} AppConstants
+ * @property {CompanyInfo} COMPANY_INFO
+ * @property {ContactInfo} CONTACT
+ * @property {PageTargets} PAGE
+ * @property {NavigationLabels} NAV
+ * @property {Links} LINKS
+ */
+
+export {};

package/src/lib/types/fossTypes.js

@@ -1,3 +1,20 @@
+/* ==========================================================================
+src/lib/types/fossTypes.js
+
+Copyright © 2025 Network Pro Strategies (Network Pro™)
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+/**
+ * @file fossTypes.js
+ * @description Type definitions for `fossItem` in
+ * src/lib/components/foss/FossItemContent.svelte
+ * @module src/lib/types
+ * @author SunDevil311
+ * @updated 2025-06-03
+ */
+
 /**
  * @typedef {object} FossLink
  * @property {string} [label]

package/src/lib/utils/privacy.js

@@ -11,28 +11,71 @@ This file is part of Network Pro.
  * @description Determines whether the user allows tracking based on DNT, GPC, or manual opt-out.
  * @module src/lib/utils/
  * @author SunDevil311
- * @updated 2025-05-28
+ * @updated 2025-06-03
  */
 
 /**
+ * Check if user has manually set tracking preference.
+ * @returns {boolean}
+ */
+export function hasUserManuallySetTrackingPreference() {
+  if (typeof document === "undefined") return false;
+
+  const cookies = document.cookie;
+  return (
+    cookies.includes("enable_tracking=true") ||
+    cookies.includes("disable_tracking=true")
+  );
+}
+
+/**
+ * Determine if the user allows tracking based on cookies, DNT, and GPC.
  * @returns {boolean}
  */
 export function shouldTrackUser() {
+  if (
+    typeof window === "undefined" ||
+    typeof navigator === "undefined" ||
+    typeof document === "undefined"
+  ) {
+    return false;
+  }
+
+  const cookies = document.cookie;
   const windowDNT = /** @type {any} */ (window).doNotTrack;
   const navigatorGPC = /** @type {any} */ (navigator).globalPrivacyControl;
 
   const dnt = navigator.doNotTrack === "1" || windowDNT === "1";
   const gpc = navigatorGPC === true;
 
-  const manualOptOut = document.cookie.includes("disable_tracking=true");
-  const manualOptIn = document.cookie.includes("enable_tracking=true");
+  const manualOptOut = cookies.includes("disable_tracking=true");
+  const manualOptIn = cookies.includes("enable_tracking=true");
 
   console.log("[Privacy] Opt-in cookie present:", manualOptIn);
   console.log("[Privacy] Opt-out cookie present:", manualOptOut);
 
-  // Opt-in overrides everything; opt-out disables regardless of DNT/GPC
   if (manualOptIn) return true;
   if (manualOptOut) return false;
 
   return !dnt && !gpc;
 }
+
+/**
+ * Determines if user should be reminded to reconsent (after 6 months).
+ * @returns {boolean}
+ */
+export function shouldRemindUserToReconsent() {
+  if (typeof document === "undefined") return false;
+
+  if (!hasUserManuallySetTrackingPreference()) return false;
+
+  const match = document.cookie.match(/tracking_consent_timestamp=(\d+)/);
+  if (!match) return true;
+
+  const timestamp = Number(match[1]);
+  if (isNaN(timestamp)) return true;
+
+  const age = Date.now() - timestamp;
+
+  return age > 1000 * 60 * 60 * 24 * 180; // 6 months
+}

package/src/lib/utils/trackingCookies.js

@@ -11,30 +11,60 @@ This file is part of Network Pro.
  * @description Handles setting, clearing, and toggling tracking preference cookies.
  * @module src/lib/utils/
  * @author SunDevil311
- * @updated 2025-05-28
+ * @updated 2025-06-04
  */
 
+// 6 months (in seconds). Will be centralized later.
+const DEFAULT_COOKIE_MAX_AGE = 60 * 60 * 24 * 180;
+
+/**
+ * Builds a standard cookie string for use in all tracking cookies.
+ * @param {number} maxAge
+ * @returns {string}
+ */
+function buildCookieSettings(maxAge) {
+  return `path=/; max-age=${maxAge}; expires=${new Date(Date.now() + maxAge * 1000).toUTCString()}; SameSite=Lax; Secure`;
+}
+
 /**
- * Set a tracking preference cookie.
+ * Sets tracking preference cookies based on type.
  * @param {"enable" | "disable"} type
+ * @param {number} [maxAge=DEFAULT_COOKIE_MAX_AGE]
  */
-export function setTrackingPreference(type) {
-  const maxAge = 60 * 60 * 24 * 365 * 10; // 10 years
-  const cookieSettings = `path=/; max-age=${maxAge}; SameSite=Lax`;
+export function setTrackingPreference(type, maxAge = DEFAULT_COOKIE_MAX_AGE) {
+  if (typeof document === "undefined") return; // SSR guard
+
+  const cookieSettings = buildCookieSettings(maxAge);
+  const now = Date.now();
 
   if (type === "enable") {
     document.cookie = `enable_tracking=true; ${cookieSettings}`;
-    document.cookie = `disable_tracking=; path=/; max-age=0; SameSite=Lax`;
+    document.cookie = `tracking_consent_timestamp=${now}; ${cookieSettings}`;
+    clearCookie("disable_tracking");
   } else if (type === "disable") {
     document.cookie = `disable_tracking=true; ${cookieSettings}`;
-    document.cookie = `enable_tracking=; path=/; max-age=0; SameSite=Lax`;
+    document.cookie = `tracking_consent_timestamp=${now}; ${cookieSettings}`;
+    clearCookie("enable_tracking");
   }
 }
 
 /**
- * Clear both tracking cookies.
+ * Clears all tracking-related cookies.
  */
 export function clearTrackingPreferences() {
-  document.cookie = `enable_tracking=; path=/; max-age=0; SameSite=Lax`;
-  document.cookie = `disable_tracking=; path=/; max-age=0; SameSite=Lax`;
+  if (typeof document === "undefined") return; // SSR guard
+
+  clearCookie("enable_tracking");
+  clearCookie("disable_tracking");
+  clearCookie("tracking_consent_timestamp");
+}
+
+/**
+ * Clears an individual cookie.
+ * @param {string} name
+ */
+function clearCookie(name) {
+  if (typeof document === "undefined") return; // SSR guard
+
+  document.cookie = `${name}=; path=/; max-age=0; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax; Secure`;
 }

package/src/lib/utils/trackingStatus.js

@@ -9,12 +9,16 @@ This file is part of Network Pro.
 /**
  * @file trackingStatus.js
  * @description Get tracking preferences based on cookies and browser privacy signals.
- * @module src/lib/utils/
+ * @module src/lib/utils
  * @author SunDevil311
  * @updated 2025-05-28
  */
 
+import { browser } from "$app/environment";
+
 /**
+ * Gets the current tracking preferences based on browser cookies and signals.
+ *
  * @returns {{
  *   optedOut: boolean,
  *   optedIn: boolean,
@@ -24,12 +28,23 @@ This file is part of Network Pro.
  * }}
  */
 export function getTrackingPreferences() {
+  // Prevent errors during SSR (no document or navigator)
+  if (!browser) {
+    return {
+      optedOut: false,
+      optedIn: false,
+      dnt: false,
+      gpc: false,
+      status: "⏳ Checking tracking preferences...",
+    };
+  }
+
   const cookies = document.cookie;
   const optedOut = cookies.includes("disable_tracking=true");
   const optedIn = cookies.includes("enable_tracking=true");
-  const dnt = navigator.doNotTrack === "1";
 
-  // @ts-expect-error: 'globalPrivacyControl' is a non-standard property
+  const dnt = navigator.doNotTrack === "1";
+  // @ts-expect-error: 'globalPrivacyControl' is non-standard
   const gpc = navigator.globalPrivacyControl === true;
 
   let status = "⚙️ Using default settings (tracking enabled)";

package/src/routes/+layout.js

@@ -42,5 +42,3 @@ export function load({ url }) {
     meta: currentMeta, // Return the meta data (either from the route or the fallback)
   };
 }
-
-// cspell:ignore posthog

package/src/routes/+layout.svelte

@@ -9,61 +9,61 @@ This file is part of Network Pro.
 <script>
   export let data;
 
+  import { onMount } from "svelte";
+  import { afterNavigate } from "$app/navigation";
+  import { initPostHog, showReminder, capture } from "$lib/stores/posthog";
+  import { registerServiceWorker } from "$lib/registerServiceWorker.js";
+  import { browser } from "$app/environment";
+  import { shouldTrackUser } from "$lib/utils/privacy.js";
+
   import ContainerSection from "$lib/components/ContainerSection.svelte";
   import Footer from "$lib/components/layout/Footer.svelte";
   import HeaderDefault from "$lib/components/layout/HeaderDefault.svelte";
   import HeaderHome from "$lib/components/layout/HeaderHome.svelte";
   import PWAInstallButton from "$lib/components/PWAInstallButton.svelte";
-  import { shouldTrackUser } from "$lib/utils/privacy.js";
-  import { onMount } from "svelte";
-  import { registerServiceWorker } from "$lib/registerServiceWorker.js";
-  import { browser } from "$app/environment";
+
   import "$lib/styles/global.min.css";
   import "$lib/styles/fa-global.css";
 
-  // Import favicon images
   import logoPng from "$lib/img/logo-web.png";
   import logoWbp from "$lib/img/logo-web.webp";
   import faviconSvg from "$lib/img/favicon.svg";
   import appleTouchIcon from "$lib/img/icon-180x180.png";
 
-  // Declare PostHog as null initially
-  /** @type {typeof import('$lib/components/PostHog.svelte').default | null} */
-  let PostHog = null;
+  $: shouldShowReminder = $showReminder;
 
-  if (browser) {
-    // Preload all core images (logos + apple touch)
-    [logoPng, logoWbp, appleTouchIcon].forEach((src) => {
-      const img = new Image();
-      img.src = src;
-    });
+  onMount(() => {
+    console.log("[APP] onMount triggered in +layout.svelte");
 
-    // Run setup when component mounts (only in browser)
-    onMount(() => {
-      console.log("[APP] onMount triggered in +layout.svelte");
-      registerServiceWorker();
+    registerServiceWorker();
+    initPostHog();
+
+    // Register navigation tracking only on client
+    afterNavigate(() => {
+      capture("$pageview");
+    });
 
+    if (browser) {
       const isDev = import.meta.env.MODE === "development";
 
-      console.log("ENV MODE =", import.meta.env.MODE); // Should be "development"
-      console.log("isDev =", isDev);
-      console.log("shouldTrackUser =", shouldTrackUser());
-
-      if (isDev || shouldTrackUser()) {
-        import("$lib/components/PostHog.svelte").then((module) => {
-          PostHog = module.default;
-
-          if (isDev) {
-            console.log("[Dev] ✅ PostHog component loaded (tracking enabled)");
-          }
-        });
-      } else {
-        console.log(
-          "[Privacy] ⛔ Skipping PostHog component due to DNT or GPC signal.",
-        );
+      // Check for ?debug=true in URL (no persistence)
+      const urlParams = new URLSearchParams(window.location.search);
+      const debug = urlParams.get("debug") === "true";
+
+      if (isDev || debug) {
+        console.log("ENV MODE =", import.meta.env.MODE);
+        console.log("isDev =", isDev);
+        console.log("debug param =", debug);
+        console.log("shouldTrackUser =", shouldTrackUser()); // Now called statically
       }
-    });
-  }
+
+      // Preload logo assets
+      [logoPng, logoWbp, appleTouchIcon].forEach((src) => {
+        const img = new Image();
+        img.src = src;
+      });
+    }
+  });
 
   // fallback values if data.meta not set
   const metaTitle =
@@ -103,10 +103,6 @@ This file is part of Network Pro.
 </header>
 <!-- END HEADER -->
 
-{#if PostHog}
-  <PostHog /> <!-- Add PostHog component when it's loaded -->
-{/if}
-
 <main>
   <slot />
 </main>

package/static/offline.min.css

@@ -1,7 +1,6 @@
 /*! ==========================================================================
-src/lib/styles/css/offline.css
-
+Copyright © 2025 Network Pro Strategies (Network Pro™)
 SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 =========================================================================== */
-html,body{height:100%;margin:0;padding:0}body{color:#fafafa;text-align:center;background-color:#191919;flex-direction:column;justify-content:center;align-items:center;margin:10px;padding:0 1rem;font-family:Arial,Helvetica,sans-serif;display:flex}.container{max-width:600px;margin:0 auto}h1{color:#fafafa;margin-bottom:1rem;font-size:2rem}p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.5}.icon{color:#ff5252;margin-bottom:1rem;font-size:4rem}.retry-button{color:#fafafa;cursor:pointer;background-color:#2e7d32;border:none;border-radius:4px;margin-top:1rem;padding:12px 24px;font-family:Arial,Helvetica,sans-serif;font-size:1rem;transition:background-color .2s}.retry-button:hover{background-color:#388e3c}.status{color:#bdbdbd;background-color:#ffffff0d;border-radius:4px;margin:1rem 0;padding:1rem;font-size:.9rem}a{text-decoration:none}a:link{color:#ffc627}a:hover,a:active{color:#ffc627;text-decoration:underline}a:focus{color:#191919;background-color:#ffc627}a:visited,a:visited:hover{color:#7f6227}.help-text{color:#bdbdbd;margin-top:2rem;font-size:.9rem}
+html,body{height:100%;margin:0;padding:0}body{color:#fafafa;text-align:center;background-color:#191919;flex-direction:column;justify-content:center;align-items:center;margin:10px;padding:0 1rem;font-family:Arial,Helvetica,sans-serif;display:flex}.container{max-width:600px;margin:0 auto}h1{color:#fafafa;margin-bottom:1rem;font-size:2rem}p{margin-bottom:1.5rem;font-size:1.1rem;line-height:1.5}.icon{color:#ff5252;margin-bottom:1rem;font-size:4rem}.retry-button{color:#fafafa;cursor:pointer;background-color:#2e7d32;border:none;border-radius:4px;margin-top:1rem;padding:12px 24px;font-family:Arial,Helvetica,sans-serif;font-size:1rem;transition:background-color .2s}.retry-button:hover{background-color:#388e3c}.status{color:#bdbdbd;background-color:#ffffff0d;border-radius:4px;margin:1rem 0;padding:1rem;font-size:.9rem}a{text-decoration:none}a:link{color:#ffc627}a:hover,a:active{color:#ffc627;text-decoration:underline}a:focus{color:#191919;background-color:#ffc627}a:visited,a:visited:hover{color:#7f6227}.help-text{color:#bdbdbd;margin-top:2rem;font-size:.9rem}