Repush all

static/behavior.js

@@ -0,0 +1,335 @@
+let websocket_connection;
+let pending_administrator_form = null;
+let stopwatch_interval_identifier = null;
+
+function initialize_lucide_icons() {
+    if (typeof lucide !== "undefined") {
+        lucide.createIcons();
+    }
+}
+
+function update_game_stopwatch() {
+    const stopwatch_element = document.getElementById("game-stopwatch");
+    if (!stopwatch_element) {
+        return;
+    }
+
+    const start_time_string = stopwatch_element.getAttribute("data-start-time");
+    if (!start_time_string) {
+        return;
+    }
+
+    const start_date = new Date(start_time_string);
+    if (isNaN(start_date.getTime())) {
+        return;
+    }
+
+    const current_date = new Date();
+    const difference_in_milliseconds = current_date.getTime() - start_date.getTime();
+
+    if (difference_in_milliseconds < 0) {
+        stopwatch_element.textContent = "00:00 Minuten";
+        return;
+    }
+
+    const total_seconds = Math.floor(difference_in_milliseconds / 1000);
+    const days_passed = Math.floor(total_seconds / 86400);
+    const hours_passed = Math.floor((total_seconds % 86400) / 3600);
+    const minutes_passed = Math.floor((total_seconds % 3600) / 60);
+    const seconds_passed = total_seconds % 60;
+
+    let output_string = "";
+
+    if (days_passed === 1) {
+        output_string += "1 Tag und ";
+    } else if (days_passed > 1) {
+        output_string += days_passed + " Tage und ";
+    }
+
+    const padded_minutes = String(minutes_passed).padStart(2, "0");
+    const padded_seconds = String(seconds_passed).padStart(2, "0");
+
+    if (hours_passed === 1) {
+        output_string += "1:" + padded_minutes + ":" + padded_seconds + " Stunde";
+    } else if (hours_passed > 1) {
+        output_string += hours_passed + ":" + padded_minutes + ":" + padded_seconds + " Stunden";
+    } else {
+        output_string += padded_minutes + ":" + padded_seconds + " Minuten";
+    }
+
+    stopwatch_element.textContent = output_string;
+}
+
+function initialize_application_behavior() {
+    initialize_lucide_icons();
+    
+    if (stopwatch_interval_identifier) {
+        clearInterval(stopwatch_interval_identifier);
+    }
+    stopwatch_interval_identifier = setInterval(update_game_stopwatch, 1000);
+    update_game_stopwatch();
+    
+    const tab_buttons = document.querySelectorAll(".tab-button");
+    tab_buttons.forEach(function(current_button) {
+        current_button.addEventListener("click", function() {
+            const target_identifier = current_button.getAttribute("data-target");
+            const parent_container = current_button.closest(".application-content");
+            
+            parent_container.querySelectorAll(".tab-button").forEach(function(button_element) {
+                button_element.classList.remove("active-tab");
+            });
+            parent_container.querySelectorAll(".tab-content").forEach(function(content_element) {
+                content_element.classList.remove("active-content");
+            });
+            
+            current_button.classList.add("active-tab");
+            const target_panel = document.getElementById(target_identifier);
+            if (target_panel) {
+                target_panel.classList.add("active-content");
+            }
+        });
+    });
+
+    const player_forms = document.querySelectorAll(".asynchronous-form");
+    player_forms.forEach(function(current_form) {
+        current_form.addEventListener("submit", function(form_submission_event) {
+            form_submission_event.preventDefault();
+            execute_form_submission(current_form);
+        });
+    });
+
+    const administrator_forms = document.querySelectorAll(".admin-asynchronous-form");
+    administrator_forms.forEach(function(current_form) {
+        current_form.addEventListener("submit", function(form_submission_event) {
+            form_submission_event.preventDefault();
+            pending_administrator_form = current_form;
+            const administrator_modal = document.getElementById("admin-confirmation-modal");
+            if (administrator_modal) {
+                const time_input = document.getElementById("modal_execution_time");
+                if (time_input) {
+                    time_input.value = "";
+                }
+                administrator_modal.classList.add("active-modal");
+            }
+        });
+    });
+
+    const confirm_administrator_button = document.getElementById("confirm-admin-action");
+    if (confirm_administrator_button) {
+        confirm_administrator_button.addEventListener("click", function() {
+            if (pending_administrator_form) {
+                const time_input = document.getElementById("modal_execution_time");
+                if (time_input && time_input.value) {
+                    let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
+                    if (!hidden_time_input) {
+                        hidden_time_input = document.createElement("input");
+                        hidden_time_input.type = "hidden";
+                        hidden_time_input.name = "execution_time";
+                        pending_administrator_form.appendChild(hidden_time_input);
+                    }
+                    hidden_time_input.value = time_input.value;
+                } else {
+                    let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
+                    if (hidden_time_input) {
+                        hidden_time_input.remove();
+                    }
+                }
+                execute_form_submission(pending_administrator_form);
+                pending_administrator_form = null;
+                const administrator_modal = document.getElementById("admin-confirmation-modal");
+                if (administrator_modal) {
+                    administrator_modal.classList.remove("active-modal");
+                }
+            }
+        });
+    }
+
+    const cancel_administrator_button = document.getElementById("cancel-admin-action");
+    if (cancel_administrator_button) {
+        cancel_administrator_button.addEventListener("click", function() {
+            pending_administrator_form = null;
+            const administrator_modal = document.getElementById("admin-confirmation-modal");
+            if (administrator_modal) {
+                administrator_modal.classList.remove("active-modal");
+            }
+        });
+    }
+
+    const trigger_elimination_button = document.getElementById("trigger-elimination");
+    if (trigger_elimination_button) {
+        trigger_elimination_button.addEventListener("click", function() {
+            const elimination_modal = document.getElementById("elimination-confirm-modal");
+            if (elimination_modal) {
+                elimination_modal.classList.add("active-modal");
+            }
+        });
+    }
+
+    const proceed_elimination_button = document.getElementById("proceed-elimination");
+    if (proceed_elimination_button) {
+        proceed_elimination_button.addEventListener("click", function() {
+            websocket_connection.emit("request_elimination");
+            const elimination_modal = document.getElementById("elimination-confirm-modal");
+            if (elimination_modal) {
+                elimination_modal.classList.remove("active-modal");
+            }
+            const waiting_modal = document.getElementById("waiting-modal");
+            if (waiting_modal) {
+                waiting_modal.classList.add("active-modal");
+            }
+        });
+    }
+
+    const cancel_elimination_button = document.getElementById("cancel-elimination");
+    if (cancel_elimination_button) {
+        cancel_elimination_button.addEventListener("click", function() {
+            const elimination_modal = document.getElementById("elimination-confirm-modal");
+            if (elimination_modal) {
+                elimination_modal.classList.remove("active-modal");
+            }
+        });
+    }
+
+    const confirm_button = document.getElementById("confirm-elimination");
+    if (confirm_button) {
+        confirm_button.addEventListener("click", function() {
+            websocket_connection.emit("confirm_elimination");
+            const modal_element = document.getElementById("verification-modal");
+            if (modal_element) {
+                modal_element.classList.remove("active-modal");
+            }
+        });
+    }
+
+    const reject_button = document.getElementById("reject-elimination");
+    if (reject_button) {
+        reject_button.addEventListener("click", function() {
+            websocket_connection.emit("reject_elimination");
+            const modal_element = document.getElementById("verification-modal");
+            if (modal_element) {
+                modal_element.classList.remove("active-modal");
+            }
+        });
+    }
+
+    const acknowledge_rejection_button = document.getElementById("acknowledge-rejection");
+    if (acknowledge_rejection_button) {
+        acknowledge_rejection_button.addEventListener("click", function() {
+            const rejection_modal = document.getElementById("rejection-modal");
+            if (rejection_modal) {
+                rejection_modal.classList.remove("active-modal");
+            }
+        });
+    }
+
+    const open_name_modal_button = document.getElementById("trigger-name-change-modal");
+    if (open_name_modal_button) {
+        open_name_modal_button.addEventListener("click", function() {
+            const name_modal = document.getElementById("name-change-modal");
+            if (name_modal) {
+                name_modal.classList.add("active-modal");
+            }
+        });
+    }
+
+    const close_name_modal_button = document.getElementById("cancel-name-change");
+    if (close_name_modal_button) {
+        close_name_modal_button.addEventListener("click", function() {
+            const name_modal = document.getElementById("name-change-modal");
+            if (name_modal) {
+                name_modal.classList.remove("active-modal");
+            }
+        });
+    }
+}
+
+function execute_form_submission(target_form) {
+    const active_tab_element = document.querySelector(".active-tab");
+    let active_target = "control-panel";
+    if (active_tab_element) {
+        active_target = active_tab_element.getAttribute("data-target");
+    }
+    
+    fetch(target_form.action, {
+        method: target_form.method,
+        body: new FormData(target_form)
+    })
+    .then(function(network_response) { return network_response.text(); })
+    .then(function(markup_text) {
+        replace_main_content(markup_text);
+        const new_tab_button = document.querySelector(".tab-button[data-target='" + active_target + "']");
+        if (new_tab_button) {
+            new_tab_button.click();
+        }
+    });
+}
+
+function replace_main_content(markup_text) {
+    const document_parser = new DOMParser();
+    const parsed_document = document_parser.parseFromString(markup_text, "text/html");
+    const current_container = document.querySelector(".application-content");
+    const new_container = parsed_document.querySelector(".application-content");
+    if (current_container && new_container) {
+        current_container.innerHTML = new_container.innerHTML;
+        initialize_application_behavior();
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("/service_worker.js");
+    }
+
+    if (typeof io !== "undefined") {
+        websocket_connection = io();
+        
+        websocket_connection.on("game_state_changed", function() {
+            if (document.querySelector(".game-section") || document.querySelector(".administrator-section")) {
+                fetch(window.location.href)
+                    .then(function(network_response) { return network_response.text(); })
+                    .then(function(markup_text) {
+                        replace_main_content(markup_text);
+                    });
+            }
+        });
+
+        websocket_connection.on("admin_state_changed", function() {
+            if (document.querySelector(".administrator-section")) {
+                fetch(window.location.href)
+                    .then(function(network_response) { return network_response.text(); })
+                    .then(function(markup_text) {
+                        replace_main_content(markup_text);
+                    });
+            }
+        });
+
+        websocket_connection.on("elimination_verification_requested", function() {
+            const modal_element = document.getElementById("verification-modal");
+            if (modal_element) {
+                modal_element.classList.add("active-modal");
+            } else {
+                fetch(window.location.href)
+                    .then(function(network_response) { return network_response.text(); })
+                    .then(function(markup_text) {
+                        replace_main_content(markup_text);
+                        const new_modal_element = document.getElementById("verification-modal");
+                        if (new_modal_element) {
+                            new_modal_element.classList.add("active-modal");
+                        }
+                    });
+            }
+        });
+
+        websocket_connection.on("elimination_rejected", function() {
+            const waiting_modal = document.getElementById("waiting-modal");
+            if (waiting_modal) {
+                waiting_modal.classList.remove("active-modal");
+            }
+            const rejection_modal = document.getElementById("rejection-modal");
+            if (rejection_modal) {
+                rejection_modal.classList.add("active-modal");
+            }
+        });
+    }
+    initialize_application_behavior();
+});

