Modern in the logo's colours, and the logo in the page's mode (#63)

Modern's palette was sampled from the 2004 iPodderX icon: a neutral navy,
its screen blue and amber EQ bars. It now takes the new logo's colours,
the dark half from logo-dark.svg (navy ground, #8fc2ea scale, #ff6a1a
needle) and the light half from logo.svg (sky ground, #2f6aa0 scale, the
needle taken down to #c43e00 so white on it clears AA). The pending amber
and the error red moved apart from the needle's orange, and the sign-in
page's copy of the palette follows.

The pages always showed logo.svg, the light variant, even in a dark
theme; logo-dark.svg was never served. It is now, and the app and admin
pages show whichever matches data-mode, dark until the script says light,
as the palette is. The sign-in page, which has no account's theme, picks
by the system's with <picture>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/app.css

@@ -2,44 +2,44 @@
    anyone else. One variable file covers every weight used here; italics are synthesized. Classic
    keeps Lucida Grande, the 2004 app's face. */
 @font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
-/* Palette taken from the 2004 iPodderX icon: the silver device body, the blue
-   screen, and the amber EQ bars. Hex values in comments are sampled straight from it. */
+/* Palette taken from the logo (web/logo.svg, logo-dark.svg): its navy ground, the tuning scale's
+   blue and the orange needle. The dark half follows logo-dark.svg. */
 :root {
-  --bg:#0e131b;      /* the screen's navy (#314B74), taken right down */
-  --panel:#151c27;
-  --panel2:#1c2431;
-  --raise:#25303f;
-  --line:#2c3849;
-  --fg:#f5f5f5;      /* #F5F5F5 device highlight */
-  --dim:#95a0b1;     /* #95A0B1 straight from the icon's blue-grey */
-  --faint:#7e8b9c;  /* lifted from the icon ramp until it clears AA at small sizes */
-  --accent:#92b2e6;  /* #92B2E6 the screen blue */
-  --accent2:#f49e2c; /* #F49E2C the EQ bars */
-  --ink:#0e131b;     /* text on an accent fill */
+  --bg:#0a1726;      /* the dark logo's navy (#0c2238), taken down */
+  --panel:#0f1f31;
+  --panel2:#15283d;
+  --raise:#1d3450;
+  --line:#264060;
+  --fg:#f3f7fb;
+  --dim:#a3b6ca;
+  --faint:#8a9fb5;
+  --accent:#8fc2ea;  /* #8FC2EA the dark logo's scale */
+  --accent2:#ff6a1a; /* #FF6A1A the dark logo's needle */
+  --ink:#0a1726;     /* text on an accent fill */
   --good:#6fbf8b;
-  --warn:#f49e2c;    /* the amber doubles as the pending colour */
-  --bad:#e2705f;
-  --shadow:0 8px 28px rgba(6,10,16,.55);
+  --warn:#f5a524;    /* amber, apart from the needle's orange, for pending */
+  --bad:#ff6b7a;     /* pushed towards pink, apart from the needle */
+  --shadow:0 8px 28px rgba(4,10,20,.55);
 }
 /* Every other theme overrides the same variables, under data-theme and data-mode. The page's
    script sets data-mode to light or dark, working Auto out from the system, so each theme has
    one block per variant here and none needs repeating under a media query. */
 :root[data-theme="modern"][data-mode="light"] {
-  --bg:#f2f4f7;
-  --panel:#ffffff;   /* #FFFFFF device body */
-  --panel2:#e9edf3;
-  --raise:#dde3ec;
-  --line:#d6d6d6;    /* #D6D6D6 device edge */
-  --fg:#1a1a1a;      /* #1A1A1A icon outline */
-  --dim:#606060;     /* #606060 */
-  --faint:#6b6b6b;  /* between the icon's #929292 and #606060, to clear AA on the page ground */
-  --accent:#2d5391;  /* #2D5391 the deep screen blue reads better on white */
-  --accent2:#985e0a;  /* the EQ amber, taken down until white on it clears AA */
+  --bg:#eef5fb;      /* the light logo's sky (#DFF0FB), paler */
+  --panel:#ffffff;
+  --panel2:#e4eff9;
+  --raise:#d5e6f5;
+  --line:#c6d9ea;
+  --fg:#10233a;
+  --dim:#46596e;
+  --faint:#56697e;
+  --accent:#2f6aa0;  /* #2F6AA0 the logo's scale */
+  --accent2:#c43e00; /* the needle (#FF5500), taken down until white on it clears AA */
   --ink:#ffffff;
   --good:#2f7d4f;
-  --warn:#985e0a;  /* the same amber; the lighter one failed AA as text */
-  --bad:#b3402f;
-  --shadow:0 8px 28px rgba(45,83,145,.14);
+  --warn:#985e0a;    /* amber, apart from the needle's orange; lighter failed AA as text */
+  --bad:#b3263a;     /* pushed towards crimson, apart from the needle */
+  --shadow:0 8px 28px rgba(47,106,160,.14);
 }
 /* Dracula, and Alucard, its light half, from draculatheme.com/spec. The spec's comment colour
    (#6272A4, #6C664B) is too faint for small text on its own background, so --faint is lifted. */
@@ -493,7 +493,11 @@ a{color:var(--accent)}
   background:var(--panel);border-right:1px solid var(--line);
   display:flex;flex-direction:column;min-height:0;
 }
-#applogo{width:28px;height:28px;flex:none;border-radius:7px}
+#applogo{display:flex;flex:none}
+#applogo img{width:28px;height:28px;border-radius:7px}
+/* The logo in the mode's own variant. Dark unless the page says light, as the palette is: with
+   Auto, data-mode arrives with the script, and until then the page is drawn dark. */
+:root[data-mode="light"] .logo.ondark,:root:not([data-mode="light"]) .logo.onlight{display:none}
 .iconbtn{
   width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
   color:var(--dim);flex:none;