Add update.sh, release-channel tagging, mobile settings page

install.sh / install-nightly.sh:
  - Write .release-channel file ('release' or 'nightly') for future updates
  - install.sh also writes .release-version (for update --check)

update.sh (new):
  - Reads .release-channel to determine which channel to pull from
  - Release: checks releases/LATEST vs .release-version, skips if current
  - Nightly: always downloads latest
  - Stops service before extraction, restarts after
  - Rebuilds Python venv on update

ci/package.sh:
  - Include update.sh in distribution tarball

Web / mobile:
  - Add settings-page component for mobile
  - Wire settings page into mobile-app navigation
  - Chat page: load current user (/api/auth/me) for sender identity
  - Full mobile.css redesign
  - i18n: add mobile settings strings (en/fr/it)

ci/package.sh

@@ -17,7 +17,7 @@
 #
 # The tarball contains everything needed to run (or uninstall) Skald Circle:
 #   bin/skald, bin/skald-setup, web/, agents/, skills/,
-#   default.config.yaml, providers.yaml, requirements.txt, run.sh, uninstall.sh
+#   default.config.yaml, providers.yaml, requirements.txt, run.sh, update.sh, uninstall.sh
 
 set -eu
 
@@ -96,9 +96,9 @@ cp default.config.yaml "$STAGING/default.config.yaml"
 cp providers.yaml      "$STAGING/providers.yaml"
 cp requirements.txt    "$STAGING/requirements.txt"
 cp run.sh              "$STAGING/run.sh"
+cp update.sh            "$STAGING/update.sh"
 cp uninstall.sh         "$STAGING/uninstall.sh"
-chmod 755 "$STAGING/run.sh" "$STAGING/uninstall.sh"
+chmod 755 "$STAGING/run.sh" "$STAGING/update.sh" "$STAGING/uninstall.sh"
-
 # ── Create tarball ────────────────────────────────────────────────────────────
 mkdir -p "$OUTPUT"
 TARBALL="$(cd "$OUTPUT" && pwd)/${PACKAGE_NAME}.tar.gz"

install-nightly.sh

@@ -393,6 +393,10 @@ fi
 echo ""
 info "✅ Skald Circle (${DISPLAY_VERSION}) installed successfully!"
 echo ""
+
+# Write channel tag for future updates
+echo "$CHANNEL" > "$INSTALL_DIR/.release-channel"
+
 echo "  Server : ${INSTALL_DIR}/run.sh"
 echo "  Binary : ${INSTALL_DIR}/bin/skald"
 echo "  Setup  : ${INSTALL_DIR}/bin/skald-setup"

install.sh

@@ -398,6 +398,11 @@ fi
 echo ""
 info "✅ Skald Circle ${VERSION} installed successfully!"
 echo ""
+
+# Write channel tag and version for future updates
+echo "release" > "$INSTALL_DIR/.release-channel"
+echo "$VERSION" > "$INSTALL_DIR/.release-version"
+
 echo "  Server : ${INSTALL_DIR}/run.sh"
 echo "  Binary : ${INSTALL_DIR}/bin/skald"
 echo "  Setup  : ${INSTALL_DIR}/bin/skald-setup"

update.sh