static/logo.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden" viewBox="465.8766784667969 137.75999450683594 353.4313049316406 384.6400146484375"><path d="M811.26 275.62 819.31 380.82 714.1 388.88 712.67 370.11 685.88 388.45 696.13 522.4 612.86 522.4 603.1 394.79 564.72 376.36 561.05 382.31C552.25 394.18 538.55 402.31 522.66 403.53 493.61 405.75 468.26 384 466.03 354.95 463.81 325.9 485.56 300.55 514.61 298.32 536.4 296.65 556.11 308.47 565.54 326.74L567.55 331.82 708.91 321 706.05 283.67ZM659.98 137.76 690.31 188.35 668.03 242.97 658.84 243.67 663.52 304.85 612.47 308.76 607.79 247.58 598.6 248.28 568.27 197.69 590.54 143.07Z" fill="oklch(85% 0.15 110)"/></svg>

static/manifest.json

@@ -0,0 +1,15 @@
+{
+    "name": "SCOicide Squad",
+    "short_name": "SCOicide",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#f0f2f5",
+    "theme_color": "#1a1e29",
+    "icons": [
+        {
+            "src": "/static/logo.svg",
+            "sizes": "any",
+            "type": "image/svg+xml"
+        }
+    ]
+}

static/service_worker.js

