style: dark sidebar + Racing Sans One YARIS wordmark logo

- Sidebar bg: navy (#1a1a2e) → dark gray (#1c1c1e)
- Logo: replaced fa-car icon + text with styled YARIS wordmark
  using Racing Sans One (free Google Font, OFL licensed)
- Red accent underline (#e63946) on logo
- Applied to both server (server/templates/base.html) and
  Pi (templates/base.html) + mobile topbar

server/templates/base.html

@@ -5,6 +5,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>{% block title %}Yaris OBD – Remote{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='yaris.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='fonts/fontawesome-all.min.css') }}">
@@ -24,8 +27,7 @@
     {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
     <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
         <a class="sidebar-brand" href="{{ url_for('portal_index') }}" aria-label="Home">
-            <i class="fas fa-car sidebar-brand-icon"></i>
+            <span class="sidebar-brand-logo">YARIS</span>
-            <span class="sidebar-brand-text">Yaris OBD</span>
         </a>
         <div class="px-3 pb-1 sidebar-env-badge">
             <span class="badge bg-warning text-dark w-100 text-center" style="font-size:.65rem;letter-spacing:.04em;">
@@ -82,8 +84,7 @@
         <nav class="topbar navbar navbar-light bg-white shadow-sm">
             <div class="container-fluid px-3 gap-2">
                 <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('portal_index') }}">
-                    <i class="fas fa-car text-primary"></i>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS</span>
-                    <span class="fw-bold text-dark">Yaris OBD</span>
                     <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">Remote</span>
                 </a>
                 <div class="d-flex align-items-center gap-2">

static/yaris.css

@@ -4,10 +4,11 @@
     --sidebar-width: 14rem;
     --sidebar-collapsed-width: 4rem;
     --topbar-height: 3.5rem;
-    --sidebar-bg: #1a1a2e;
+    --sidebar-bg: #1c1c1e;
     --sidebar-hover: rgba(255,255,255,.08);
     --sidebar-active: rgba(255,255,255,.15);
     --primary: #4e73df;
+    --accent: #e63946;
 }
 
 body {
@@ -38,7 +39,7 @@ body {
 .sidebar-brand {
     display: flex;
     align-items: center;
-    gap: .75rem;
+    gap: 0;
     padding: 1.25rem 1rem;
     color: #fff;
     text-decoration: none;
@@ -48,13 +49,43 @@ body {
 
 .sidebar-brand:hover { color: rgba(255,255,255,.85); }
 
-.sidebar-brand-icon {
+/* ── YARIS logo wordmark ──────────────────────────────────────────────── */
-    font-size: 1.25rem;
+
-    flex-shrink: 0;
+.sidebar-brand-logo {
-    width: 2rem;
+    font-family: 'Racing Sans One', 'Arial Black', sans-serif;
-    text-align: center;
+    font-size: 1.55rem;
+    font-weight: 400;
+    font-style: italic;
+    letter-spacing: .06em;
+    color: #fff;
+    line-height: 1;
+    position: relative;
+    display: inline-block;
 }
 
+.sidebar-brand-logo::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: var(--accent);
+    border-radius: 2px;
+}
+
+.app-sidebar.collapsed .sidebar-brand-logo {
+    font-size: 1.3rem;
+    letter-spacing: 0;
+    /* Show only first letter when collapsed */
+    visibility: visible;
+}
+
+.app-sidebar.collapsed .sidebar-brand-logo::after {
+    display: none;
+}
+
+/* Old — kept for compatibility, not used by new logo */
 .sidebar-brand-text {
     font-weight: 700;
     font-size: .95rem;

templates/base.html

@@ -5,6 +5,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <title>{% block title %}Yaris OBD{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='yaris.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='fonts/fontawesome-all.min.css') }}">
@@ -16,8 +19,7 @@
     {# ── Desktop sidebar ─────────────────────────────────────────────────── #}
     <nav id="app-sidebar" class="app-sidebar d-none d-md-flex flex-column">
         <a class="sidebar-brand" href="{{ url_for('index') }}" aria-label="Home">
-            <i class="fas fa-car sidebar-brand-icon"></i>
+            <span class="sidebar-brand-logo">YARIS</span>
-            <span class="sidebar-brand-text">{{ car.model }}</span>
         </a>
         <hr class="sidebar-divider">
         <ul class="nav flex-column flex-grow-1">
@@ -65,8 +67,7 @@
             <div class="container-fluid px-3 gap-2">
                 {# Mobile: logo on left #}
                 <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('index') }}">
-                    <i class="fas fa-car text-primary"></i>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS</span>
-                    <span class="fw-bold text-dark">{{ car.model }}</span>
                 </a>
                 <div class="ms-auto d-flex align-items-center gap-2">
                     <div class="dropdown">