Add By Runner and By Source charts to playtime reports

- Add runners and sources charts to modern and platinum templates
- Update responsive layout to use grid for multiple charts
- Update .gitignore to exclude pga.db

.gitignore

@@ -259,3 +259,4 @@ flycheck_*.el
 # Built Visual Studio Code Extensions
 *.vsix
 
+pga.db

CLAUDE.md

@@ -13,9 +13,21 @@ Generate report with defaults:
 python generate_report.py
 ```
 
-Generate report with custom options:
+Generate report with modern style:
 ```bash
-python generate_report.py --db pga.db --output report.html --top 10 --background background.png --template platinum.html
+python generate_report.py --style glassmorphism --output report.html
+python generate_report.py --style brutalism --output report.html
+python generate_report.py --style neumorphism --output report.html
+```
+
+Generate report with legacy Platinum template:
+```bash
+python generate_report.py --template templates/platinum.html --output report.html
+```
+
+All options:
+```bash
+python generate_report.py --db pga.db --output report.html --top 10 --background background.png --style glassmorphism
 ```
 
 ## Architecture
@@ -23,12 +35,24 @@ python generate_report.py --db pga.db --output report.html --top 10 --background
 **Report generator (`generate_report.py`):**
 - Reads Lutris SQLite database (`pga.db`) containing games, categories, and playtime data
 - Embeds all data (games JSON, background image as base64) directly into a self-contained HTML file
-- Loads HTML template from external file (default: `platinum.html`)
+- Loads HTML template from `templates/` folder (default: `templates/platinum.html`)
 
-**HTML template (`platinum.html`):**
+**HTML templates (`templates/`):**
-- Chart.js doughnut charts and dynamic JavaScript filtering
+- **modern.html**: Unified template for modern styles (brutalism, glassmorphism, neumorphism)
-- Mac OS 9 Platinum visual style with placeholder tokens for assets
+- **platinum.html**: Legacy Mac OS 9 Platinum visual style (separate template due to unique structure)
-- Tokens like `__ALL_GAMES__`, `__BACKGROUND_IMAGE__` are replaced at generation time
+- All templates use Chart.js doughnut charts and dynamic JavaScript filtering
+- Placeholder tokens like `__ALL_GAMES__`, `__BACKGROUND_IMAGE__` are replaced at generation time
+- Modern templates support light/dark/auto theme toggle button
+
+**Style system (`styles.py`):**
+- CSS definitions for each modern style (brutalism, glassmorphism, neumorphism)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CSS__`
+- Use `--style` argument to select a modern style instead of `--template`
+
+**Javascript (`templates/script.js`):**
+- A single common script is used for each modern style (brutalism, glassmorphism, neumorphism)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CONFIG__`
+- Data inserted via `__ALL_GAMES__` and `__TOP_N__`
 
 **Database schema (`schema.py`):**
 - Reference file documenting Lutris database structure
@@ -38,11 +62,12 @@ python generate_report.py --db pga.db --output report.html --top 10 --background
 - Fully static, can be hosted on any web server
 - Client-side filtering by service (Steam, GOG, itch.io, local)
 - Expandable "Others" row in games table
-- Light/dark mode support via CSS `prefers-color-scheme`
+- Light/dark/auto theme toggle button with persistent preference
+- Responsive design for mobile and desktop
 
 ## Key Data Relationships
 
 - Games have a `service` field (steam, gog, itchio, humblebundle, or NULL for local)
 - Games link to categories via `games_categories` join table
-- Categories like `.hidden`, `favorite`, `Horny` are filtered out in the report
+- Categories like `.hidden` and `favorite` are filtered out in the report display
 - `playtime` is cumulative hours (REAL), not per-session data

generate_report.py

@@ -21,9 +21,14 @@ import json
 import sqlite3
 from pathlib import Path
 
+from styles import get_theme_css, get_theme_config
+
 # Directory where this script is located (for finding template.html)
 SCRIPT_DIR = Path(__file__).parent
 
+# Modern styles that use the unified template
+MODERN_STYLES = ["brutalism", "glassmorphism", "neumorphism"]
+
 
 def load_template(template_file: str) -> str:
     """Load the HTML template from the specified file."""
@@ -31,6 +36,12 @@ def load_template(template_file: str) -> str:
     return template_path.read_text(encoding="utf-8")
 
 
+def load_script(script_file: str) -> str:
+    """Load the JS script from the specified file."""
+    script_path = SCRIPT_DIR / script_file
+    return script_path.read_text(encoding="utf-8")
+
+
 def load_asset_as_base64(path: Path, mime_type: str) -> str:
     """Load a file and return it as a base64 data URL."""
     if path.exists():
@@ -49,7 +60,7 @@ def get_all_games(db_path: str) -> tuple[list[dict], int]:
     total_library = cursor.fetchone()[0]
 
     cursor.execute("""
-        SELECT id, name, playtime, COALESCE(service, 'local') as service
+        SELECT id, name, playtime, COALESCE(service, 'local') as service, COALESCE(runner, 'unknown') as runner
         FROM games
         WHERE playtime > 0
         ORDER BY playtime DESC
@@ -75,6 +86,7 @@ def get_all_games(db_path: str) -> tuple[list[dict], int]:
             "name": row[1],
             "playtime": row[2],
             "service": row[3],
+            "runner": row[4],
             "categories": game_categories.get(row[0], [])
         }
         for row in games_rows
@@ -82,7 +94,7 @@ def get_all_games(db_path: str) -> tuple[list[dict], int]:
     return games, total_library
 
 
-def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str, template_file: str, bg_image_path: str = None) -> None:
+def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str, template_file: str, bg_image_path: str = None, style: str = None) -> None:
     """Generate the HTML report."""
     all_games, total_library = get_all_games(db_path)
 
@@ -103,50 +115,71 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
         background_image = load_asset_as_base64(assets_path / "Others" / "stripes.png", "image/png")
         background_image_custom = "none"  # For templates that prefer no default background
 
-    # Load fonts
+    # Check if using modern unified template
-    font_charcoal = load_asset_as_base64(assets_path / "Charcoal.ttf", "font/truetype")
+    if style and style in MODERN_STYLES:
-    font_monaco = load_asset_as_base64(assets_path / "MONACO.TTF", "font/truetype")
+        html = load_template("templates/modern.html")
 
-    # Load images
+        # Inject theme CSS and config
-    titlebar_bg = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
+        theme_css = get_theme_css(style)
-    title_stripes = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
+        theme_config = get_theme_config(style)
-    close_btn = load_asset_as_base64(assets_path / "Windows" / "close-active.png", "image/png")
-    hide_btn = load_asset_as_base64(assets_path / "Windows" / "maximize-active.png", "image/png")
-    shade_btn = load_asset_as_base64(assets_path / "Windows" / "shade-active.png", "image/png")
-    check_off = load_asset_as_base64(assets_path / "Check-Radio" / "check-normal.png", "image/png")
-    check_on = load_asset_as_base64(assets_path / "Check-Radio" / "check-active.png", "image/png")
 
-    # Load scrollbar images
+        # Inject javascript
-    scrollbar_trough_v = load_asset_as_base64(assets_path / "Scrollbars" / "trough-scrollbar-vert.png", "image/png")
+        javascript = load_script('templates/script.js')
-    scrollbar_thumb_v = load_asset_as_base64(assets_path / "Scrollbars" / "slider-vertical.png", "image/png")
+        javascript = javascript.replace("__ALL_GAMES__", json.dumps(all_games))
-    scrollbar_up = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-up.png", "image/png")
+        javascript = javascript.replace("__TOP_N__", str(top_n))
-    scrollbar_down = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-down.png", "image/png")
+        javascript = javascript.replace("__THEME_CONFIG__", theme_config)
 
-    # Load tab images
+        html = html.replace("__THEME_CSS__", theme_css)
-    tab_active = load_asset_as_base64(assets_path / "Tabs" / "tab-top-active.png", "image/png")
+        html = html.replace("__SCRIPT__", javascript)
-    tab_inactive = load_asset_as_base64(assets_path / "Tabs" / "tab-top.png", "image/png")
+        html = html.replace("__TOTAL_LIBRARY__", str(total_library))
+        html = html.replace("__BACKGROUND_IMAGE__", background_image)
+        html = html.replace("__BACKGROUND_IMAGE_CUSTOM__", background_image_custom)
+    else:
+        # Legacy template handling (platinum and others)
+        # Load fonts
+        font_charcoal = load_asset_as_base64(assets_path / "Charcoal.ttf", "font/truetype")
+        font_monaco = load_asset_as_base64(assets_path / "MONACO.TTF", "font/truetype")
 
-    html = load_template(template_file)
+        # Load images
-    html = html.replace("__ALL_GAMES__", json.dumps(all_games))
+        titlebar_bg = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
-    html = html.replace("__TOP_N__", str(top_n))
+        title_stripes = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
-    html = html.replace("__TOTAL_LIBRARY__", str(total_library))
+        close_btn = load_asset_as_base64(assets_path / "Windows" / "close-active.png", "image/png")
-    html = html.replace("__FONT_CHARCOAL__", font_charcoal)
+        hide_btn = load_asset_as_base64(assets_path / "Windows" / "maximize-active.png", "image/png")
-    html = html.replace("__FONT_MONACO__", font_monaco)
+        shade_btn = load_asset_as_base64(assets_path / "Windows" / "shade-active.png", "image/png")
-    html = html.replace("__BACKGROUND_IMAGE__", background_image)
+        check_off = load_asset_as_base64(assets_path / "Check-Radio" / "check-normal.png", "image/png")
-    html = html.replace("__BACKGROUND_IMAGE_CUSTOM__", background_image_custom)
+        check_on = load_asset_as_base64(assets_path / "Check-Radio" / "check-active.png", "image/png")
-    html = html.replace("__TITLEBAR_BG__", titlebar_bg)
+
-    html = html.replace("__TITLE_STRIPES__", title_stripes)
+        # Load scrollbar images
-    html = html.replace("__CLOSE_BTN__", close_btn)
+        scrollbar_trough_v = load_asset_as_base64(assets_path / "Scrollbars" / "trough-scrollbar-vert.png", "image/png")
-    html = html.replace("__HIDE_BTN__", hide_btn)
+        scrollbar_thumb_v = load_asset_as_base64(assets_path / "Scrollbars" / "slider-vertical.png", "image/png")
-    html = html.replace("__SHADE_BTN__", shade_btn)
+        scrollbar_up = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-up.png", "image/png")
-    html = html.replace("__CHECK_OFF__", check_off)
+        scrollbar_down = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-down.png", "image/png")
-    html = html.replace("__CHECK_ON__", check_on)
+
-    html = html.replace("__SCROLLBAR_TROUGH_V__", scrollbar_trough_v)
+        # Load tab images
-    html = html.replace("__SCROLLBAR_THUMB_V__", scrollbar_thumb_v)
+        tab_active = load_asset_as_base64(assets_path / "Tabs" / "tab-top-active.png", "image/png")
-    html = html.replace("__SCROLLBAR_UP__", scrollbar_up)
+        tab_inactive = load_asset_as_base64(assets_path / "Tabs" / "tab-top.png", "image/png")
-    html = html.replace("__SCROLLBAR_DOWN__", scrollbar_down)
+
-    html = html.replace("__TAB_ACTIVE__", tab_active)
+        html = load_template(template_file)
-    html = html.replace("__TAB_INACTIVE__", tab_inactive)
+        html = html.replace("__ALL_GAMES__", json.dumps(all_games))
+        html = html.replace("__TOP_N__", str(top_n))
+        html = html.replace("__TOTAL_LIBRARY__", str(total_library))
+        html = html.replace("__FONT_CHARCOAL__", font_charcoal)
+        html = html.replace("__FONT_MONACO__", font_monaco)
+        html = html.replace("__BACKGROUND_IMAGE__", background_image)
+        html = html.replace("__BACKGROUND_IMAGE_CUSTOM__", background_image_custom)
+        html = html.replace("__TITLEBAR_BG__", titlebar_bg)
+        html = html.replace("__TITLE_STRIPES__", title_stripes)
+        html = html.replace("__CLOSE_BTN__", close_btn)
+        html = html.replace("__HIDE_BTN__", hide_btn)
+        html = html.replace("__SHADE_BTN__", shade_btn)
+        html = html.replace("__CHECK_OFF__", check_off)
+        html = html.replace("__CHECK_ON__", check_on)
+        html = html.replace("__SCROLLBAR_TROUGH_V__", scrollbar_trough_v)
+        html = html.replace("__SCROLLBAR_THUMB_V__", scrollbar_thumb_v)
+        html = html.replace("__SCROLLBAR_UP__", scrollbar_up)
+        html = html.replace("__SCROLLBAR_DOWN__", scrollbar_down)
+        html = html.replace("__TAB_ACTIVE__", tab_active)
+        html = html.replace("__TAB_INACTIVE__", tab_inactive)
 
     Path(output_path).write_text(html, encoding="utf-8")
     print(f"Report generated: {output_path}")
@@ -188,7 +221,13 @@ def main():
     parser.add_argument(
         "--template",
         default="templates/platinum.html",
-        help="HTML template file to use (default: templates/platinum.html)"
+        help="HTML template file to use (default: templates/platinum.html). Ignored if --style is used."
+    )
+    parser.add_argument(
+        "--style",
+        choices=["brutalism", "glassmorphism", "neumorphism"],
+        default=None,
+        help="Modern style to use (brutalism, glassmorphism, neumorphism). Overrides --template."
     )
 
     args = parser.parse_args()
@@ -201,12 +240,31 @@ def main():
         print(f"Error: Assets directory not found: {args.assets}")
         return 1
 
-    template_path = SCRIPT_DIR / args.template
+    # Determine style from --style or --template
+    style = args.style
+
+    # If no --style provided, check if --template points to a modern CSS file
+    if not style and args.template.endswith('.css'):
+        template_path = Path(args.template)
+        style_name = template_path.stem  # e.g., "brutalism" from "brutalism.css"
+        if style_name in MODERN_STYLES:
+            style = style_name
+
+    # Validate template/style
+    if style and style in MODERN_STYLES:
+        template_path = SCRIPT_DIR / "templates" / "modern.html"
+        css_path = SCRIPT_DIR / "templates" / f"{style}.css"
+        if not css_path.exists():
+            print(f"Error: CSS file not found: {css_path}")
+            return 1
+    else:
+        template_path = SCRIPT_DIR / args.template
+
     if not template_path.exists():
         print(f"Error: Template file not found: {template_path}")
         return 1
 
-    generate_report(args.db, args.output, args.top, args.assets, args.template, args.background)
+    generate_report(args.db, args.output, args.top, args.assets, args.template, args.background, style)
     return 0
 
 

styles.py

@@ -0,0 +1,107 @@
+"""CSS styles and theme configurations for modern templates."""
+
+####################################################################################################
+# Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      #
+#                                                                                                  #
+# Permission to use, copy, modify, and/or distribute this software for any purpose with or without #
+# fee is hereby granted.                                                                           #
+#                                                                                                  #
+# THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     #
+# SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  #
+# AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      #
+# WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        #
+# NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE #
+# OF THIS SOFTWARE.                                                                                #
+####################################################################################################
+
+import json
+from pathlib import Path
+
+# Directory where templates are located
+TEMPLATES_DIR = Path(__file__).parent / "templates"
+
+# Theme configurations for Chart.js
+THEME_CONFIGS = {
+    "brutalism": {
+        "colors": [
+            "#ff0000", "#0000ff", "#ffff00", "#00ff00", "#ff00ff",
+            "#00ffff", "#ff8800", "#8800ff", "#0088ff", "#88ff00",
+            "#888888"
+        ],
+        "fontFamily": "'Courier New', monospace",
+        "fontWeight": "bold",
+        "pointStyle": "rect",
+        "textColorLight": "#000000",
+        "textColorDark": "#ffffff",
+        "borderColorLight": "#000000",
+        "borderColorDark": "#ffffff",
+        "borderWidth": 3,
+        "tooltipBg": "#000000",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "#ffffff",
+        "tooltipBorderWidth": 2,
+        "tooltipCornerRadius": 0,
+        "uppercaseTooltip": True
+    },
+    "glassmorphism": {
+        "colors": [
+            "#6366f1", "#8b5cf6", "#ec4899", "#f43f5e", "#f97316",
+            "#eab308", "#22c55e", "#14b8a6", "#06b6d4", "#3b82f6",
+            "#64748b"
+        ],
+        "fontFamily": "'Inter', sans-serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#1a1a2e",
+        "textColorDark": "#f0f0f5",
+        "borderColorLight": "rgba(255, 255, 255, 0.2)",
+        "borderColorDark": "rgba(255, 255, 255, 0.2)",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(0, 0, 0, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 8,
+        "uppercaseTooltip": False
+    },
+    "neumorphism": {
+        "colors": [
+            "#6366f1", "#8b5cf6", "#ec4899", "#f43f5e", "#f97316",
+            "#eab308", "#22c55e", "#14b8a6", "#06b6d4", "#3b82f6",
+            "#64748b"
+        ],
+        "fontFamily": "'Inter', sans-serif",
+        "fontWeight": "normal",
+        "pointStyle": "circle",
+        "textColorLight": "#2d3436",
+        "textColorDark": "#f0f0f5",
+        "borderColorLight": "rgba(255, 255, 255, 0.3)",
+        "borderColorDark": "rgba(255, 255, 255, 0.3)",
+        "borderWidth": 3,
+        "tooltipBg": "rgba(0, 0, 0, 0.8)",
+        "tooltipTitleColor": "#ffffff",
+        "tooltipBodyColor": "#ffffff",
+        "tooltipBorderColor": "transparent",
+        "tooltipBorderWidth": 0,
+        "tooltipCornerRadius": 8,
+        "uppercaseTooltip": False
+    }
+}
+
+
+def get_theme_css(style: str) -> str:
+    """Get the CSS for a given style by reading from the corresponding .css file."""
+    css_file = TEMPLATES_DIR / f"{style}.css"
+    if css_file.exists():
+        return css_file.read_text(encoding="utf-8")
+    # Fallback to glassmorphism if style not found
+    fallback = TEMPLATES_DIR / "glassmorphism.css"
+    return fallback.read_text(encoding="utf-8")
+
+
+def get_theme_config(style: str) -> str:
+    """Get the theme config as JSON string for a given style."""
+    config = THEME_CONFIGS.get(style, THEME_CONFIGS["glassmorphism"])
+    return json.dumps(config)

templates/brutalism.css

@@ -0,0 +1,628 @@
+/***************************************************************************************************
+ * Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      *
+ *                                                                                                  *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without *
+ * fee is hereby granted.                                                                           *
+ *                                                                                                  *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     *
+ * SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  *
+ * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      *
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        *
+ * NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE *
+ * OF THIS SOFTWARE.                                                                                *
+ ****************************************************************************************************/
+
+:root {
+    --bg-base: #ffffff;
+    --bg-primary: #ffffff;
+    --bg-secondary: #f0f0f0;
+    --bg-tertiary: #e0e0e0;
+    --text-primary: #000000;
+    --text-secondary: #333333;
+    --text-muted: #666666;
+    --border-color: #000000;
+    --border-width: 3px;
+    --accent-color: #ff0000;
+    --accent-secondary: #0000ff;
+    --accent-tertiary: #ffff00;
+    --selection-bg: #ffff00;
+    --selection-text: #000000;
+    --shadow-offset: 6px;
+}
+
+[data-theme="dark"] {
+    --bg-base: #000000;
+    --bg-primary: #000000;
+    --bg-secondary: #111111;
+    --bg-tertiary: #222222;
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --text-muted: #888888;
+    --border-color: #ffffff;
+    --accent-color: #ff3333;
+    --accent-secondary: #3333ff;
+    --accent-tertiary: #ffff33;
+    --selection-bg: #ff3333;
+    --selection-text: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --bg-base: #000000;
+        --bg-primary: #000000;
+        --bg-secondary: #111111;
+        --bg-tertiary: #222222;
+        --text-primary: #ffffff;
+        --text-secondary: #cccccc;
+        --text-muted: #888888;
+        --border-color: #ffffff;
+        --accent-color: #ff3333;
+        --accent-secondary: #3333ff;
+        --accent-tertiary: #ffff33;
+        --selection-bg: #ff3333;
+        --selection-text: #000000;
+    }
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: var(--bg-base);
+    background-image: __BACKGROUND_IMAGE_CUSTOM__;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.4;
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border: var(--border-width) solid var(--border-color);
+    background: var(--bg-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
+    transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.theme-toggle:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color);
+}
+
+.theme-toggle:active {
+    transform: translate(2px, 2px);
+    box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0 var(--border-color);
+}
+
+.theme-toggle .icon {
+    line-height: 1;
+}
+
+.theme-toggle .icon-auto {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theme-toggle .icon-auto::before,
+.theme-toggle .icon-auto::after {
+    position: absolute;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.theme-toggle .icon-auto::before {
+    content: '☀️';
+    clip-path: inset(0 50% 0 0);
+}
+
+.theme-toggle .icon-auto::after {
+    content: '🌙';
+    clip-path: inset(0 0 0 50%);
+}
+
+/* Card Style */
+.card {
+    background: var(--bg-primary);
+    border: var(--border-width) solid var(--border-color);
+    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
+    margin-bottom: 24px;
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 12px 16px;
+    border-bottom: var(--border-width) solid var(--border-color);
+    background: var(--accent-tertiary);
+}
+
+.card-title {
+    font-size: 18px;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .card-title {
+    color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .card-title {
+        color: #000000;
+    }
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.summaries-content {
+    padding: 0;
+    padding-top: 16px;
+}
+
+/* Filters */
+.filters {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 12px;
+    background: var(--bg-secondary);
+    border: 2px solid var(--border-color);
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 12px;
+    transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.filter-label:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 4px 4px 0 var(--border-color);
+}
+
+.filter-label input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--border-color);
+    background: var(--bg-primary);
+    cursor: pointer;
+    position: relative;
+}
+
+.filter-label input[type="checkbox"]:checked {
+    background: var(--accent-color);
+}
+
+.filter-label input[type="checkbox"]:checked::after {
+    content: '\2715';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 14px;
+    font-weight: 900;
+    color: var(--bg-primary);
+}
+
+.filter-label .service-name {
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.filter-label .service-count {
+    color: var(--text-muted);
+    font-size: 11px;
+}
+
+/* Stats */
+.stats {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.stat {
+    text-align: center;
+    padding: 20px 30px;
+    background: var(--bg-secondary);
+    border: var(--border-width) solid var(--border-color);
+    min-width: 150px;
+}
+
+.stat-value {
+    font-size: 36px;
+    font-weight: 900;
+    color: var(--accent-color);
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 700;
+}
+
+/* Charts */
+.charts-wrapper {
+    display: grid;
+    grid-auto-columns: minmax(280px, 450px);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 450px));
+    grid-gap: 24px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.chart-container {
+    min-width: 280px;
+    max-width: 450px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border: var(--border-width) solid var(--border-color);
+}
+
+.chart-title {
+    font-size: 14px;
+    font-weight: 900;
+    text-align: center;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+@media (max-width: 700px) {
+    .charts-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+    .chart-container {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 0;
+    padding: 0 16px;
+    margin-bottom: -3px;
+    position: relative;
+    z-index: 1;
+}
+
+.tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-weight: 900;
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 1px;
+    background: var(--bg-tertiary);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom: none;
+    margin-right: -3px;
+    transition: none;
+}
+
+.tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+}
+
+.tab.active {
+    color: var(--accent-color);
+    background: var(--bg-secondary);
+    position: relative;
+}
+
+.tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--bg-secondary);
+}
+
+.tab-content {
+    background: var(--bg-secondary);
+    border: var(--border-width) solid var(--border-color);
+    padding: 16px;
+}
+
+.tab-panel {
+    display: none;
+}
+
+.tab-panel.active {
+    display: block;
+}
+
+/* Tables */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 900;
+    color: var(--text-primary);
+    border-bottom: var(--border-width) solid var(--border-color);
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 1px;
+    background: var(--bg-tertiary);
+}
+
+td {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
+}
+
+tr:hover td {
+    background: var(--selection-bg);
+    color: var(--selection-text);
+}
+
+tr:hover .service-badge {
+    background: var(--border-color);
+    color: var(--bg-primary);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+.time {
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+}
+
+.percent {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-muted);
+    font-weight: 700;
+}
+
+.color-box {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    vertical-align: middle;
+    border: 2px solid var(--border-color);
+}
+
+.service-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 6px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    color: var(--text-muted);
+    margin-left: 8px;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.category-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 6px;
+    background: var(--accent-secondary);
+    border: 1px solid var(--border-color);
+    color: var(--bg-primary);
+    margin-left: 4px;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.no-data {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-muted);
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+/* Others row expansion */
+.others-row {
+    cursor: pointer;
+}
+
+.others-row td:first-child::before {
+    content: '\25B6';
+    display: inline-block;
+    margin-right: 8px;
+    font-size: 10px;
+    transition: transform 0.1s;
+}
+
+.others-row.expanded td:first-child::before {
+    transform: rotate(90deg);
+}
+
+.others-detail {
+    display: none;
+    background: var(--bg-tertiary);
+}
+
+.others-detail.visible {
+    display: table-row;
+}
+
+.others-detail td {
+    padding-left: 32px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border: 1px solid var(--border-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+    }
+
+    .stats {
+        gap: 12px;
+    }
+
+    .stat {
+        padding: 16px 20px;
+        min-width: 100px;
+    }
+
+    .stat-value {
+        font-size: 28px;
+    }
+
+    .filter-label {
+        padding: 6px 10px;
+        font-size: 11px;
+    }
+
+    .tabs {
+        padding: 0 12px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+        font-size: 11px;
+    }
+
+    .theme-toggle {
+        width: 44px;
+        height: 44px;
+        font-size: 18px;
+    }
+}
+
+/* Scroll to Top Button */
+.scroll-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 50px;
+    height: 50px;
+    border: var(--border-width) solid var(--border-color);
+    background: var(--bg-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--border-color);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s, visibility 0.2s, transform 0.1s, box-shadow 0.1s;
+}
+
+.scroll-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-top:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--border-color);
+}
+
+.scroll-top:active {
+    transform: translate(2px, 2px);
+    box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0 var(--border-color);
+}
+
+.scroll-top-arrow {
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 12px solid var(--text-primary);
+}
+
+@media (max-width: 600px) {
+    .scroll-top {
+        width: 44px;
+        height: 44px;
+    }
+
+    .scroll-top-arrow {
+        border-left-width: 8px;
+        border-right-width: 8px;
+        border-bottom-width: 10px;
+    }
+}

templates/glassmorphism.css

@@ -0,0 +1,592 @@
+/***************************************************************************************************
+ * Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      *
+ *                                                                                                  *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without *
+ * fee is hereby granted.                                                                           *
+ *                                                                                                  *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     *
+ * SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  *
+ * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      *
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        *
+ * NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE *
+ * OF THIS SOFTWARE.                                                                                *
+ ****************************************************************************************************/
+
+:root {
+    --bg-primary: rgba(255, 255, 255, 0.25);
+    --bg-secondary: rgba(255, 255, 255, 0.15);
+    --bg-tertiary: rgba(255, 255, 255, 0.1);
+    --text-primary: #1a1a2e;
+    --text-secondary: #4a4a6a;
+    --text-muted: #6a6a8a;
+    --border-color: rgba(255, 255, 255, 0.3);
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    --accent-color: #6366f1;
+    --accent-hover: #4f46e5;
+    --selection-bg: rgba(99, 102, 241, 0.3);
+    --glass-blur: 20px;
+    --card-radius: 16px;
+}
+
+[data-theme="dark"] {
+    --bg-primary: rgba(30, 30, 50, 0.6);
+    --bg-secondary: rgba(40, 40, 70, 0.5);
+    --bg-tertiary: rgba(50, 50, 80, 0.4);
+    --text-primary: #f0f0f5;
+    --text-secondary: #c0c0d0;
+    --text-muted: #9090a0;
+    --border-color: rgba(255, 255, 255, 0.1);
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --accent-color: #818cf8;
+    --accent-hover: #6366f1;
+    --selection-bg: rgba(129, 140, 248, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --bg-primary: rgba(30, 30, 50, 0.6);
+        --bg-secondary: rgba(40, 40, 70, 0.5);
+        --bg-tertiary: rgba(50, 50, 80, 0.4);
+        --text-primary: #f0f0f5;
+        --text-secondary: #c0c0d0;
+        --text-muted: #9090a0;
+        --border-color: rgba(255, 255, 255, 0.1);
+        --shadow-color: rgba(0, 0, 0, 0.3);
+        --accent-color: #818cf8;
+        --accent-hover: #6366f1;
+        --selection-bg: rgba(129, 140, 248, 0.3);
+    }
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    font-size: 14px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #667eea;
+    background-image: url('__BACKGROUND_IMAGE__');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.5;
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow: 0 8px 32px var(--shadow-color);
+    transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+    background: var(--bg-secondary);
+}
+
+.theme-toggle .icon {
+    transition: transform 0.3s ease;
+}
+
+.theme-toggle .icon-auto {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theme-toggle .icon-auto::before,
+.theme-toggle .icon-auto::after {
+    position: absolute;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.theme-toggle .icon-auto::before {
+    content: '☀️';
+    clip-path: inset(0 50% 0 0);
+}
+
+.theme-toggle .icon-auto::after {
+    content: '🌙';
+    clip-path: inset(0 0 0 50%);
+}
+
+/* Card Style */
+.card {
+    background: var(--bg-primary);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border-radius: var(--card-radius);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 8px 32px var(--shadow-color);
+    margin-bottom: 24px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: 0 12px 40px var(--shadow-color);
+}
+
+.card-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-tertiary);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.summaries-content {
+    padding: 0;
+    padding-top: 16px;
+}
+
+/* Filters */
+.filters {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 16px;
+    border-radius: 24px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+}
+
+.filter-label:hover {
+    background: var(--bg-tertiary);
+}
+
+.filter-label input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    border: 2px solid var(--text-muted);
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.filter-label input[type="checkbox"]:checked {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+}
+
+.filter-label input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.filter-label .service-name {
+    text-transform: capitalize;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.filter-label .service-count {
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
+/* Stats */
+.stats {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.stat {
+    text-align: center;
+    padding: 20px 32px;
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    min-width: 140px;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--accent-color);
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Charts */
+.charts-wrapper {
+    display: grid;
+    grid-auto-columns: minmax(280px, 450px);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 450px));
+    grid-gap: 24px;
+    justify-content: center;
+}
+
+.chart-container {
+    min-width: 280px;
+    max-width: 450px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+}
+
+.chart-title {
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+}
+
+@media (max-width: 700px) {
+    .charts-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+    .chart-container {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 0 20px;
+    margin-bottom: -1px;
+    position: relative;
+    z-index: 1;
+}
+
+.tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-weight: 500;
+    border-radius: 12px 12px 0 0;
+    background: var(--bg-tertiary);
+    border: 1px solid transparent;
+    border-bottom: none;
+    transition: all 0.2s ease;
+}
+
+.tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-secondary);
+}
+
+.tab.active {
+    color: var(--accent-color);
+    background: var(--bg-secondary);
+    border-color: var(--border-color);
+}
+
+.tab-content {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 0 12px 12px 12px;
+    padding: 16px;
+}
+
+.tab-panel {
+    display: none;
+}
+
+.tab-panel.active {
+    display: block;
+}
+
+/* Tables */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-secondary);
+    border-bottom: 2px solid var(--border-color);
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.5px;
+}
+
+td {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
+}
+
+tr:hover td {
+    background: var(--selection-bg);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+.time {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+}
+
+.percent {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-muted);
+}
+
+.color-box {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    vertical-align: middle;
+    border-radius: 3px;
+}
+
+.service-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 8px;
+    background: var(--bg-tertiary);
+    border-radius: 12px;
+    color: var(--text-muted);
+    margin-left: 8px;
+    text-transform: capitalize;
+    font-weight: 500;
+}
+
+.category-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 8px;
+    background: rgba(99, 102, 241, 0.2);
+    border-radius: 12px;
+    color: var(--accent-color);
+    margin-left: 4px;
+    text-transform: capitalize;
+    font-weight: 500;
+}
+
+.no-data {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-muted);
+}
+
+/* Others row expansion */
+.others-row {
+    cursor: pointer;
+}
+
+.others-row td:first-child::before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--text-muted);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-right: 8px;
+    transition: transform 0.2s ease;
+}
+
+.others-row.expanded td:first-child::before {
+    transform: rotate(90deg);
+}
+
+.others-detail {
+    display: none;
+    background: var(--bg-tertiary);
+}
+
+.others-detail.visible {
+    display: table-row;
+}
+
+.others-detail td {
+    padding-left: 32px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+    }
+
+    .stats {
+        gap: 12px;
+    }
+
+    .stat {
+        padding: 16px 20px;
+        min-width: 100px;
+    }
+
+    .stat-value {
+        font-size: 22px;
+    }
+
+    .filter-label {
+        padding: 6px 12px;
+        font-size: 13px;
+    }
+
+    .tabs {
+        padding: 0 12px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+
+    .theme-toggle {
+        width: 40px;
+        height: 40px;
+        font-size: 16px;
+    }
+}
+
+/* Scroll to Top Button */
+.scroll-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 32px var(--shadow-color);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.scroll-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-top:hover {
+    transform: scale(1.1);
+    background: var(--bg-secondary);
+}
+
+.scroll-top-arrow {
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 10px solid var(--text-primary);
+}
+
+@media (max-width: 600px) {
+    .scroll-top {
+        width: 40px;
+        height: 40px;
+    }
+
+    .scroll-top-arrow {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-bottom-width: 8px;
+    }
+}

templates/modern.html

@@ -0,0 +1,158 @@
+<!--
+Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without
+fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
+SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
+NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE
+OF THIS SOFTWARE.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lutris Playtime Report</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        /* Theme-specific CSS injected here */
+        __THEME_CSS__
+    </style>
+</head>
+<body>
+    <!-- Scroll to Top Button -->
+    <button class="scroll-top" id="scroll-top" title="Scroll to top">
+        <div class="scroll-top-arrow"></div>
+    </button>
+
+    <!-- Theme Toggle Button -->
+    <button class="theme-toggle" id="theme-toggle" title="Toggle theme">
+        <span class="icon" id="theme-icon"></span>
+    </button>
+
+    <div class="card">
+        <div class="card-header">
+            <h1 class="card-title">Lutris Playtime Report</h1>
+        </div>
+        <div class="card-content">
+            <div class="filters" id="filters"></div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <h2 class="card-title">Statistics</h2>
+        </div>
+        <div class="card-content">
+            <div class="stats">
+                <div class="stat">
+                    <div class="stat-value" id="total-library">__TOTAL_LIBRARY__</div>
+                    <div class="stat-label">Games in Library</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value" id="total-games">0</div>
+                    <div class="stat-label">Games Played</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-value" id="total-time">0h</div>
+                    <div class="stat-label">Total Playtime</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <h2 class="card-title">Playtime Distribution</h2>
+        </div>
+        <div class="card-content">
+            <div class="charts-wrapper">
+                <div class="chart-container">
+                    <div class="chart-title">Top Games</div>
+                    <canvas id="playtime-chart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-title">By Category</div>
+                    <canvas id="categories-chart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-title">By Runner</div>
+                    <canvas id="runners-chart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-title">By Source</div>
+                    <canvas id="sources-chart"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-header">
+            <h2 class="card-title">Summaries</h2>
+        </div>
+        <div class="card-content summaries-content">
+            <div class="tabs">
+                <div class="tab active" data-tab="games">Top Games</div>
+                <div class="tab" data-tab="categories">By Category</div>
+                <div class="tab" data-tab="runners">By Runner</div>
+            </div>
+            <div class="tab-content">
+                <div class="tab-panel active" id="tab-games">
+                    <div class="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Game</th>
+                                    <th>Playtime</th>
+                                    <th style="text-align: right">%</th>
+                                </tr>
+                            </thead>
+                            <tbody id="games-table"></tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="tab-panel" id="tab-categories">
+                    <div class="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Category</th>
+                                    <th>Playtime</th>
+                                    <th style="text-align: right">%</th>
+                                </tr>
+                            </thead>
+                            <tbody id="categories-table"></tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="tab-panel" id="tab-runners">
+                    <div class="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Runner</th>
+                                    <th>Playtime</th>
+                                    <th style="text-align: right">%</th>
+                                </tr>
+                            </thead>
+                            <tbody id="runners-table"></tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+    __SCRIPT__
+    </script>
+</body>
+</html>

templates/neumorphism.css

@@ -0,0 +1,633 @@
+/***************************************************************************************************
+ * Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      *
+ *                                                                                                  *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without *
+ * fee is hereby granted.                                                                           *
+ *                                                                                                  *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     *
+ * SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  *
+ * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      *
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        *
+ * NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE *
+ * OF THIS SOFTWARE.                                                                                *
+ ****************************************************************************************************/
+
+:root {
+    --bg-base: #e0e5ec;
+    --bg-primary: #e0e5ec;
+    --bg-secondary: #e0e5ec;
+    --bg-tertiary: #d1d9e6;
+    --text-primary: #2d3436;
+    --text-secondary: #4a5568;
+    --text-muted: #718096;
+    --accent-color: #6366f1;
+    --accent-hover: #4f46e5;
+    --selection-bg: rgba(99, 102, 241, 0.15);
+    --shadow-light: rgba(255, 255, 255, 0.8);
+    --shadow-dark: rgba(163, 177, 198, 0.6);
+    --shadow-inset-light: rgba(255, 255, 255, 0.7);
+    --shadow-inset-dark: rgba(163, 177, 198, 0.5);
+    --card-radius: 20px;
+    --border-color: transparent;
+}
+
+[data-theme="dark"] {
+    --bg-base: #2d3436;
+    --bg-primary: #2d3436;
+    --bg-secondary: #2d3436;
+    --bg-tertiary: #353b3d;
+    --text-primary: #f0f0f5;
+    --text-secondary: #b0b8c0;
+    --text-muted: #8090a0;
+    --accent-color: #818cf8;
+    --accent-hover: #6366f1;
+    --selection-bg: rgba(129, 140, 248, 0.2);
+    --shadow-light: rgba(255, 255, 255, 0.05);
+    --shadow-dark: rgba(0, 0, 0, 0.4);
+    --shadow-inset-light: rgba(255, 255, 255, 0.03);
+    --shadow-inset-dark: rgba(0, 0, 0, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --bg-base: #2d3436;
+        --bg-primary: #2d3436;
+        --bg-secondary: #2d3436;
+        --bg-tertiary: #353b3d;
+        --text-primary: #f0f0f5;
+        --text-secondary: #b0b8c0;
+        --text-muted: #8090a0;
+        --accent-color: #818cf8;
+        --accent-hover: #6366f1;
+        --selection-bg: rgba(129, 140, 248, 0.2);
+        --shadow-light: rgba(255, 255, 255, 0.05);
+        --shadow-dark: rgba(0, 0, 0, 0.4);
+        --shadow-inset-light: rgba(255, 255, 255, 0.03);
+        --shadow-inset-dark: rgba(0, 0, 0, 0.3);
+    }
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    font-size: 14px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: var(--bg-base);
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.5;
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: var(--bg-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow:
+        6px 6px 12px var(--shadow-dark),
+        -6px -6px 12px var(--shadow-light);
+    transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+    transform: scale(1.05);
+}
+
+.theme-toggle:active {
+    box-shadow:
+        inset 4px 4px 8px var(--shadow-inset-dark),
+        inset -4px -4px 8px var(--shadow-inset-light);
+}
+
+.theme-toggle .icon {
+    transition: transform 0.3s ease;
+}
+
+.theme-toggle .icon-auto {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theme-toggle .icon-auto::before,
+.theme-toggle .icon-auto::after {
+    position: absolute;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.theme-toggle .icon-auto::before {
+    content: '☀️';
+    clip-path: inset(0 50% 0 0);
+}
+
+.theme-toggle .icon-auto::after {
+    content: '🌙';
+    clip-path: inset(0 0 0 50%);
+}
+
+/* Card Style */
+.card {
+    background: var(--bg-primary);
+    border-radius: var(--card-radius);
+    box-shadow:
+        8px 8px 16px var(--shadow-dark),
+        -8px -8px 16px var(--shadow-light);
+    margin-bottom: 24px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.card-header {
+    padding: 16px 20px;
+    background: var(--bg-tertiary);
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.summaries-content {
+    padding: 0;
+    padding-top: 16px;
+}
+
+/* Filters */
+.filters {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    padding: 10px 18px;
+    border-radius: 30px;
+    background: var(--bg-secondary);
+    box-shadow:
+        4px 4px 8px var(--shadow-dark),
+        -4px -4px 8px var(--shadow-light);
+    transition: all 0.2s ease;
+}
+
+.filter-label:hover {
+    transform: translateY(-2px);
+}
+
+.filter-label:active {
+    box-shadow:
+        inset 3px 3px 6px var(--shadow-inset-dark),
+        inset -3px -3px 6px var(--shadow-inset-light);
+}
+
+.filter-label input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+    background: var(--bg-secondary);
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s ease;
+    box-shadow:
+        inset 2px 2px 4px var(--shadow-inset-dark),
+        inset -2px -2px 4px var(--shadow-inset-light);
+}
+
+.filter-label input[type="checkbox"]:checked {
+    background: var(--accent-color);
+    box-shadow:
+        inset 2px 2px 4px rgba(0, 0, 0, 0.2),
+        inset -2px -2px 4px rgba(255, 255, 255, 0.1);
+}
+
+.filter-label input[type="checkbox"]:checked::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 3px;
+    width: 5px;
+    height: 9px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.filter-label .service-name {
+    text-transform: capitalize;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.filter-label .service-count {
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
+/* Stats */
+.stats {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.stat {
+    text-align: center;
+    padding: 24px 36px;
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    min-width: 140px;
+    box-shadow:
+        6px 6px 12px var(--shadow-dark),
+        -6px -6px 12px var(--shadow-light);
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--accent-color);
+    font-variant-numeric: tabular-nums;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Charts */
+.charts-wrapper {
+    display: grid;
+    grid-auto-columns: minmax(280px, 450px);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 450px));
+    grid-gap: 24px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.chart-container {
+    min-width: 280px;
+    max-width: 450px;
+    padding: 20px;
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    box-shadow:
+        inset 4px 4px 8px var(--shadow-inset-dark),
+        inset -4px -4px 8px var(--shadow-inset-light);
+}
+
+.chart-title {
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+}
+
+@media (max-width: 700px) {
+    .charts-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+    .chart-container {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 0 20px;
+    margin-bottom: -1px;
+    position: relative;
+    z-index: 1;
+}
+
+.tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-weight: 500;
+    border-radius: 16px 16px 0 0;
+    background: var(--bg-tertiary);
+    transition: all 0.2s ease;
+    box-shadow:
+        4px -4px 8px var(--shadow-dark),
+        -4px -4px 8px var(--shadow-light);
+}
+
+.tab:hover {
+    color: var(--text-primary);
+}
+
+.tab.active {
+    color: var(--accent-color);
+    background: var(--bg-secondary);
+    box-shadow:
+        inset 2px 2px 4px var(--shadow-inset-dark),
+        inset -2px -2px 4px var(--shadow-inset-light);
+}
+
+.tab-content {
+    background: var(--bg-secondary);
+    border-radius: 0 16px 16px 16px;
+    padding: 16px;
+    box-shadow:
+        inset 4px 4px 8px var(--shadow-inset-dark),
+        inset -4px -4px 8px var(--shadow-inset-light);
+}
+
+.tab-panel {
+    display: none;
+}
+
+.tab-panel.active {
+    display: block;
+}
+
+/* Tables */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-secondary);
+    border-bottom: 2px solid var(--bg-tertiary);
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.5px;
+}
+
+td {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+tr:hover td {
+    background: var(--selection-bg);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+.time {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+}
+
+.percent {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-muted);
+}
+
+.color-box {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    vertical-align: middle;
+    border-radius: 4px;
+    box-shadow:
+        2px 2px 4px var(--shadow-dark),
+        -2px -2px 4px var(--shadow-light);
+}
+
+.service-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 3px 10px;
+    background: var(--bg-tertiary);
+    border-radius: 12px;
+    color: var(--text-muted);
+    margin-left: 8px;
+    text-transform: capitalize;
+    font-weight: 500;
+    box-shadow:
+        inset 1px 1px 2px var(--shadow-inset-dark),
+        inset -1px -1px 2px var(--shadow-inset-light);
+}
+
+.category-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 3px 10px;
+    background: var(--bg-tertiary);
+    border-radius: 12px;
+    color: var(--accent-color);
+    margin-left: 4px;
+    text-transform: capitalize;
+    font-weight: 500;
+    box-shadow:
+        inset 1px 1px 2px var(--shadow-inset-dark),
+        inset -1px -1px 2px var(--shadow-inset-light);
+}
+
+.no-data {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-muted);
+}
+
+/* Others row expansion */
+.others-row {
+    cursor: pointer;
+}
+
+.others-row td:first-child::before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--text-muted);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-right: 8px;
+    transition: transform 0.2s ease;
+}
+
+.others-row.expanded td:first-child::before {
+    transform: rotate(90deg);
+}
+
+.others-detail {
+    display: none;
+    background: var(--bg-tertiary);
+}
+
+.others-detail.visible {
+    display: table-row;
+}
+
+.others-detail td {
+    padding-left: 32px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* Responsive */
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+    }
+
+    .stats {
+        gap: 12px;
+    }
+
+    .stat {
+        padding: 16px 20px;
+        min-width: 100px;
+    }
+
+    .stat-value {
+        font-size: 22px;
+    }
+
+    .filter-label {
+        padding: 8px 14px;
+        font-size: 13px;
+    }
+
+    .tabs {
+        padding: 0 12px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+
+    .theme-toggle {
+        width: 40px;
+        height: 40px;
+        font-size: 16px;
+    }
+}
+
+/* Scroll to Top Button */
+.scroll-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: none;
+    background: var(--bg-primary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow:
+        6px 6px 12px var(--shadow-dark),
+        -6px -6px 12px var(--shadow-light);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.scroll-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-top:hover {
+    transform: scale(1.05);
+}
+
+.scroll-top:active {
+    box-shadow:
+        inset 4px 4px 8px var(--shadow-inset-dark),
+        inset -4px -4px 8px var(--shadow-inset-light);
+}
+
+.scroll-top-arrow {
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 10px solid var(--text-primary);
+}
+
+@media (max-width: 600px) {
+    .scroll-top {
+        width: 40px;
+        height: 40px;
+    }
+
+    .scroll-top-arrow {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-bottom-width: 8px;
+    }
+}

templates/platinum.html

@@ -1,3 +1,16 @@
+<!--
+Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without
+fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS
+SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
+AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,
+NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE
+OF THIS SOFTWARE.
+-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -204,14 +217,15 @@
 
         /* Chart containers */
         .charts-wrapper {
-            display: flex;
+            display: grid;
-            gap: 20px;
+            grid-auto-columns: minmax(280px, 450px);
+            grid-template-columns: repeat(auto-fill, minmax(280px, 450px));
+            grid-gap: 20px;
             justify-content: center;
             flex-wrap: wrap;
         }
         .chart-container {
             position: relative;
-            flex: 1;
             min-width: 280px;
             max-width: 450px;
             padding: 10px;
@@ -567,6 +581,14 @@
                     <div class="chart-title">By Category</div>
                     <canvas id="categories-chart"></canvas>
                 </div>
+                <div class="chart-container">
+                    <div class="chart-title">By Runner</div>
+                    <canvas id="runners-chart"></canvas>
+                </div>
+                <div class="chart-container">
+                    <div class="chart-title">By Source</div>
+                    <canvas id="sources-chart"></canvas>
+                </div>
             </div>
         </div>
     </div>
@@ -582,6 +604,7 @@
             <div class="tabs">
                 <div class="tab active" data-tab="games">Top Games</div>
                 <div class="tab" data-tab="categories">By Category</div>
+                <div class="tab" data-tab="runners">By Runner</div>
             </div>
             <div class="tab-content">
                 <div class="tab-panel active" id="tab-games">
@@ -614,6 +637,21 @@
                         </table>
                     </div>
                 </div>
+                <div class="tab-panel" id="tab-runners">
+                    <div class="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Runner</th>
+                                    <th>Playtime</th>
+                                    <th style="text-align: right">%</th>
+                                </tr>
+                            </thead>
+                            <tbody id="runners-table"></tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -665,8 +703,12 @@
 
         let chart = null;
         let categoriesChart = null;
+        let runnersChart = null;
+        let sourcesChart = null;
         const ctx = document.getElementById('playtime-chart').getContext('2d');
         const ctxCategories = document.getElementById('categories-chart').getContext('2d');
+        const ctxRunners = document.getElementById('runners-chart').getContext('2d');
+        const ctxSources = document.getElementById('sources-chart').getContext('2d');
 
         function getSelectedServices() {
             const checkboxes = filtersDiv.querySelectorAll('input[type="checkbox"]');
@@ -728,12 +770,36 @@
             const categoriesData = Object.values(categoryMap)
                 .sort((a, b) => b.playtime - a.playtime);
 
-            return { chartData: topGames, othersGames, categoriesData, totalPlaytime, totalGames };
+            const runnerMap = {};
+            filtered.forEach(g => {
+                const runner = g.runner || 'unknown';
+                if (!runnerMap[runner]) {
+                    runnerMap[runner] = { name: runner, playtime: 0, gameCount: 0 };
+                }
+                runnerMap[runner].playtime += g.playtime;
+                runnerMap[runner].gameCount++;
+            });
+            const runnersData = Object.values(runnerMap)
+                .sort((a, b) => b.playtime - a.playtime);
+
+            const sourceMap = {};
+            filtered.forEach(g => {
+                const source = g.service || 'unknown';
+                if (!sourceMap[source]) {
+                    sourceMap[source] = { name: source, playtime: 0, gameCount: 0 };
+                }
+                sourceMap[source].playtime += g.playtime;
+                sourceMap[source].gameCount++;
+            });
+            const sourcesData = Object.values(sourceMap)
+                .sort((a, b) => b.playtime - a.playtime);
+
+            return { chartData: topGames, othersGames, categoriesData, runnersData, sourcesData, totalPlaytime, totalGames };
         }
 
         function updateDisplay() {
             const selectedServices = getSelectedServices();
-            const { chartData, othersGames, categoriesData, totalPlaytime, totalGames } = getFilteredData(selectedServices);
+            const { chartData, othersGames, categoriesData, runnersData, sourcesData, totalPlaytime, totalGames } = getFilteredData(selectedServices);
 
             document.getElementById('total-games').textContent = totalGames;
             document.getElementById('total-time').textContent = formatTime(totalPlaytime);
@@ -744,12 +810,20 @@
             if (categoriesChart) {
                 categoriesChart.destroy();
             }
+            if (runnersChart) {
+                runnersChart.destroy();
+            }
+            if (sourcesChart) {
+                sourcesChart.destroy();
+            }
 
             if (chartData.length === 0) {
                 document.getElementById('games-table').innerHTML =
                     '<tr><td colspan="4" class="no-data">No games match the selected filters</td></tr>';
                 document.getElementById('categories-table').innerHTML =
                     '<tr><td colspan="4" class="no-data">No categories found</td></tr>';
+                document.getElementById('runners-table').innerHTML =
+                    '<tr><td colspan="4" class="no-data">No runners found</td></tr>';
                 return;
             }
 
@@ -863,6 +937,116 @@
                 });
             }
 
+            // Runners Chart
+            const topRunnersChart = runnersData.slice(0, topN);
+            const otherRunnersChart = runnersData.slice(topN);
+            const runnersChartData = topRunnersChart.map(r => ({
+                name: r.name,
+                playtime: r.playtime
+            }));
+            if (otherRunnersChart.length > 0) {
+                const othersPlaytime = otherRunnersChart.reduce((sum, r) => sum + r.playtime, 0);
+                runnersChartData.push({
+                    name: `Others (${otherRunnersChart.length} runners)`,
+                    playtime: othersPlaytime
+                });
+            }
+
+            if (runnersChartData.length > 0) {
+                runnersChart = new Chart(ctxRunners, {
+                    type: 'doughnut',
+                    data: {
+                        labels: runnersChartData.map(r => r.name),
+                        datasets: [{
+                            data: runnersChartData.map(r => r.playtime),
+                            backgroundColor: colors.slice(0, runnersChartData.length),
+                            borderColor: '#FFFFFF',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    color: '#000000',
+                                    font: {
+                                        family: "'Charcoal', 'Chicago', Geneva, sans-serif",
+                                        size: 10
+                                    },
+                                    padding: 10
+                                }
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context) {
+                                        const value = context.raw;
+                                        const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                                        return ' ' + formatTime(value) + ' (' + percent + '%)';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+
+            // Sources Chart
+            const topSourcesChart = sourcesData.slice(0, topN);
+            const otherSourcesChart = sourcesData.slice(topN);
+            const sourcesChartData = topSourcesChart.map(s => ({
+                name: s.name,
+                playtime: s.playtime
+            }));
+            if (otherSourcesChart.length > 0) {
+                const othersPlaytime = otherSourcesChart.reduce((sum, s) => sum + s.playtime, 0);
+                sourcesChartData.push({
+                    name: `Others (${otherSourcesChart.length} sources)`,
+                    playtime: othersPlaytime
+                });
+            }
+
+            if (sourcesChartData.length > 0) {
+                sourcesChart = new Chart(ctxSources, {
+                    type: 'doughnut',
+                    data: {
+                        labels: sourcesChartData.map(s => s.name),
+                        datasets: [{
+                            data: sourcesChartData.map(s => s.playtime),
+                            backgroundColor: colors.slice(0, sourcesChartData.length),
+                            borderColor: '#FFFFFF',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom',
+                                labels: {
+                                    color: '#000000',
+                                    font: {
+                                        family: "'Charcoal', 'Chicago', Geneva, sans-serif",
+                                        size: 10
+                                    },
+                                    padding: 10
+                                }
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function(context) {
+                                        const value = context.raw;
+                                        const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                                        return ' ' + formatTime(value) + ' (' + percent + '%)';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+
             const tbody = document.getElementById('games-table');
             tbody.innerHTML = '';
             chartData.forEach((game, index) => {
@@ -988,6 +1172,71 @@
                     });
                 }
             }
+
+            const runnersTbody = document.getElementById('runners-table');
+            runnersTbody.innerHTML = '';
+            if (runnersData.length === 0) {
+                runnersTbody.innerHTML = '<tr><td colspan="4" class="no-data">No runners found</td></tr>';
+            } else {
+                const topRunners = runnersData.slice(0, topN);
+                const otherRunners = runnersData.slice(topN);
+
+                topRunners.forEach((runner, index) => {
+                    const percent = ((runner.playtime / totalPlaytime) * 100).toFixed(1);
+                    const row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${index + 1}</td>
+                        <td>
+                            <span class="color-box" style="background: ${colors[index]}"></span>
+                            ${runner.name} <span class="service-badge">${runner.gameCount} games</span>
+                        </td>
+                        <td class="time">${formatTime(runner.playtime)}</td>
+                        <td class="percent">${percent}%</td>
+                    `;
+                    runnersTbody.appendChild(row);
+                });
+
+                if (otherRunners.length > 0) {
+                    const othersPlaytime = otherRunners.reduce((sum, r) => sum + r.playtime, 0);
+                    const othersPercent = ((othersPlaytime / totalPlaytime) * 100).toFixed(1);
+                    const othersIndex = topRunners.length;
+
+                    const othersRow = document.createElement('tr');
+                    othersRow.className = 'others-row';
+                    othersRow.innerHTML = `
+                        <td>${othersIndex + 1}</td>
+                        <td>
+                            <span class="color-box" style="background: ${colors[othersIndex]}"></span>
+                            Others (${otherRunners.length} runners)
+                        </td>
+                        <td class="time">${formatTime(othersPlaytime)}</td>
+                        <td class="percent">${othersPercent}%</td>
+                    `;
+                    runnersTbody.appendChild(othersRow);
+
+                    const detailRows = [];
+                    otherRunners.forEach((otherRunner, otherIndex) => {
+                        const otherPercent = ((otherRunner.playtime / totalPlaytime) * 100).toFixed(1);
+                        const detailRow = document.createElement('tr');
+                        detailRow.className = 'others-detail';
+                        detailRow.innerHTML = `
+                            <td>${othersIndex + 1}.${otherIndex + 1}</td>
+                            <td>
+                                ${otherRunner.name} <span class="service-badge">${otherRunner.gameCount} games</span>
+                            </td>
+                            <td class="time">${formatTime(otherRunner.playtime)}</td>
+                            <td class="percent">${otherPercent}%</td>
+                        `;
+                        runnersTbody.appendChild(detailRow);
+                        detailRows.push(detailRow);
+                    });
+
+                    othersRow.addEventListener('click', () => {
+                        othersRow.classList.toggle('expanded');
+                        detailRows.forEach(dr => dr.classList.toggle('visible'));
+                    });
+                }
+            }
         }
 
         filtersDiv.addEventListener('change', updateDisplay);