@@ -0,0 +1,217 @@
+#!/usr/bin/env sh
+# update.sh — update Skald Circle to the latest version on the same channel
+#
+# Usage:
+#   ~/.local/share/skald-circle/update.sh
+#
+# Reads the .release-channel file written by the installer to determine
+# whether to pull from the release or nightly channel. On release, checks
+# the remote LATEST version first and skips the download if already current.
+#
+# Stops the service before extracting, then restarts it afterwards.
+
+set -eu
+
+# ── Determine install directory ───────────────────────────────────────────────
+if [ -n "${SKALD_DIR:-}" ]; then
+    INSTALL_DIR="$SKALD_DIR"
+else
+    INSTALL_DIR="$(cd "$(dirname "$0")" && pwd)"
+fi
+
+CHANNEL_FILE="${INSTALL_DIR}/.release-channel"
+if [ ! -f "$CHANNEL_FILE" ]; then
+    echo "✖ .release-channel not found in ${INSTALL_DIR}" >&2
+    echo "  This installation was not created by an installer or is too old." >&2
+    echo "  Please reinstall with:" >&2
+    echo "    curl -fsSL https://builds.skaldagent.net/install.sh | bash" >&2
+    exit 1
+fi
+
+CHANNEL="$(cat "$CHANNEL_FILE" | tr -d '[:space:]')"
+
+# ── Colours (if terminal) ─────────────────────────────────────────────────────
+if [ -t 1 ]; then
+    RED='\033[0;31m'
+    GREEN='\033[0;32m'
+    YELLOW='\033[1;33m'
+    CYAN='\033[0;36m'
+    BOLD='\033[1m'
+    NC='\033[0m'
+else
+    RED=''; GREEN=''; YELLOW=''; CYAN=''; BOLD=''; NC=''
+fi
+
+info()  { printf "${GREEN}%s${NC}\n" "$*"; }
+warn()  { printf "${YELLOW}⚠ %s${NC}\n" "$*"; }
+err()   { printf "${RED}✖ %s${NC}\n" "$*"; }
+header(){ printf "\n${BOLD}%s${NC}\n" "$*"; }
+banner(){ printf "\n${CYAN}${BOLD}%s${NC}\n" "$*"; }
+
+# ── Platform detection ────────────────────────────────────────────────────────
+OS="$(uname -s)"
+ARCH="$(uname -m)"
+
+case "$OS" in
+    Linux)  OS="linux"  ;;
+    Darwin) OS="darwin" ;;
+    *)      err "Unsupported OS: $OS"; exit 1 ;;
+esac
+
+case "$ARCH" in
+    x86_64)
+        ARCH="amd64"
+        if [ "$OS" = "darwin" ]; then
+            err "Intel Macs are not supported. Apple Silicon (M1+) only."
+            exit 1
+        fi
+        ;;
+    aarch64|arm64)
+        ARCH="arm64"
+        ;;
+    *)      err "Unsupported architecture: $ARCH"; exit 1 ;;
+esac
+
+command -v curl >/dev/null 2>&1 || { err "curl is required but not installed."; exit 1; }
+
+# ── Determine download URL ────────────────────────────────────────────────────
+BASE_URL="https://builds.skaldagent.net"
+
+case "$CHANNEL" in
+    release)
+        LATEST="$(curl -fsSL "${BASE_URL}/releases/LATEST" | head -1 | tr -d '[:space:]')"
+        if [ -z "$LATEST" ]; then
+            err "Could not fetch latest release version from ${BASE_URL}/releases/LATEST"
+            exit 1
+        fi
+
+        VERSION_FILE="${INSTALL_DIR}/.release-version"
+        if [ -f "$VERSION_FILE" ]; then
+            CURRENT="$(cat "$VERSION_FILE" | tr -d '[:space:]')"
+            if [ "$CURRENT" = "$LATEST" ]; then
+                info "✔ Already up to date (${CURRENT})."
+                exit 0
+            fi
+            info "🚀 Update available: ${CURRENT} → ${LATEST}"
+        else
+            info "🚀 Installing latest release: ${LATEST}"
+        fi
+
+        VERSION="$LATEST"
+        TARBALL_URL="${BASE_URL}/releases/${VERSION}/skald-circle-${VERSION}-${OS}-${ARCH}.tar.gz"
+        DISPLAY_VERSION="$VERSION"
+        ;;
+
+    nightly)
+        TARBALL_URL="${BASE_URL}/nightly/skald-circle-nightly-${OS}-${ARCH}.tar.gz"
+        DISPLAY_VERSION="nightly"
+        info "🚀 Updating to latest nightly build …"
+        ;;
+
+    *)
+        err "Unknown channel in ${CHANNEL_FILE}: '${CHANNEL}'"
+        err "Expected 'release' or 'nightly'."
+        exit 1
+        ;;
+esac
+
+# ── Stop service ──────────────────────────────────────────────────────────────
+stop_service() {
+    case "$OS" in
+        Linux)
+            if command -v systemctl >/dev/null 2>&1; then
+                if systemctl --user is-active skald-circle.service >/dev/null 2>&1; then
+                    info "⏹️  Stopping service …"
+                    systemctl --user stop skald-circle.service
+                fi
+            fi
+            ;;
+        Darwin)
+            if command -v launchctl >/dev/null 2>&1; then
+                if launchctl list com.skald.circle >/dev/null 2>&1; then
+                    info "⏹️  Stopping agent …"
+                    launchctl unload "$HOME/Library/LaunchAgents/com.skald.circle.plist" 2>/dev/null || true
+                fi
+            fi
+            ;;
+    esac
+}
+
+# ── Start service ─────────────────────────────────────────────────────────────
+start_service() {
+    case "$OS" in
+        Linux)
+            if command -v systemctl >/dev/null 2>&1; then
+                info "▶ Starting service …"
+                systemctl --user start skald-circle.service
+            fi
+            ;;
+        Darwin)
+            if command -v launchctl >/dev/null 2>&1; then
+                info "▶ Starting agent …"
+                launchctl load "$HOME/Library/LaunchAgents/com.skald.circle.plist" 2>/dev/null || true
+            fi
+            ;;
+    esac
+}
+
+# ── Main ──────────────────────────────────────────────────────────────────────
+banner "╔══════════════════════════════════════════╗"
+banner "║       Skald Circle — Updater (${DISPLAY_VERSION})     ║"
+banner "╚══════════════════════════════════════════╝"
+echo ""
+echo "  Channel    : ${CHANNEL}"
+echo "  Platform   : ${OS}/${ARCH}"
+echo "  Install    : ${INSTALL_DIR}"
+echo ""
+
+stop_service
+
+# Download & extract
+TMP_TARBALL="$(mktemp -t skald-update.XXXXXX.tar.gz)"
+trap 'rm -f "$TMP_TARBALL"' EXIT
+
+info "↓ Downloading Skald Circle (${DISPLAY_VERSION}) …"
+curl -fsSL -o "$TMP_TARBALL" "$TARBALL_URL"
+
+info "📦 Extracting …"
+tar xzf "$TMP_TARBALL" -C "$INSTALL_DIR" --strip-components=1
+
+if [ ! -x "$INSTALL_DIR/bin/skald" ]; then
+    err "Extraction failed — skald binary not found."
+    exit 1
+fi
+
+# Update version file for release channel
+if [ "$CHANNEL" = "release" ]; then
+    echo "$VERSION" > "$INSTALL_DIR/.release-version"
+fi
+
+# Rebuild Python venv (best effort — new deps may have appeared)
+info "🔧 Rebuilding Python virtual environment …"
+VENV_DIR="${INSTALL_DIR}/.venv"
+REQUIREMENTS="${INSTALL_DIR}/requirements.txt"
+
+rm -rf "$VENV_DIR"
+if command -v uv >/dev/null 2>&1; then
+    uv venv --seed "$VENV_DIR" && uv pip install -r "$REQUIREMENTS" \
+        && info "✔ Python venv ready (uv)" \
+        || warn "Python venv setup failed — Python MCP servers will be unavailable."
+elif command -v python3 >/dev/null 2>&1; then
+    python3 -m venv "$VENV_DIR" && "$VENV_DIR/bin/pip" install -r "$REQUIREMENTS" \
+        && info "✔ Python venv ready (pip)" \
+        || warn "Python venv setup failed — Python MCP servers will be unavailable."
+else
+    warn "python3 not found — Python MCP servers will be unavailable."
+fi
+
+start_service
+
+# ── Done ──────────────────────────────────────────────────────────────────────
+echo ""
+info "✅ Skald Circle updated to ${DISPLAY_VERSION}!"
+echo ""
+echo "  Status:  $( [ "$OS" = "linux" ] && echo "systemctl --user status skald-circle" || echo "launchctl list com.skald.circle" )"
+echo "  Logs:    $( [ "$OS" = "linux" ] && echo "journalctl --user -u skald-circle -f" || echo "tail -f ${INSTALL_DIR}/logs/stdout.log" )"
+echo "  Update:  ${INSTALL_DIR}/update.sh"
+echo ""

