fix(web): styled role-filtered nav, hidden on phones; clearer studio preview label

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

apps/web/src/main.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { lazy, Suspense, useEffect, useState } from "react";
-import { createBrowserRouter, Link, Outlet, RouterProvider, useLocation, type RouteObject } from "react-router-dom";
+import { createBrowserRouter, Link, NavLink, Outlet, RouterProvider, useLocation, type RouteObject } from "react-router-dom";
 import type { AuthUser } from "@stc/contracts";
 import { AppShell } from "@stc/ui";
 import { webFeatures } from "./features";
@@ -31,9 +31,11 @@ function Layout() {
   const header = (
     <>
       <Link to="/" style={{ fontWeight: 600, color: "var(--head)", textDecoration: "none" }}>STCourses</Link>
-      <nav style={{ display: "flex", gap: 14 }}>
-        {nav.map((r) => <Link key={r.path} to={r.path}>{r.nav!.label}</Link>)}
-      </nav>
+      {nav.length ? (
+        <nav className="stc-nav" aria-label="Areas">
+          {nav.map((r) => <NavLink key={r.path} to={r.path}>{r.nav!.label}</NavLink>)}
+        </nav>
+      ) : null}
     </>
   );
   return (