@@ -0,0 +1,23 @@
+const cache_identifier = "scoicide-squad-cache-version-1";
+
+self.addEventListener("install", function(installation_event) {
+    installation_event.waitUntil(
+        caches.open(cache_identifier).then(function(cache_object) {
+            return cache_object.addAll([
+                "/",
+                "/static/stylesheet.css",
+                "/static/behavior.js",
+                "/static/logo.svg",
+                "/static/manifest.json"
+            ]);
+        })
+    );
+});
+
+self.addEventListener("fetch", function(network_fetch_event) {
+    network_fetch_event.respondWith(
+        caches.match(network_fetch_event.request).then(function(cached_response) {
+            return cached_response || fetch(network_fetch_event.request);
+        })
+    );
+});

static/stylesheet.css

@@ -0,0 +1,443 @@
+:root {
+    --lightness-primary: 0.35;
+    --chroma-primary: 0.15;
+    --hue-primary: 15;
+
+    --lightness-background: 0.9;
+    --chroma-background: 0.01;
+    --hue-background: var(--hue-primary);
+    
+    --lightness-surface: 1;
+    --chroma-surface: 0;
+    --hue-surface: 0;
+    
+    --lightness-text: 0.15;
+    --chroma-text: 0.05;
+    --hue-text: 250;
+    
+    --lightness-success: 0.60;
+    --chroma-success: 0.18;
+    --hue-success: 140;
+    
+    --lightness-danger: 0.50;
+    --chroma-danger: 0.22;
+    --hue-danger: 25;
+    
+    --lightness-warning: 0.75;
+    --chroma-warning: 0.18;
+    --hue-warning: 70;
+    
+    --dimension-multiplier: 1;
+    --spacing-small: calc(0.5rem * var(--dimension-multiplier));
+    --spacing-medium: calc(1rem * var(--dimension-multiplier));
+    --spacing-large: calc(1.5rem * var(--dimension-multiplier));
+    
+    --border-radius-small: calc(0.5rem * var(--dimension-multiplier));
+    --border-radius-large: calc(1.25rem * var(--dimension-multiplier));
+    --border-radius-pill: calc(999rem * var(--dimension-multiplier));
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --lightness-background: 0.2;
+        --chroma-background: 0.02;
+        
+        --lightness-surface: 0.18;
+        --chroma-surface: 0.02;
+        
+        --lightness-text: 0.90;
+        --chroma-text: 0.02;
+        
+        --lightness-primary: 0.65;
+        --chroma-primary: 0.20;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition-duration: 0s !important;
+        animation-duration: 0s !important;
+    }
+}
+
+body {
+    background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
+    color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: calc(1rem * var(--dimension-multiplier));
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.application-header {
+    background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+    color: oklch(1 0 0);
+    padding: var(--spacing-medium) var(--spacing-large);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.brand-container {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+.brand-logo {
+    width: calc(2rem * var(--dimension-multiplier));
+    height: calc(2rem * var(--dimension-multiplier));
+    color: currentColor;
+}
+
+.application-title {
+    margin: 0;
+    font-size: calc(1.25rem * var(--dimension-multiplier));
+    font-weight: 800;
+    letter-spacing: -0.02em;
+}
+
+.application-content {
+    flex: 1;
+    padding: var(--spacing-large);
+    width: 100%;
+    max-width: calc(48rem * var(--dimension-multiplier));
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.content-card {
+    background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
+    padding: var(--spacing-large);
+    border-radius: var(--border-radius-large);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
+    margin-bottom: var(--spacing-large);
+}
+
+.section-title {
+    margin-top: 0;
+    margin-bottom: var(--spacing-medium);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+.card-subtitle {
+    margin-top: 0;
+    margin-bottom: var(--spacing-small);
+    opacity: 0.7;
+    text-transform: uppercase;
+    font-size: calc(0.875rem * var(--dimension-multiplier));
+    letter-spacing: 0.05em;
+}
+
+.input-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+}
+
+.inline-form {
+    display: inline-block;
+}
+
+.flexible_form_container {
+    display: flex;
+    gap: calc(0.5rem * var(--dimension-multiplier));
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.25rem * var(--dimension-multiplier));
+}
+
+.input-label {
+    font-weight: bold;
+    font-size: calc(0.875rem * var(--dimension-multiplier));
+}
+
+.text-input {
+    padding: var(--spacing-medium);
+    border: 2px solid oklch(0.5 0 0 / 0.2);
+    border-radius: var(--border-radius-small);
+    background-color: oklch(var(--lightness-background) var(--chroma-background) var(--hue-background));
+    color: inherit;
+    font-size: inherit;
+    transition: border-color 0.2s;
+}
+
+.text-input:focus {
+    outline: none;
+    border-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+}
+
+.small-input {
+    width: calc(12rem * var(--dimension-multiplier));
+    padding: var(--spacing-small);
+}
+
+.time-input {
+    width: calc(13rem * var(--dimension-multiplier));
+}
+
+.action-button {
+    padding: var(--spacing-medium) var(--spacing-large);
+    border: none;
+    border-radius: var(--border-radius-pill);
+    font-size: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-small);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    color: oklch(1 0 0);
+}
+
+.action-button:hover, .action-button:focus {
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+}
+
+.icon-button {
+    padding: calc(0.5rem * var(--dimension-multiplier));
+    border-radius: var(--border-radius-small);
+}
+
+.primary-button {
+    background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+    box-shadow: 0 4px 12px oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.3);
+}
+
+.success-button {
+    background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
+}
+
+.danger-button {
+    background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
+}
+
+.warning-button {
+    background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
+    color: oklch(0.2 0 0);
+}
+
+.secondary-button {
+    background-color: transparent;
+    color: oklch(var(--lightness-text) var(--chroma-text) var(--hue-text));
+    border: 2px solid oklch(var(--lightness-text) var(--chroma-text) var(--hue-text) / 0.2);
+}
+
+.large-button {
+    padding: var(--spacing-large) calc(2.5rem * var(--dimension-multiplier));
+    font-size: calc(1.125rem * var(--dimension-multiplier));
+    width: 100%;
+}
+
+.small-button {
+    padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.75rem * var(--dimension-multiplier));
+    font-size: calc(0.875rem * var(--dimension-multiplier));
+}
+
+.tab-container {
+    display: flex;
+    background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
+    border-radius: var(--border-radius-pill);
+    padding: calc(0.375rem * var(--dimension-multiplier));
+    gap: calc(0.25rem * var(--dimension-multiplier));
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    margin-bottom: var(--spacing-large);
+    overflow-x: auto;
+}
+
+.tab-button {
+    flex: 1;
+    border-radius: var(--border-radius-pill);
+    padding: calc(0.625rem * var(--dimension-multiplier)) var(--spacing-medium);
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(0.5rem * var(--dimension-multiplier));
+    white-space: nowrap;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.active-tab {
+    background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+    color: oklch(1 0 0);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.tab-content {
+    display: none;
+}
+
+.active-content {
+    display: block;
+}
+
+.status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(0.375rem * var(--dimension-multiplier));
+    padding: calc(0.25rem * var(--dimension-multiplier)) calc(0.875rem * var(--dimension-multiplier));
+    border-radius: var(--border-radius-pill);
+    font-size: calc(0.875rem * var(--dimension-multiplier));
+    font-weight: bold;
+    color: oklch(1 0 0);
+    margin-left: var(--spacing-small);
+}
+
+.warning-pill {
+    background-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
+    color: oklch(0.2 0 0);
+}
+
+.success-pill {
+    background-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
+}
+
+.danger-pill {
+    background-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
+}
+
+.notice-card {
+    border-left: 6px solid oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+}
+
+.danger-card {
+    border-left-color: oklch(var(--lightness-danger) var(--chroma-danger) var(--hue-danger));
+}
+
+.success-card {
+    border-left-color: oklch(var(--lightness-success) var(--chroma-success) var(--hue-success));
+}
+
+.warning-card {
+    border-left-color: oklch(var(--lightness-warning) var(--chroma-warning) var(--hue-warning));
+}
+
+.target-name {
+    font-size: calc(2.5rem * var(--dimension-multiplier));
+    text-align: center;
+    margin: var(--spacing-large) 0;
+    color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+    font-weight: 800;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.data-table th, .data-table td {
+    padding: var(--spacing-medium);
+    border-bottom: 1px solid oklch(0.5 0 0 / 0.1);
+    text-align: left;
+}
+
+.data-table th {
+    font-weight: 800;
+    text-transform: uppercase;
+    font-size: calc(0.75rem * var(--dimension-multiplier));
+    letter-spacing: 0.05em;
+    opacity: 0.7;
+}
+
+.highlighted-row {
+    background-color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary) / 0.1);
+}
+
+.highlighted-row td {
+    font-weight: bold;
+}
+
+.unregistered-row {
+    opacity: 0.6;
+}
+
+.markdown-container h1, .markdown-container h2, .markdown-container h3 {
+    color: oklch(var(--lightness-primary) var(--chroma-primary) var(--hue-primary));
+}
+
+.markdown-container ul {
+    padding-left: var(--spacing-large);
+}
+
+.modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.6);
+    backdrop-filter: blur(4px);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.active-modal {
+    display: flex;
+}
+
+.modal-dialog {
+    background-color: oklch(var(--lightness-surface) var(--chroma-surface) var(--hue-surface));
+    padding: var(--spacing-large);
+    border-radius: var(--border-radius-large);
+    max-width: calc(32rem * var(--dimension-multiplier));
+    width: 90%;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+}
+
+.modal-title {
+    margin-top: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+.modal-actions {
+    display: flex;
+    gap: var(--spacing-medium);
+    justify-content: flex-end;
+    margin-top: var(--spacing-large);
+}
+
+.qr-code-container {
+    background-color: oklch(1 0 0);
+    padding: var(--spacing-medium);
+    border-radius: var(--border-radius-large);
+    display: inline-block;
+    margin-bottom: var(--spacing-medium);
+    box-shadow: inset 0 0 0 2px oklch(0.5 0 0 / 0.1);
+}
+
+.qr-code-container svg {
+    display: block;
+    width: calc(14rem * var(--dimension-multiplier));
+    height: calc(14rem * var(--dimension-multiplier));
+}
+
+.monospace-identifier {
+    font-family: monospace;
+}