app: shared OTM login/account look, ported verbatim (v0.6.0)

Port the shared otm-login/otm-menu CSS+markup from
@otm/account-panel otm-login-core.ts 0.44.0 (verbatim, kept in sync
via header comments) into login.html and the sidebar account menu in
index.html/app.js. Accent is the studio's --plum, heading font via
the module's --otm-font-display variable. Behaviour is unchanged
(OTM-first / "Other ways to sign in" toggle, server-filled
__OTM_SSO_URL__, same reasons).

The account menu needs to know whether a session came in via OTM to
show the badge/"Manage OTM account" link, which the session didn't
track before — added a `via: "otm"` claim on the SSO callback's
session and exposed it from GET /api/me (additive; password and
operator-magic sessions are unaffected and read as not-linked).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014LCQmFvKshyAJsE8C3B5ET

app/public/index.html

@@ -85,6 +85,27 @@
   .matrow input:last-of-type { width: 80px; }
   footer { text-align: center; color: #b1a0ae; font-size: 13px; margin-top: 32px; font-style: italic; font-family: Georgia, serif; }
   footer .chip { font-family: "Avenir Next", "Nunito", sans-serif; font-style: normal; margin-left: 8px; }
+
+  /* ported from @otm/account-panel otm-login-core.ts 0.44.0 (OTM_LOGIN_CSS,
+     the .otm-badge/.otm-menu rules) — keep in sync, verbatim except
+     .otm-menu__panel's `right:0` → `left:0` (the trigger sits in a 212px
+     left sidebar; opening to the right would clip off the page edge). The
+     studio's accent (--plum) is set inline on .otm-menu in app.js, not here. */
+  .otm-badge{display:inline-block;border-radius:5px;padding:1px 5px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--otm-accent,#b5562a) 16%,transparent);color:var(--otm-accent,#b5562a);vertical-align:middle}
+  .otm-menu{position:relative;display:inline-block;--otm-accent:#b5562a;--otm-accent-ink:#fff;--otm-card:#fff;--otm-fg:#1f1b18;--otm-muted:#6b6560;--otm-line:rgba(31,27,24,.12)}
+  @media (prefers-color-scheme:dark){.otm-menu{--otm-card:#211e1b;--otm-fg:#f3efe9;--otm-muted:#a39b92;--otm-line:rgba(243,239,233,.12)}}
+  .otm-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;cursor:pointer;color:inherit;font:inherit}
+  .otm-menu>summary::-webkit-details-marker{display:none}
+  .otm-menu>summary:hover{background:rgba(127,127,127,.1)}
+  .otm-menu__avatar{width:26px;height:26px;border-radius:999px;background:var(--otm-accent);color:var(--otm-accent-ink);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
+  .otm-menu__name{font-size:14px}
+  @media (max-width:640px){.otm-menu__name{display:none}}
+  .otm-menu__panel{position:absolute;left:0;top:calc(100% + 6px);min-width:15rem;background:var(--otm-card);color:var(--otm-fg);border:1px solid var(--otm-line);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:50}
+  .otm-menu__who{padding:8px 10px 10px;font-size:12px;color:var(--otm-muted);border-bottom:1px solid var(--otm-line);margin-bottom:6px}
+  .otm-menu__who strong{display:flex;align-items:center;gap:6px;color:var(--otm-fg);font-weight:500;margin-bottom:2px}
+  .otm-menu__item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;border:0;background:none;color:inherit;font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
+  .otm-menu__item:hover{background:rgba(127,127,127,.1)}
+  .otm-menu__item svg{width:16px;height:16px;opacity:.75;flex:none}
 </style>
 </head>
 <body>
@@ -102,7 +123,7 @@
       <button data-v="ideas">💭 Mind Dump</button>
       <button data-v="notes">📒 Notes</button>
     </nav>
-    <nav style="margin-top:18px"><button id="signout" style="font-size:13px">👋 sign out</button></nav>
+    <nav style="margin-top:18px" id="account-nav"></nav>
   </aside>
   <div class="wrap">
     <header style="padding-bottom:18px">