templates/script.js

@@ -0,0 +1,768 @@
+/***************************************************************************************************
+ * Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      *
+ *                                                                                                  *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without *
+ * fee is hereby granted.                                                                           *
+ *                                                                                                  *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     *
+ * SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  *
+ * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      *
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        *
+ * NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE *
+ * OF THIS SOFTWARE.                                                                                *
+ ****************************************************************************************************/
+
+// Theme management
+const themeToggle = document.getElementById('theme-toggle');
+const themeIcon = document.getElementById('theme-icon');
+const themes = ['auto', 'light', 'dark'];
+let currentThemeIndex = 0;
+
+function getSystemTheme() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function updateThemeIcon() {
+    const theme = themes[currentThemeIndex];
+    if (theme === 'auto') {
+        themeIcon.textContent = '';
+        themeIcon.className = 'icon icon-auto';
+        themeToggle.title = 'Theme: Auto (click to change)';
+    } else if (theme === 'light') {
+        themeIcon.textContent = '\u2600\uFE0F';
+        themeIcon.className = 'icon';
+        themeToggle.title = 'Theme: Light (click to change)';
+    } else {
+        themeIcon.textContent = '\uD83C\uDF19';
+        themeIcon.className = 'icon';
+        themeToggle.title = 'Theme: Dark (click to change)';
+    }
+}
+
+function applyTheme() {
+    const theme = themes[currentThemeIndex];
+    if (theme === 'auto') {
+        document.documentElement.removeAttribute('data-theme');
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+    updateThemeIcon();
+    localStorage.setItem('theme', theme);
+    updateChartColors();
+}
+
+function loadSavedTheme() {
+    const saved = localStorage.getItem('theme');
+    if (saved) {
+        currentThemeIndex = themes.indexOf(saved);
+        if (currentThemeIndex === -1) currentThemeIndex = 0;
+    }
+    applyTheme();
+}
+
+themeToggle.addEventListener('click', () => {
+    currentThemeIndex = (currentThemeIndex + 1) % themes.length;
+    applyTheme();
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (themes[currentThemeIndex] === 'auto') {
+        updateThemeIcon();
+        updateChartColors();
+    }
+});
+
+// Data and chart logic
+const allGames = __ALL_GAMES__;
+const topN = __TOP_N__;
+
+// Theme-specific configuration
+const themeConfig = __THEME_CONFIG__;
+
+function formatTime(hours) {
+    const h = Math.floor(hours);
+    const m = Math.round((hours - h) * 60);
+    if (h === 0) return m + 'm';
+    if (m === 0) return h + 'h';
+    return h + 'h ' + m + 'm';
+}
+
+function getServices() {
+    const services = {};
+    allGames.forEach(g => {
+        const s = g.service;
+        if (!services[s]) services[s] = { count: 0, playtime: 0 };
+        services[s].count++;
+        services[s].playtime += g.playtime;
+    });
+    return Object.entries(services)
+    .sort((a, b) => b[1].playtime - a[1].playtime)
+    .map(([name, data]) => ({ name, ...data }));
+}
+
+const services = getServices();
+const filtersDiv = document.getElementById('filters');
+services.forEach(service => {
+    const label = document.createElement('label');
+    label.className = 'filter-label';
+    label.innerHTML = `
+    <input type="checkbox" value="${service.name}" checked>
+    <span class="service-name">${service.name}</span>
+    <span class="service-count">(${service.count})</span>
+    `;
+    filtersDiv.appendChild(label);
+});
+
+let chart = null;
+let categoriesChart = null;
+let runnersChart = null;
+let sourcesChart = null;
+const ctx = document.getElementById('playtime-chart').getContext('2d');
+const ctxCategories = document.getElementById('categories-chart').getContext('2d');
+const ctxRunners = document.getElementById('runners-chart').getContext('2d');
+const ctxSources = document.getElementById('sources-chart').getContext('2d');
+
+// Initialize theme after chart variables are declared
+loadSavedTheme();
+
+function getSelectedServices() {
+    const checkboxes = filtersDiv.querySelectorAll('input[type="checkbox"]');
+    return Array.from(checkboxes)
+    .filter(cb => cb.checked)
+    .map(cb => cb.value);
+}
+
+function getFilteredData(selectedServices) {
+    const filtered = allGames
+    .filter(g => selectedServices.includes(g.service))
+    .sort((a, b) => b.playtime - a.playtime);
+
+    if (filtered.length === 0) {
+        return { chartData: [], othersGames: [], categoriesData: [], totalPlaytime: 0, totalGames: 0 };
+    }
+
+    const totalPlaytime = filtered.reduce((sum, g) => sum + g.playtime, 0);
+    const totalGames = filtered.length;
+
+    const topGames = filtered.slice(0, topN).map(g => ({
+        name: g.name,
+        playtime: g.playtime,
+        service: g.service,
+        categories: g.categories || []
+    }));
+
+    let othersGames = [];
+
+    if (filtered.length > topN) {
+        othersGames = filtered.slice(topN).map(g => ({
+            name: g.name,
+            playtime: g.playtime,
+            service: g.service,
+            categories: g.categories || []
+        }));
+        const othersPlaytime = othersGames.reduce((sum, g) => sum + g.playtime, 0);
+        const othersCount = othersGames.length;
+        topGames.push({
+            name: `Others (${othersCount} games)`,
+                        playtime: othersPlaytime,
+                        service: 'others'
+        });
+    }
+
+    const categoryMap = {};
+    filtered.forEach(g => {
+        if (g.categories && g.categories.length > 0) {
+            g.categories.forEach(cat => {
+                if (cat === '.hidden' || cat === 'favorite') return;
+                if (!categoryMap[cat]) {
+                    categoryMap[cat] = { name: cat, playtime: 0, gameCount: 0 };
+                }
+                categoryMap[cat].playtime += g.playtime;
+                categoryMap[cat].gameCount++;
+            });
+        }
+    });
+    const categoriesData = Object.values(categoryMap)
+    .sort((a, b) => b.playtime - a.playtime);
+
+    const runnerMap = {};
+    filtered.forEach(g => {
+        const runner = g.runner || 'unknown';
+        if (!runnerMap[runner]) {
+            runnerMap[runner] = { name: runner, playtime: 0, gameCount: 0 };
+        }
+        runnerMap[runner].playtime += g.playtime;
+        runnerMap[runner].gameCount++;
+    });
+    const runnersData = Object.values(runnerMap)
+    .sort((a, b) => b.playtime - a.playtime);
+
+    const sourceMap = {};
+    filtered.forEach(g => {
+        const source = g.service || 'unknown';
+        if (!sourceMap[source]) {
+            sourceMap[source] = { name: source, playtime: 0, gameCount: 0 };
+        }
+        sourceMap[source].playtime += g.playtime;
+        sourceMap[source].gameCount++;
+    });
+    const sourcesData = Object.values(sourceMap)
+    .sort((a, b) => b.playtime - a.playtime);
+
+    return { chartData: topGames, othersGames, categoriesData, runnersData, sourcesData, totalPlaytime, totalGames };
+}
+
+function getChartTextColor() {
+    const theme = themes[currentThemeIndex];
+    if (theme === 'dark') return themeConfig.textColorDark;
+    if (theme === 'light') return themeConfig.textColorLight;
+    return getSystemTheme() === 'dark' ? themeConfig.textColorDark : themeConfig.textColorLight;
+}
+
+function getChartBorderColor() {
+    const theme = themes[currentThemeIndex];
+    if (theme === 'dark') return themeConfig.borderColorDark;
+    if (theme === 'light') return themeConfig.borderColorLight;
+    return getSystemTheme() === 'dark' ? themeConfig.borderColorDark : themeConfig.borderColorLight;
+}
+
+function updateChartColors() {
+    const textColor = getChartTextColor();
+    if (typeof chart !== 'undefined' && chart) {
+        chart.options.plugins.legend.labels.color = textColor;
+        chart.update();
+    }
+    if (typeof categoriesChart !== 'undefined' && categoriesChart) {
+        categoriesChart.options.plugins.legend.labels.color = textColor;
+        categoriesChart.update();
+    }
+    if (typeof runnersChart !== 'undefined' && runnersChart) {
+        runnersChart.options.plugins.legend.labels.color = textColor;
+        runnersChart.update();
+    }
+    if (typeof sourcesChart !== 'undefined' && sourcesChart) {
+        sourcesChart.options.plugins.legend.labels.color = textColor;
+        sourcesChart.update();
+    }
+}
+
+function updateDisplay() {
+    const selectedServices = getSelectedServices();
+    const { chartData, othersGames, categoriesData, runnersData, sourcesData, totalPlaytime, totalGames } = getFilteredData(selectedServices);
+
+    document.getElementById('total-games').textContent = totalGames;
+    document.getElementById('total-time').textContent = formatTime(totalPlaytime);
+
+    if (chart) {
+        chart.destroy();
+    }
+    if (categoriesChart) {
+        categoriesChart.destroy();
+    }
+    if (runnersChart) {
+        runnersChart.destroy();
+    }
+    if (sourcesChart) {
+        sourcesChart.destroy();
+    }
+
+    if (chartData.length === 0) {
+        document.getElementById('games-table').innerHTML =
+        '<tr><td colspan="4" class="no-data">No games match the selected filters</td></tr>';
+        document.getElementById('categories-table').innerHTML =
+        '<tr><td colspan="4" class="no-data">No categories found</td></tr>';
+        document.getElementById('runners-table').innerHTML =
+        '<tr><td colspan="4" class="no-data">No runners found</td></tr>';
+        return;
+    }
+
+    const textColor = getChartTextColor();
+    const borderColor = getChartBorderColor();
+
+    chart = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: chartData.map(g => g.name),
+                        datasets: [{
+                            data: chartData.map(g => g.playtime),
+                        backgroundColor: themeConfig.colors.slice(0, chartData.length),
+                        borderColor: borderColor,
+                        borderWidth: themeConfig.borderWidth
+                        }]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: {
+                        color: textColor,
+                        font: {
+                            family: themeConfig.fontFamily,
+                            size: 11,
+                            weight: themeConfig.fontWeight
+                        },
+                        padding: 12,
+                        usePointStyle: true,
+                        pointStyle: themeConfig.pointStyle
+                    }
+                },
+                tooltip: {
+                    backgroundColor: themeConfig.tooltipBg,
+                    titleColor: themeConfig.tooltipTitleColor,
+                    bodyColor: themeConfig.tooltipBodyColor,
+                    borderColor: themeConfig.tooltipBorderColor,
+                    borderWidth: themeConfig.tooltipBorderWidth,
+                    titleFont: { weight: 'bold', family: themeConfig.fontFamily },
+                    bodyFont: { weight: 'normal', family: themeConfig.fontFamily },
+                    cornerRadius: themeConfig.tooltipCornerRadius,
+                    padding: 12,
+                    callbacks: {
+                        title: function(context) {
+                            return themeConfig.uppercaseTooltip ? context[0].label.toUpperCase() : context[0].label;
+                        },
+                        beforeBody: function(context) {
+                            const index = context[0].dataIndex;
+                            const service = chartData[index].service;
+                            if (service && service !== 'others') {
+                                return themeConfig.uppercaseTooltip ? service.toUpperCase() : service.charAt(0).toUpperCase() + service.slice(1);
+                            }
+                            return '';
+                        },
+                        label: function(context) {
+                            const value = context.raw;
+                            const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                            return formatTime(value) + ' (' + percent + '%)';
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    const topCategoriesChart = categoriesData.slice(0, topN);
+    const otherCategoriesChart = categoriesData.slice(topN);
+    const categoriesChartData = topCategoriesChart.map(c => ({
+        name: c.name,
+        playtime: c.playtime
+    }));
+    if (otherCategoriesChart.length > 0) {
+        const othersPlaytime = otherCategoriesChart.reduce((sum, c) => sum + c.playtime, 0);
+        categoriesChartData.push({
+            name: `Others (${otherCategoriesChart.length} categories)`,
+                                    playtime: othersPlaytime
+        });
+    }
+
+    if (categoriesChartData.length > 0) {
+        categoriesChart = new Chart(ctxCategories, {
+            type: 'doughnut',
+            data: {
+                labels: categoriesChartData.map(c => c.name),
+                                    datasets: [{
+                                        data: categoriesChartData.map(c => c.playtime),
+                                    backgroundColor: themeConfig.colors.slice(0, categoriesChartData.length),
+                                    borderColor: borderColor,
+                                    borderWidth: themeConfig.borderWidth
+                                    }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: textColor,
+                            font: {
+                                family: themeConfig.fontFamily,
+                                size: 11,
+                                weight: themeConfig.fontWeight
+                            },
+                            padding: 12,
+                            usePointStyle: true,
+                            pointStyle: themeConfig.pointStyle
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: themeConfig.tooltipBg,
+                        titleColor: themeConfig.tooltipTitleColor,
+                        bodyColor: themeConfig.tooltipBodyColor,
+                        borderColor: themeConfig.tooltipBorderColor,
+                        borderWidth: themeConfig.tooltipBorderWidth,
+                        cornerRadius: themeConfig.tooltipCornerRadius,
+                        padding: 12,
+                        titleFont: { family: themeConfig.fontFamily },
+                        bodyFont: { family: themeConfig.fontFamily },
+                        callbacks: {
+                            label: function(context) {
+                                const value = context.raw;
+                                const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                                return ' ' + formatTime(value) + ' (' + percent + '%)';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // Runners Chart
+    const topRunnersChart = runnersData.slice(0, topN);
+    const otherRunnersChart = runnersData.slice(topN);
+    const runnersChartData = topRunnersChart.map(r => ({
+        name: r.name,
+        playtime: r.playtime
+    }));
+    if (otherRunnersChart.length > 0) {
+        const othersPlaytime = otherRunnersChart.reduce((sum, r) => sum + r.playtime, 0);
+        runnersChartData.push({
+            name: `Others (${otherRunnersChart.length} runners)`,
+            playtime: othersPlaytime
+        });
+    }
+
+    if (runnersChartData.length > 0) {
+        runnersChart = new Chart(ctxRunners, {
+            type: 'doughnut',
+            data: {
+                labels: runnersChartData.map(r => r.name),
+                datasets: [{
+                    data: runnersChartData.map(r => r.playtime),
+                    backgroundColor: themeConfig.colors.slice(0, runnersChartData.length),
+                    borderColor: borderColor,
+                    borderWidth: themeConfig.borderWidth
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: textColor,
+                            font: {
+                                family: themeConfig.fontFamily,
+                                size: 11,
+                                weight: themeConfig.fontWeight
+                            },
+                            padding: 12,
+                            usePointStyle: true,
+                            pointStyle: themeConfig.pointStyle
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: themeConfig.tooltipBg,
+                        titleColor: themeConfig.tooltipTitleColor,
+                        bodyColor: themeConfig.tooltipBodyColor,
+                        borderColor: themeConfig.tooltipBorderColor,
+                        borderWidth: themeConfig.tooltipBorderWidth,
+                        cornerRadius: themeConfig.tooltipCornerRadius,
+                        padding: 12,
+                        titleFont: { family: themeConfig.fontFamily },
+                        bodyFont: { family: themeConfig.fontFamily },
+                        callbacks: {
+                            label: function(context) {
+                                const value = context.raw;
+                                const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                                return ' ' + formatTime(value) + ' (' + percent + '%)';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    // Sources Chart
+    const topSourcesChart = sourcesData.slice(0, topN);
+    const otherSourcesChart = sourcesData.slice(topN);
+    const sourcesChartData = topSourcesChart.map(s => ({
+        name: s.name,
+        playtime: s.playtime
+    }));
+    if (otherSourcesChart.length > 0) {
+        const othersPlaytime = otherSourcesChart.reduce((sum, s) => sum + s.playtime, 0);
+        sourcesChartData.push({
+            name: `Others (${otherSourcesChart.length} sources)`,
+            playtime: othersPlaytime
+        });
+    }
+
+    if (sourcesChartData.length > 0) {
+        sourcesChart = new Chart(ctxSources, {
+            type: 'doughnut',
+            data: {
+                labels: sourcesChartData.map(s => s.name),
+                datasets: [{
+                    data: sourcesChartData.map(s => s.playtime),
+                    backgroundColor: themeConfig.colors.slice(0, sourcesChartData.length),
+                    borderColor: borderColor,
+                    borderWidth: themeConfig.borderWidth
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            color: textColor,
+                            font: {
+                                family: themeConfig.fontFamily,
+                                size: 11,
+                                weight: themeConfig.fontWeight
+                            },
+                            padding: 12,
+                            usePointStyle: true,
+                            pointStyle: themeConfig.pointStyle
+                        }
+                    },
+                    tooltip: {
+                        backgroundColor: themeConfig.tooltipBg,
+                        titleColor: themeConfig.tooltipTitleColor,
+                        bodyColor: themeConfig.tooltipBodyColor,
+                        borderColor: themeConfig.tooltipBorderColor,
+                        borderWidth: themeConfig.tooltipBorderWidth,
+                        cornerRadius: themeConfig.tooltipCornerRadius,
+                        padding: 12,
+                        titleFont: { family: themeConfig.fontFamily },
+                        bodyFont: { family: themeConfig.fontFamily },
+                        callbacks: {
+                            label: function(context) {
+                                const value = context.raw;
+                                const percent = ((value / totalPlaytime) * 100).toFixed(1);
+                                return ' ' + formatTime(value) + ' (' + percent + '%)';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    const tbody = document.getElementById('games-table');
+    tbody.innerHTML = '';
+    chartData.forEach((game, index) => {
+        const percent = ((game.playtime / totalPlaytime) * 100).toFixed(1);
+        const isOthers = game.service === 'others';
+        const serviceBadge = !isOthers
+        ? `<span class="service-badge">${game.service}</span>`
+        : '';
+        const categoriesBadges = !isOthers && game.categories && game.categories.length > 0
+        ? game.categories
+        .filter(cat => cat !== '.hidden' && cat !== 'favorite')
+        .map(cat => `<span class="category-badge">${cat}</span>`)
+        .join('')
+        : '';
+        const row = document.createElement('tr');
+        if (isOthers) {
+            row.className = 'others-row';
+        }
+        row.innerHTML = `
+        <td>${index + 1}</td>
+        <td>
+        <span class="color-box" style="background: ${themeConfig.colors[index]}"></span>
+        ${game.name}${serviceBadge}${categoriesBadges}
+        </td>
+        <td class="time">${formatTime(game.playtime)}</td>
+        <td class="percent">${percent}%</td>
+        `;
+        tbody.appendChild(row);
+
+        if (isOthers && othersGames.length > 0) {
+            const detailRows = [];
+            othersGames.forEach((otherGame, otherIndex) => {
+                const otherPercent = ((otherGame.playtime / totalPlaytime) * 100).toFixed(1);
+                const otherCategoriesBadges = otherGame.categories && otherGame.categories.length > 0
+                ? otherGame.categories
+                .filter(cat => cat !== '.hidden' && cat !== 'favorite')
+                .map(cat => `<span class="category-badge">${cat}</span>`)
+                .join('')
+                : '';
+                const detailRow = document.createElement('tr');
+                detailRow.className = 'others-detail';
+                detailRow.innerHTML = `
+                <td>${index + 1}.${otherIndex + 1}</td>
+                <td>
+                ${otherGame.name}
+                <span class="service-badge">${otherGame.service}</span>${otherCategoriesBadges}
+                </td>
+                <td class="time">${formatTime(otherGame.playtime)}</td>
+                <td class="percent">${otherPercent}%</td>
+                `;
+                tbody.appendChild(detailRow);
+                detailRows.push(detailRow);
+            });
+
+            row.addEventListener('click', () => {
+                row.classList.toggle('expanded');
+                detailRows.forEach(dr => dr.classList.toggle('visible'));
+            });
+        }
+    });
+
+    const catTbody = document.getElementById('categories-table');
+    catTbody.innerHTML = '';
+    if (categoriesData.length === 0) {
+        catTbody.innerHTML = '<tr><td colspan="4" class="no-data">No categories found</td></tr>';
+    } else {
+        const topCategories = categoriesData.slice(0, topN);
+        const otherCategories = categoriesData.slice(topN);
+
+        topCategories.forEach((cat, index) => {
+            const percent = ((cat.playtime / totalPlaytime) * 100).toFixed(1);
+            const row = document.createElement('tr');
+            row.innerHTML = `
+            <td>${index + 1}</td>
+            <td>
+            <span class="color-box" style="background: ${themeConfig.colors[index]}"></span>
+            ${cat.name} <span class="service-badge">${cat.gameCount} games</span>
+            </td>
+            <td class="time">${formatTime(cat.playtime)}</td>
+            <td class="percent">${percent}%</td>
+            `;
+            catTbody.appendChild(row);
+        });
+
+        if (otherCategories.length > 0) {
+            const othersPlaytime = otherCategories.reduce((sum, c) => sum + c.playtime, 0);
+            const othersPercent = ((othersPlaytime / totalPlaytime) * 100).toFixed(1);
+            const othersIndex = topCategories.length;
+
+            const othersRow = document.createElement('tr');
+            othersRow.className = 'others-row';
+            othersRow.innerHTML = `
+            <td>${othersIndex + 1}</td>
+            <td>
+            <span class="color-box" style="background: ${themeConfig.colors[othersIndex]}"></span>
+            Others (${otherCategories.length} categories)
+            </td>
+            <td class="time">${formatTime(othersPlaytime)}</td>
+            <td class="percent">${othersPercent}%</td>
+            `;
+            catTbody.appendChild(othersRow);
+
+            const detailRows = [];
+            otherCategories.forEach((otherCat, otherIndex) => {
+                const otherPercent = ((otherCat.playtime / totalPlaytime) * 100).toFixed(1);
+                const detailRow = document.createElement('tr');
+                detailRow.className = 'others-detail';
+                detailRow.innerHTML = `
+                <td>${othersIndex + 1}.${otherIndex + 1}</td>
+                <td>
+                ${otherCat.name} <span class="service-badge">${otherCat.gameCount} games</span>
+                </td>
+                <td class="time">${formatTime(otherCat.playtime)}</td>
+                <td class="percent">${otherPercent}%</td>
+                `;
+                catTbody.appendChild(detailRow);
+                detailRows.push(detailRow);
+            });
+
+            othersRow.addEventListener('click', () => {
+                othersRow.classList.toggle('expanded');
+                detailRows.forEach(dr => dr.classList.toggle('visible'));
+            });
+        }
+    }
+
+    const runnersTbody = document.getElementById('runners-table');
+    runnersTbody.innerHTML = '';
+    if (runnersData.length === 0) {
+        runnersTbody.innerHTML = '<tr><td colspan="4" class="no-data">No runners found</td></tr>';
+    } else {
+        const topRunners = runnersData.slice(0, topN);
+        const otherRunners = runnersData.slice(topN);
+
+        topRunners.forEach((runner, index) => {
+            const percent = ((runner.playtime / totalPlaytime) * 100).toFixed(1);
+            const row = document.createElement('tr');
+            row.innerHTML = `
+            <td>${index + 1}</td>
+            <td>
+            <span class="color-box" style="background: ${themeConfig.colors[index]}"></span>
+            ${runner.name} <span class="service-badge">${runner.gameCount} games</span>
+            </td>
+            <td class="time">${formatTime(runner.playtime)}</td>
+            <td class="percent">${percent}%</td>
+            `;
+            runnersTbody.appendChild(row);
+        });
+
+        if (otherRunners.length > 0) {
+            const othersPlaytime = otherRunners.reduce((sum, r) => sum + r.playtime, 0);
+            const othersPercent = ((othersPlaytime / totalPlaytime) * 100).toFixed(1);
+            const othersIndex = topRunners.length;
+
+            const othersRow = document.createElement('tr');
+            othersRow.className = 'others-row';
+            othersRow.innerHTML = `
+            <td>${othersIndex + 1}</td>
+            <td>
+            <span class="color-box" style="background: ${themeConfig.colors[othersIndex]}"></span>
+            Others (${otherRunners.length} runners)
+            </td>
+            <td class="time">${formatTime(othersPlaytime)}</td>
+            <td class="percent">${othersPercent}%</td>
+            `;
+            runnersTbody.appendChild(othersRow);
+
+            const detailRows = [];
+            otherRunners.forEach((otherRunner, otherIndex) => {
+                const otherPercent = ((otherRunner.playtime / totalPlaytime) * 100).toFixed(1);
+                const detailRow = document.createElement('tr');
+                detailRow.className = 'others-detail';
+                detailRow.innerHTML = `
+                <td>${othersIndex + 1}.${otherIndex + 1}</td>
+                <td>
+                ${otherRunner.name} <span class="service-badge">${otherRunner.gameCount} games</span>
+                </td>
+                <td class="time">${formatTime(otherRunner.playtime)}</td>
+                <td class="percent">${otherPercent}%</td>
+                `;
+                runnersTbody.appendChild(detailRow);
+                detailRows.push(detailRow);
+            });
+
+            othersRow.addEventListener('click', () => {
+                othersRow.classList.toggle('expanded');
+                detailRows.forEach(dr => dr.classList.toggle('visible'));
+            });
+        }
+    }
+}
+
+filtersDiv.addEventListener('change', updateDisplay);
+updateDisplay();
+
+// Tab switching
+document.querySelectorAll('.tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+        const tabId = tab.dataset.tab;
+        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+        document.getElementById('tab-' + tabId).classList.add('active');
+    });
+});
+
+// Scroll to top button
+const scrollTopBtn = document.getElementById('scroll-top');
+
+function updateScrollTopVisibility() {
+    if (window.scrollY > 100) {
+        scrollTopBtn.classList.add('visible');
+    } else {
+        scrollTopBtn.classList.remove('visible');
+    }
+}
+
+window.addEventListener('scroll', updateScrollTopVisibility);
+updateScrollTopVisibility();
+
+scrollTopBtn.addEventListener('click', () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});