Sprint 8: modernes Design-System für die React-PWA

Gemeinsames Stylesheet (Tokens, Karten, Buttons, Badges, Formulare) plus
AppShell (Kopfzeile mit Navigation/Logout) statt Inline-Styles je Screen.
Kein UI-Framework als neue Abhängigkeit - schlankes eigenes CSS, damit
Build/Deploy-Weg unverändert bleibt.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L85hmKbvX7Cqkq47KnQhFt

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import { AuthProvider, useAuth } from "./auth/AuthContext";
+import { AppShell } from "./components/AppShell";
 import { AdminPage } from "./pages/AdminPage";
 import { KontrollPage } from "./pages/KontrollPage";
 import { LoginPage } from "./pages/LoginPage";
@@ -12,7 +13,7 @@ function GeschuetzteRoute({ children }: { children: ReactNode }) {
   if (!eingeloggt) {
     return <Navigate to="/login" replace />;
   }
-  return <>{children}</>;
+  return <AppShell>{children}</AppShell>;
 }
 
 function AdminRoute({ children }: { children: ReactNode }) {
@@ -23,7 +24,7 @@ function AdminRoute({ children }: { children: ReactNode }) {
   if (!istAdmin) {
     return <Navigate to="/objekte" replace />;
   }
-  return <>{children}</>;
+  return <AppShell>{children}</AppShell>;
 }
 
 export default function App() {

frontend/src/components/AppShell.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+
+import { useAuth } from "../auth/AuthContext";
+
+/** Gemeinsamer Rahmen (Kopfzeile + Navigation) für alle eingeloggten Screens. */
+export function AppShell({ children }: { children: ReactNode }) {
+  const { istAdmin, logout } = useAuth();
+  const navigate = useNavigate();
+
+  function handleLogout() {
+    logout();
+    navigate("/login");
+  }
+
+  return (
+    <div className="app-shell">
+      <header className="topbar">
+        <NavLink to="/objekte" className="topbar-brand">
+          MABEA
+        </NavLink>
+        <nav className="topbar-nav">
+          <NavLink to="/objekte" className={({ isActive }) => (isActive ? "active" : "")}>
+            Objekte
+          </NavLink>
+          {istAdmin && (
+            <NavLink to="/admin" className={({ isActive }) => (isActive ? "active" : "")}>
+              Administration
+            </NavLink>
+          )}
+          <button className="btn btn-secondary" onClick={handleLogout}>
+            Abmelden
+          </button>
+        </nav>
+      </header>
+      {children}
+    </div>
+  );
+}

frontend/src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
 import App from "./App";
+import "./styles/global.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

frontend/src/pages/AdminPage.tsx

@@ -15,12 +15,16 @@ export function AdminPage() {
   const [vorlagen, setVorlagen] = useState<Beladungsvorlage[]>([]);
   const [objekte, setObjekte] = useState<Objekt[]>([]);
   const [fehler, setFehler] = useState<string | null>(null);
+  const [laedt, setLaedt] = useState(true);
 
   const [standortName, setStandortName] = useState("");
+  const [standortWirdAngelegt, setStandortWirdAngelegt] = useState(false);
+
   const [objektCode, setObjektCode] = useState("");
   const [objektName, setObjektName] = useState("");
   const [vorlageId, setVorlageId] = useState<number | "">("");
   const [standortId, setStandortId] = useState<number | "">("");
+  const [objektWirdAngelegt, setObjektWirdAngelegt] = useState(false);
 
   async function ladeAlles() {
     const [s, v, o] = await Promise.all([
@@ -34,17 +38,22 @@ export function AdminPage() {
   }
 
   useEffect(() => {
-    ladeAlles().catch(() => setFehler("Stammdaten konnten nicht geladen werden."));
+    ladeAlles()
+      .catch(() => setFehler("Stammdaten konnten nicht geladen werden."))
+      .finally(() => setLaedt(false));
   }, []);
 
   async function standortAnlegen() {
     setFehler(null);
+    setStandortWirdAngelegt(true);
     try {
       await apiRequest("/standorte", { method: "POST", body: { name: standortName } });
       setStandortName("");
       await ladeAlles();
     } catch {
       setFehler("Standort konnte nicht angelegt werden.");
+    } finally {
+      setStandortWirdAngelegt(false);
     }
   }
 
@@ -54,6 +63,7 @@ export function AdminPage() {
       return;
     }
     setFehler(null);
+    setObjektWirdAngelegt(true);
     const vorlage = vorlagen.find((v) => v.id === vorlageId);
     try {
       await apiRequest("/objekte", {
@@ -71,65 +81,123 @@ export function AdminPage() {
       await ladeAlles();
     } catch {
       setFehler("Objekt konnte nicht angelegt werden (Code evtl. schon vergeben).");
+    } finally {
+      setObjektWirdAngelegt(false);
     }
   }
 
+  if (laedt) {
+    return (
+      <main className="page">
+        <p className="text-muted">Lade…</p>
+      </main>
+    );
+  }
+
   return (
-    <div style={{ padding: 16, maxWidth: 640, margin: "0 auto" }}>
+    <main className="page">
       <h1>Administration</h1>
-      {fehler && <p style={{ color: "red" }}>{fehler}</p>}
+      {fehler && <div className="alert alert-danger">{fehler}</div>}
 
-      <section style={{ marginBottom: 32 }}>
+      <section className="section">
         <h2>Standort anlegen</h2>
-        <input
+        <div className="card">
-          value={standortName}
+          <div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
-          onChange={(e) => setStandortName(e.target.value)}
+            <input
-          placeholder="Name"
+              className="input"
-        />
+              value={standortName}
-        <button onClick={standortAnlegen} disabled={!standortName}>
+              onChange={(e) => setStandortName(e.target.value)}
-          Anlegen
+              placeholder="Name des Standorts"
-        </button>
+            />
-        <ul>
+            <button
-          {standorte.map((s) => (
+              className="btn btn-primary"
-            <li key={s.id}>{s.name}</li>
+              onClick={standortAnlegen}
-          ))}
+              disabled={!standortName || standortWirdAngelegt}
-        </ul>
+            >
-      </section>
+              Anlegen
-
+            </button>
-      <section>
+          </div>
-        <h2>Objekt aus Vorlage anlegen</h2>
+          {standorte.length > 0 && (
-        <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 320 }}>
+            <ul className="card-list">
-          <select value={vorlageId} onChange={(e) => setVorlageId(Number(e.target.value) || "")}>
+              {standorte.map((s) => (
-            <option value="">Vorlage wählen…</option>
+                <li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
-            {vorlagen.map((v) => (
+                  <span>{s.name}</span>
-              <option key={v.id} value={v.id}>
+                </li>
-                {v.name} (v{v.version})
+              ))}
-              </option>
+            </ul>
-            ))}
+          )}
-          </select>
-          <select value={standortId} onChange={(e) => setStandortId(Number(e.target.value) || "")}>
-            <option value="">Standort wählen…</option>
-            {standorte.map((s) => (
-              <option key={s.id} value={s.id}>
-                {s.name}
-              </option>
-            ))}
-          </select>
-          <input value={objektCode} onChange={(e) => setObjektCode(e.target.value)} placeholder="Code (eindeutig)" />
-          <input value={objektName} onChange={(e) => setObjektName(e.target.value)} placeholder="Name" />
-          <button onClick={objektAnlegen} disabled={!objektCode || !objektName}>
-            Anlegen
-          </button>
         </div>
-
-        <ul>
-          {objekte.map((o) => (
-            <li key={o.id}>
-              {o.name} ({o.code})
-            </li>
-          ))}
-        </ul>
       </section>
-    </div>
+
+      <section className="section">
+        <h2>Objekt aus Vorlage anlegen</h2>
+        <div className="card">
+          {vorlagen.length === 0 ? (
+            <p className="text-muted">
+              Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
+            </p>
+          ) : (
+            <div className="stack">
+              <div className="field">
+                <label>Vorlage</label>
+                <select
+                  className="input"
+                  value={vorlageId}
+                  onChange={(e) => setVorlageId(Number(e.target.value) || "")}
+                >
+                  <option value="">Vorlage wählen…</option>
+                  {vorlagen.map((v) => (
+                    <option key={v.id} value={v.id}>
+                      {v.name} (v{v.version})
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="field">
+                <label>Standort</label>
+                <select
+                  className="input"
+                  value={standortId}
+                  onChange={(e) => setStandortId(Number(e.target.value) || "")}
+                >
+                  <option value="">Standort wählen…</option>
+                  {standorte.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="field">
+                <label>Code (eindeutig)</label>
+                <input className="input" value={objektCode} onChange={(e) => setObjektCode(e.target.value)} />
+              </div>
+              <div className="field">
+                <label>Name</label>
+                <input className="input" value={objektName} onChange={(e) => setObjektName(e.target.value)} />
+              </div>
+              <button
+                className="btn btn-primary"
+                onClick={objektAnlegen}
+                disabled={!objektCode || !objektName || objektWirdAngelegt}
+              >
+                Anlegen
+              </button>
+            </div>
+          )}
+
+          {objekte.length > 0 && (
+            <ul className="card-list" style={{ marginTop: "1.25rem" }}>
+              {objekte.map((o) => (
+                <li key={o.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                  <span>{o.name}</span>
+                  <span className="text-muted">{o.code}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+    </main>
   );
 }

frontend/src/pages/KontrollPage.tsx

@@ -170,71 +170,74 @@ export function KontrollPage() {
 
   if (sperre) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+      <main className="page">
         <h1>Objekt gesperrt</h1>
-        <p>
+        <div className="card">
-          Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
+          <p>
-        </p>
+            Wird gerade kontrolliert von <strong>{sperre.benutzer ?? "unbekannt"}</strong>, seit {sperre.seit}.
-        <button onClick={() => starteKontrolle(true)} style={{ padding: "0.75rem 1.5rem" }}>
+          </p>
-          Trotzdem übernehmen
+          <button className="btn btn-primary" onClick={() => starteKontrolle(true)}>
-        </button>
+            Trotzdem übernehmen
+          </button>
+        </div>
       </main>
     );
   }
 
   if (startFehler) {
     return (
-      <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+      <main className="page">
-        <p style={{ color: "crimson" }}>{startFehler}</p>
+        <div className="alert alert-danger">{startFehler}</div>
-        <button onClick={() => starteKontrolle(false)}>Erneut versuchen</button>
+        <button className="btn btn-secondary" onClick={() => starteKontrolle(false)}>
+          Erneut versuchen
+        </button>
       </main>
     );
   }
 
   return (
-    <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+    <main className="page">
       <h1>{objekt?.name ?? "Kontrolle"}</h1>
       {!online && (
-        <p style={{ background: "#fff3cd", padding: "0.5rem", borderRadius: 4 }}>
+        <div className="alert alert-warning">
-          Kein Netz - Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
+          Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
-        </p>
+        </div>
       )}
-      <ul style={{ listStyle: "none", padding: 0 }}>
+      <ul className="card-list" style={{ marginBottom: "1.25rem" }}>
         {positionen.map((zustand) => (
-          <li
+          <li key={zustand.position.id} className="card">
-            key={zustand.position.id}
+            <div className="card-title-row">
-            style={{
-              border: "1px solid #ccc",
-              borderRadius: 8,
-              padding: "0.75rem",
-              marginBottom: "0.5rem",
-            }}
-          >
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
               <strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
               <StatusBadge status={zustand.status} />
             </div>
-            <div style={{ fontSize: "0.85rem", color: "#666" }}>
+            <div className="card-subtitle">
               Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
             </div>
-            <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.5rem" }}>
+            <div className="row" style={{ marginTop: "0.6rem" }}>
               <input
                 type="number"
+                className="input"
                 value={zustand.eingabe}
                 onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
-                style={{ width: "5rem", fontSize: "1.1rem", padding: "0.5rem" }}
+                style={{ width: "6rem" }}
               />
               <button
+                className="btn btn-primary"
+                style={{ flex: 1 }}
                 onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
-                style={{ flex: 1, fontSize: "1.1rem" }}
               >
                 Bestätigen
               </button>
             </div>
             {zustand.status === "fehler" && (
-              <div style={{ marginTop: "0.5rem" }}>
+              <div style={{ marginTop: "0.6rem" }}>
-                <p style={{ color: "crimson", margin: 0 }}>{zustand.fehlerText}</p>
+                <p className="text-muted" style={{ color: "var(--color-danger)" }}>
-                <button onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}>
+                  {zustand.fehlerText}
+                </p>
+                <button
+                  className="btn btn-secondary"
+                  onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}
+                >
                   Erneut versuchen
                 </button>
               </div>
@@ -243,29 +246,31 @@ export function KontrollPage() {
         ))}
       </ul>
 
-      {abschlussFehler && <p style={{ color: "crimson" }}>{abschlussFehler}</p>}
+      {abschlussFehler && <div className="alert alert-danger">{abschlussFehler}</div>}
-      <button
+      <div className="stack">
-        onClick={abschliessen}
+        <button
-        disabled={!alleUebertragen || wirdAbgeschlossen}
+          className="btn btn-primary btn-block"
-        style={{ width: "100%", padding: "1rem", fontSize: "1.2rem" }}
+          onClick={abschliessen}
-      >
+          disabled={!alleUebertragen || wirdAbgeschlossen}
-        {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
+        >
-      </button>
+          {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
-      <button onClick={abbrechen} style={{ width: "100%", padding: "0.75rem", marginTop: "0.5rem" }}>
+        </button>
-        Kontrolle abbrechen
+        <button className="btn btn-danger btn-block" onClick={abbrechen}>
-      </button>
+          Kontrolle abbrechen
+        </button>
+      </div>
     </main>
   );
 }
 
 function StatusBadge({ status }: { status: PositionStatus }) {
-  const konfiguration: Record<PositionStatus, { text: string; farbe: string }> = {
+  const konfiguration: Record<PositionStatus, { text: string; klasse: string }> = {
-    unbestaetigt: { text: "offen", farbe: "#999" },
+    unbestaetigt: { text: "offen", klasse: "badge-neutral" },
-    wartet: { text: "nicht gespeichert", farbe: "#e0a800" },
+    wartet: { text: "nicht gespeichert", klasse: "badge-warning" },
-    wird_uebertragen: { text: "wird übertragen…", farbe: "#e0a800" },
+    wird_uebertragen: { text: "wird übertragen…", klasse: "badge-warning" },
-    gespeichert: { text: "gespeichert", farbe: "#2e7d32" },
+    gespeichert: { text: "gespeichert", klasse: "badge-success" },
-    fehler: { text: "Fehler", farbe: "#c62828" },
+    fehler: { text: "Fehler", klasse: "badge-danger" },
   };
-  const { text, farbe } = konfiguration[status];
+  const { text, klasse } = konfiguration[status];
-  return <span style={{ color: farbe, fontWeight: "bold" }}>{text}</span>;
+  return <span className={`badge ${klasse}`}>{text}</span>;
 }

frontend/src/pages/LoginPage.tsx

@@ -26,37 +26,41 @@ export function LoginPage() {
   }
 
   return (
-    <main style={{ maxWidth: 320, margin: "4rem auto", padding: "0 1rem" }}>
+    <main className="page page-narrow" style={{ marginTop: "4rem" }}>
-      <h1>MABEA</h1>
+      <div className="card">
-      <form onSubmit={handleSubmit}>
+        <h1 style={{ color: "var(--color-primary)" }}>MABEA</h1>
-        <label>
+        <p className="text-muted" style={{ marginBottom: "1.5rem" }}>
-          Login
+          Digitales Materialmanagement
-          <input
+        </p>
-            style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
+        <form onSubmit={handleSubmit}>
-            value={username}
+          <div className="field">
-            onChange={(e) => setUsername(e.target.value)}
+            <label htmlFor="login">Login</label>
-            autoComplete="username"
+            <input
-          />
+              id="login"
-        </label>
+              className="input"
-        <label style={{ display: "block", marginTop: "1rem" }}>
+              value={username}
-          Passwort
+              onChange={(e) => setUsername(e.target.value)}
-          <input
+              autoComplete="username"
-            style={{ display: "block", width: "100%", fontSize: "1.2rem", padding: "0.5rem" }}
+              autoFocus
-            type="password"
+            />
-            value={password}
+          </div>
-            onChange={(e) => setPassword(e.target.value)}
+          <div className="field">
-            autoComplete="current-password"
+            <label htmlFor="password">Passwort</label>
-          />
+            <input
-        </label>
+              id="password"
-        {fehler && <p style={{ color: "crimson" }}>{fehler}</p>}
+              className="input"
-        <button
+              type="password"
-          type="submit"
+              value={password}
-          disabled={wirdGeladen}
+              onChange={(e) => setPassword(e.target.value)}
-          style={{ marginTop: "1rem", width: "100%", fontSize: "1.2rem", padding: "0.75rem" }}
+              autoComplete="current-password"
-        >
+            />
-          {wirdGeladen ? "Wird geprüft…" : "Anmelden"}
+          </div>
-        </button>
+          {fehler && <div className="alert alert-danger">{fehler}</div>}
-      </form>
+          <button type="submit" className="btn btn-primary btn-block" disabled={wirdGeladen}>
+            {wirdGeladen ? "Wird geprüft…" : "Anmelden"}
+          </button>
+        </form>
+      </div>
     </main>
   );
 }

frontend/src/pages/ObjektListPage.tsx

@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 
 import { apiRequest } from "../api/client";
 import type { Objekt } from "../api/types";
-import { useAuth } from "../auth/AuthContext";
 
 // Prompt 11 Screen 1: Standort/Objekt wählen. QR-/Barcode-Scan (Karte 10) ist
 // Roadmap - dieser Screen bietet bewusst schon die Code-Suche als Textfeld an,
@@ -12,12 +11,13 @@ export function ObjektListPage() {
   const [objekte, setObjekte] = useState<Objekt[]>([]);
   const [suche, setSuche] = useState("");
   const [ladefehler, setLadefehler] = useState<string | null>(null);
-  const { istAdmin } = useAuth();
+  const [laedt, setLaedt] = useState(true);
 
   useEffect(() => {
     apiRequest<Objekt[]>("/objekte")
       .then(setObjekte)
-      .catch(() => setLadefehler("Objektliste konnte nicht geladen werden."));
+      .catch(() => setLadefehler("Objektliste konnte nicht geladen werden."))
+      .finally(() => setLaedt(false));
   }, []);
 
   const gefiltert = objekte.filter(
@@ -27,36 +27,31 @@ export function ObjektListPage() {
   );
 
   return (
-    <main style={{ maxWidth: 480, margin: "0 auto", padding: "1rem" }}>
+    <main className="page">
       <h1>Objekte</h1>
-      {istAdmin && (
-        <Link to="/admin" style={{ display: "inline-block", marginBottom: "1rem" }}>
-          Administration →
-        </Link>
-      )}
       <input
+        className="input input-search"
         placeholder="Suche oder Code scannen…"
         value={suche}
         onChange={(e) => setSuche(e.target.value)}
-        style={{ width: "100%", fontSize: "1.2rem", padding: "0.75rem", marginBottom: "1rem" }}
+        style={{ marginBottom: "1.25rem" }}
       />
-      {ladefehler && <p style={{ color: "crimson" }}>{ladefehler}</p>}
+      {ladefehler && <div className="alert alert-danger">{ladefehler}</div>}
-      <ul style={{ listStyle: "none", padding: 0 }}>
+      {laedt && <p className="text-muted">Lade…</p>}
+      {!laedt && !ladefehler && gefiltert.length === 0 && (
+        <p className="text-muted">
+          {objekte.length === 0 ? "Noch keine Objekte angelegt." : "Keine Treffer."}
+        </p>
+      )}
+      <ul className="card-list">
         {gefiltert.map((objekt) => (
-          <li key={objekt.id} style={{ marginBottom: "0.5rem" }}>
+          <li key={objekt.id}>
-            <Link
+            <Link to={`/objekte/${objekt.id}/kontrolle`} className="card card-link">
-              to={`/objekte/${objekt.id}/kontrolle`}
+              <div className="card-title-row">
-              style={{
+                <strong>{objekt.name}</strong>
-                display: "block",
+                <span className="badge badge-neutral">{objekt.status}</span>
-                padding: "1rem",
+              </div>
-                border: "1px solid #ccc",
+              <div className="card-subtitle">{objekt.code}</div>
-                borderRadius: 8,
-                textDecoration: "none",
-                color: "inherit",
-              }}
-            >
-              <strong>{objekt.name}</strong>
-              <div style={{ fontSize: "0.9rem", color: "#666" }}>{objekt.code}</div>
             </Link>
           </li>
         ))}

frontend/src/styles/global.css

@@ -0,0 +1,323 @@
+:root {
+  --color-bg: #f4f6f8;
+  --color-surface: #ffffff;
+  --color-border: #e2e5e9;
+  --color-text: #1a1f24;
+  --color-text-muted: #66707a;
+  --color-primary: #0b5394;
+  --color-primary-hover: #084174;
+  --color-danger: #c62828;
+  --color-danger-bg: #fdecea;
+  --color-warning: #b8860b;
+  --color-warning-bg: #fff8e1;
+  --color-success: #2e7d32;
+  --color-success-bg: #e8f5e9;
+  --color-muted-bg: #eef0f2;
+  --radius: 10px;
+  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3 {
+  margin: 0 0 0.75rem;
+  line-height: 1.2;
+}
+
+p {
+  margin: 0 0 0.75rem;
+}
+
+/* -- Layout ------------------------------------------------------------- */
+
+.app-shell {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  background: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.topbar-brand {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.topbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.topbar-nav a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  padding: 0.4rem 0.7rem;
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+}
+
+.topbar-nav a:hover,
+.topbar-nav a.active {
+  background: var(--color-muted-bg);
+  color: var(--color-text);
+}
+
+.page {
+  flex: 1;
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.25rem;
+}
+
+.page-narrow {
+  max-width: 380px;
+}
+
+/* -- Cards ---------------------------------------------------------------- */
+
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.card-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.card-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+
+.card-link:hover {
+  border-color: var(--color-primary);
+}
+
+.card-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-subtitle {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  margin-top: 0.15rem;
+}
+
+/* -- Forms ------------------------------------------------------------ */
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  margin-bottom: 1rem;
+}
+
+.field label {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-weight: 600;
+}
+
+.input,
+select.input,
+textarea.input {
+  width: 100%;
+  font-size: 1rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: inherit;
+}
+
+.input:focus,
+select.input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(11, 83, 148, 0.15);
+}
+
+.input-search {
+  font-size: 1.05rem;
+  padding: 0.85rem 1rem;
+}
+
+/* -- Buttons ------------------------------------------------------------ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.65rem 1.1rem;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  font-family: inherit;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-muted-bg);
+}
+
+.btn-danger {
+  background: var(--color-surface);
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: var(--color-danger-bg);
+}
+
+.btn-block {
+  width: 100%;
+}
+
+/* -- Badges / Alerts ------------------------------------------------------ */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.badge-neutral {
+  background: var(--color-muted-bg);
+  color: var(--color-text-muted);
+}
+
+.badge-warning {
+  background: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.badge-success {
+  background: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.badge-danger {
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+}
+
+.alert {
+  border-radius: var(--radius);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-size: 0.95rem;
+}
+
+.alert-warning {
+  background: var(--color-warning-bg);
+  color: #6b5200;
+}
+
+.alert-danger {
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.row {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.row-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.section {
+  margin-bottom: 2rem;
+}