web/components/mobile-app.js

@@ -3,6 +3,7 @@ import { t }            from '../lib/i18n.js';
 import './shared/inbox-page.js';
 import './shared/chat-page.js';
 import './shared/projects-page.js';
+import './shared/settings-page.js';
 import './shared/file-viewer-mobile.js';
 
 // Sections addressable via the URL hash — same routing style as the desktop
@@ -168,7 +169,7 @@ class MobileApp extends LitElement {
            @click=${() => this._nav(id)}>
         ${id === 'chat'
           ? html`<div class="chat-fab"><i class="bi bi-chat-dots-fill"></i></div>`
-          : html`<i class="bi ${icon}"></i>`}
+          : html`<span class="nav-icon"><i class="bi ${icon}"></i></span>`}
         <span>${label}</span>
       </div>
     `;
@@ -197,9 +198,13 @@ class MobileApp extends LitElement {
             .path=${this._filePath}
             style=${s === 'file_viewer' ? 'flex:1;min-height:0;overflow:hidden' : 'display:none'}
           ></mobile-file-viewer-page>
-          ${['notifications', 'settings'].includes(s) ? html`
+          <settings-page
+            .visible=${s === 'settings'}
+            style=${s === 'settings' ? 'flex:1;min-height:0;overflow:hidden' : 'display:none'}
+          ></settings-page>
+          ${s === 'notifications' ? html`
             <div class="mobile-coming-soon">
-              <i class="bi bi-tools"></i>
+              <i class="bi bi-bell"></i>
               <p>${t('mobile.coming_soon')}</p>
             </div>
           ` : ''}

web/components/shared/chat-page.js

@@ -12,6 +12,7 @@ export class ChatPage extends ChatSession {
     // Human-readable label for the active source (e.g. the project name), shown
     // in the header when inside a project.
     label:   { type: String },
+    _me:     { state: true },
   };
 
   constructor() {
@@ -19,6 +20,14 @@ export class ChatPage extends ChatSession {
     this.visible = false;
     this.source  = 'mobile';
     this.label   = '';
+    this._me     = null;
+  }
+
+  async _loadMe() {
+    try {
+      const res = await fetch('/api/auth/me');
+      if (res.ok) this._me = await res.json();
+    } catch { /* greeting falls back to the generic one */ }
   }
 
   connectedCallback() {
@@ -29,6 +38,7 @@ export class ChatPage extends ChatSession {
     // still handled by `updated` below.
     if (this.source && this.source !== this._wsSource) this._activeSource = this.source;
     super.connectedCallback();
+    this._loadMe();
   }
 
   updated(changed) {
@@ -95,6 +105,49 @@ export class ChatPage extends ChatSession {
     this._expanded = next;
   }
 
+  _sendSuggestion(text) {
+    const el = this._inputEl();
+    if (!el) return;
+    el.value = text;
+    this._send();
+  }
+
+  // Welcome hero (main session) with a few prompt suggestions, mirroring the
+  // desktop home. Inside a project the empty state stays compact — the header
+  // already carries the context.
+  _renderEmptyState() {
+    if (this._inProject) {
+      return html`
+        <div class="chat-page-hero">
+          <i class="bi bi-folder2-open" style="font-size:1.6rem;color:var(--accent)"></i>
+          <p class="chat-page-hero-sub" style="margin:0.5rem 0 0">${this.label || t('chat.mobile.project')}</p>
+        </div>
+      `;
+    }
+    const name = this._me?.display_name || this._me?.username;
+    const suggestions = [
+      { icon: 'bi-stars',          text: t('chat.suggest.1') },
+      { icon: 'bi-calendar-check', text: t('chat.suggest.2') },
+      { icon: 'bi-book',           text: t('chat.suggest.3') },
+      { icon: 'bi-heart',          text: t('chat.suggest.4') },
+    ];
+    return html`
+      <div class="chat-page-hero">
+        <img class="chat-page-hero-logo" src="/assets/icons/icon-192.png" alt="" />
+        <h1 class="chat-page-hero-title">${name ? t('chat.greeting.named', { name }) : t('chat.greeting')}</h1>
+        <p class="chat-page-hero-sub">${t('chat.greeting.sub')}</p>
+        <div class="chat-page-suggestions">
+          ${suggestions.map(s => html`
+            <button class="chat-page-suggestion" @click=${() => this._sendSuggestion(s.text)}>
+              <i class="bi ${s.icon}"></i>
+              <span>${s.text}</span>
+            </button>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
   // ── Render ─────────────────────────────────────────────────────────────────
 
   render() {
@@ -123,12 +176,7 @@ export class ChatPage extends ChatSession {
         </div>
 
         <div class="chat-page-messages">
-          ${this._messages.length === 0 ? html`
+          ${this._messages.length === 0 ? this._renderEmptyState() : this._messages.map(m => renderMsg(this, m))}
-            <div class="chat-page-empty">
-              <i class="bi bi-stars"></i>
-              <p>${t('chat.mobile.ask')}</p>
-            </div>
-          ` : this._messages.map(m => renderMsg(this, m))}
 
           ${this._waiting ? html`
             <div class="copilot-msg assistant copilot-thinking">

web/components/shared/settings-page.js

@@ -0,0 +1,126 @@
+import { html, nothing } from 'lit';
+import { LightElement }  from '../../lib/base.js';
+import { t, LOCALES, getLocale, setLocale, I18nMixin } from '../../lib/i18n.js';
+
+// Stable per-user avatar color: same user, same hue, everywhere (topbar twin).
+function avatarColor(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
+  return `hsl(${h % 360}, 55%, 52%)`;
+}
+
+/**
+ * Mobile settings page: account card, theme + language preferences and logout.
+ * The theme chain mirrors the desktop topbar (localStorage `theme` wins over
+ * the OS preference, applied on `data-bs-theme`); the language goes through
+ * the shared `setLocale(..., { persist: true })`, which also saves it to the
+ * user profile server-side.
+ */
+export class SettingsPage extends I18nMixin(LightElement) {
+  static properties = {
+    visible: { type: Boolean },
+    _me:     { state: true },
+    _theme:  { state: true },
+  };
+
+  constructor() {
+    super();
+    this.visible = false;
+    this._me     = null;
+    this._theme  = document.documentElement.getAttribute('data-bs-theme') ?? 'light';
+  }
+
+  updated(changed) {
+    if (changed.has('visible') && this.visible) this._loadMe();
+  }
+
+  async _loadMe() {
+    try {
+      const res = await fetch('/api/auth/me');
+      if (res.ok) this._me = await res.json();
+    } catch { /* keep whatever we have */ }
+  }
+
+  _setTheme(theme) {
+    this._theme = theme;
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  _setLocale(e) {
+    setLocale(e.target.value, { persist: true });
+  }
+
+  _logout() {
+    fetch('/api/auth/logout', { method: 'POST' }).then(() => window.location.reload());
+  }
+
+  render() {
+    if (!this.visible) return nothing;
+
+    const name    = this._me?.display_name || this._me?.username || '';
+    const initial = name ? name.charAt(0).toUpperCase() : '?';
+    const color   = this._me?.username ? avatarColor(this._me.username) : 'var(--accent)';
+    const current = getLocale();
+
+    return html`
+      <div class="mobile-settings">
+        <div class="mobile-section-header">
+          <span class="mobile-section-title">
+            <i class="bi bi-sliders"></i> ${t('mobile.nav.settings')}
+          </span>
+        </div>
+
+        <div class="mobile-settings-scroll">
+          <div class="settings-card">
+            <div class="settings-profile">
+              <div class="settings-avatar" style="background:${color}">${initial}</div>
+              <div>
+                <div class="settings-profile-name">${name}</div>
+                <div class="settings-profile-sub">@${this._me?.username ?? ''}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="settings-card">
+            <div class="settings-row">
+              <span class="settings-row-label">
+                <i class="bi ${this._theme === 'dark' ? 'bi-moon-stars' : 'bi-sun'}"></i>
+                ${t('mobile.settings.theme')}
+              </span>
+              <div class="settings-segment">
+                <button class="${this._theme === 'light' ? 'active' : ''}"
+                        title=${t('mobile.settings.light')}
+                        @click=${() => this._setTheme('light')}>
+                  <i class="bi bi-sun"></i>
+                </button>
+                <button class="${this._theme === 'dark' ? 'active' : ''}"
+                        title=${t('mobile.settings.dark')}
+                        @click=${() => this._setTheme('dark')}>
+                  <i class="bi bi-moon-stars"></i>
+                </button>
+              </div>
+            </div>
+            <div class="settings-row">
+              <span class="settings-row-label">
+                <i class="bi bi-translate"></i>
+                ${t('mobile.settings.language')}
+              </span>
+              <select class="settings-lang-select" @change=${(e) => this._setLocale(e)}>
+                ${LOCALES.map(l => html`
+                  <option value=${l.id} ?selected=${l.id === current}>${l.label}</option>
+                `)}
+              </select>
+            </div>
+          </div>
+
+          <button class="settings-logout" @click=${() => this._logout()}>
+            <i class="bi bi-box-arrow-right"></i> ${t('topbar.logout')}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('settings-page', SettingsPage);

web/i18n/en.js

@@ -58,6 +58,10 @@ export default {
   'mobile.nav.chat':     'Chat',
   'mobile.nav.alerts':   'Alerts',
   'mobile.nav.settings': 'Settings',
+  'mobile.settings.theme':    'Theme',
+  'mobile.settings.light':    'Light',
+  'mobile.settings.dark':     'Dark',
+  'mobile.settings.language': 'Language',
   'chat.send':          'Send',
   'chat.stop':          'Stop',
   'chat.thinking':      'Thinking…',

web/i18n/fr.js

@@ -58,6 +58,10 @@ export default {
   'mobile.nav.chat':     'Discussion',
   'mobile.nav.alerts':   'Alertes',
   'mobile.nav.settings': 'Paramètres',
+  'mobile.settings.theme':    'Thème',
+  'mobile.settings.light':    'Clair',
+  'mobile.settings.dark':     'Sombre',
+  'mobile.settings.language': 'Langue',
   'chat.send':          'Envoyer',
   'chat.stop':          'Arrêter',
   'chat.thinking':      'Réflexion…',

web/i18n/it.js

@@ -58,6 +58,10 @@ export default {
   'mobile.nav.chat':     'Chat',
   'mobile.nav.alerts':   'Avvisi',
   'mobile.nav.settings': 'Impostazioni',
+  'mobile.settings.theme':    'Tema',
+  'mobile.settings.light':    'Chiaro',
+  'mobile.settings.dark':     'Scuro',
+  'mobile.settings.language': 'Lingua',
   'chat.send':          'Invia',
   'chat.stop':          'Ferma',
   'chat.thinking':      'Sto pensando…',

web/mobile.html

@@ -7,6 +7,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <meta name="apple-mobile-web-app-title" content="Agent" />
+  <meta name="theme-color" content="#faf7f2" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#1c1814" media="(prefers-color-scheme: dark)" />
   <title>Skald</title>
   <link rel="icon" href="/assets/icons/favicon.ico" sizes="any" />
   <link rel="icon" href="/assets/icons/icon-192.png" type="image/png" />
@@ -16,15 +18,24 @@
 
   <script>
     (function () {
-      const dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      // Same chain as the desktop shell: a saved choice wins over the OS.
+      const saved = localStorage.getItem('theme');
+      const dark  = saved ? saved === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
       document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
       window.matchMedia('(prefers-color-scheme: dark)')
         .addEventListener('change', e => {
+          if (!localStorage.getItem('theme')) {
             document.documentElement.setAttribute('data-bs-theme', e.matches ? 'dark' : 'light');
+          }
         });
     })();
   </script>
 
+  <!-- Font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
+
   <!-- Bootstrap -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
@@ -49,7 +60,7 @@
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     html, body { height: 100%; overflow: hidden; }
-    body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
+    body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
     mobile-app { display: flex; flex-direction: column; height: 100%; }
   </style>
 </head>