diff --git a/src/app/admin/companies/[id]/page.tsx b/src/app/admin/companies/[id]/page.tsx
index 58502c5..5843c45 100644
--- a/src/app/admin/companies/[id]/page.tsx
+++ b/src/app/admin/companies/[id]/page.tsx
@@ -36,7 +36,7 @@ export default async function AdminCompanyDetailPage({ params }: { params: Promi
           { label: "Updated", value: formatDate(data.company.company_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Stores" rows={data.stores} />
         <CompactList title="Notes" rows={data.notes} />
       </section>
diff --git a/src/app/admin/transfers/[id]/page.tsx b/src/app/admin/transfers/[id]/page.tsx
index b91d293..bdf071d 100644
--- a/src/app/admin/transfers/[id]/page.tsx
+++ b/src/app/admin/transfers/[id]/page.tsx
@@ -27,7 +27,7 @@ export default async function AdminTransferDetailPage({ params }: { params: Prom
       primary={{ title: "Candidate Payouts", rows: data.candidates }}
       secondary={{ title: "Invoices", rows: data.invoices }}
     >
-      <Suspense fallback={<div className="transferActions"><p>Loading actions…</p></div>}>
+      <Suspense fallback={<div className="flex flex-col gap-4 mb-6"><p>Loading actions…</p></div>}>
         <TransferActionBar data={data} />
       </Suspense>
 
@@ -44,7 +44,7 @@ export default async function AdminTransferDetailPage({ params }: { params: Prom
           { label: "Updated", value: formatDate(data.transfer.transfer_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Transfer File Entries" rows={data.fileEntries} />
       </section>
     </WorkspaceShell>
diff --git a/src/app/admin/transfers/page.tsx b/src/app/admin/transfers/page.tsx
index fb9eee3..deb2021 100644
--- a/src/app/admin/transfers/page.tsx
+++ b/src/app/admin/transfers/page.tsx
@@ -24,27 +24,27 @@ export default async function AdminTransfersPage() {
         { label: "Next action", value: "Review", note: "Open a run before exporting PDFs or reconciling pay" }
       ]}
     >
-      <section className="financeStart" aria-label="Finance workflow">
-        <div className="financePrimary">
-          <span>Finance path</span>
-          <h2>Start with a transfer run. Everything else should hang off that.</h2>
-          <p>
+      <section className="grid grid-cols-[minmax(0,0.9fr)_minmax(360px,1.1fr)] gap-3 max-[1040px]:grid-cols-1" aria-label="Finance workflow">
+        <div className="grid content-start gap-2.5 p-[18px] border border-[#dfe4ed] rounded-lg bg-white dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+          <span className="text-[var(--blue)] text-[11px] font-black uppercase">Finance path</span>
+          <h2 className="max-w-[620px] text-[26px] leading-[1.08] mb-0">Start with a transfer run. Everything else should hang off that.</h2>
+          <p className="max-w-[640px] text-[var(--muted)] leading-[1.5] mb-0">
             A run is the place to inspect candidate payouts, employer charges, period dates, status, invoice context,
             and PDF exports. The table below is only the index.
           </p>
-          {latest ? <Link href={`/admin/transfers/${latest.id}` as Route}>Open latest run #{latest.id}</Link> : null}
+          {latest ? <Link className="w-fit min-h-10 inline-flex items-center rounded-lg bg-[#111827] text-white px-[13px] font-black no-underline dark:bg-[#e7ecf5] dark:text-[#090d14]" href={`/admin/transfers/${latest.id}` as Route}>Open latest run #{latest.id}</Link> : null}
         </div>
-        <div className="financeSteps">
+        <div className="grid grid-cols-2 overflow-hidden border border-[#dfe4ed] rounded-lg bg-white dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
           {[
             ["1", "Review run", "Check company, period, total, and status."],
             ["2", "Check payouts", "Inspect candidate rows before payment."],
             ["3", "Issue invoice", "Generate employer invoice PDF from the same source."],
             ["4", "Reconcile", "Mark what is paid, exported, or needs correction."]
           ].map(([step, title, note]) => (
-            <article key={step}>
-              <span>{step}</span>
-              <strong>{title}</strong>
-              <small>{note}</small>
+            <article key={step} className="min-w-0 min-h-[118px] grid content-center gap-1.5 border-r border-b border-[#e2e6ee] p-3.5 [&:nth-child(2n)]:border-r-0 [&:nth-last-child(-n+2)]:border-b-0">
+              <span className="text-[var(--blue)] text-[11px] font-black uppercase">{step}</span>
+              <strong className="text-[#101828] text-[17px] dark:text-[var(--ink)]">{title}</strong>
+              <small className="text-[var(--muted)] leading-[1.4]">{note}</small>
             </article>
           ))}
         </div>
diff --git a/src/app/candidate/payments/[id]/page.tsx b/src/app/candidate/payments/[id]/page.tsx
index 1bfd4ba..af3e791 100644
--- a/src/app/candidate/payments/[id]/page.tsx
+++ b/src/app/candidate/payments/[id]/page.tsx
@@ -59,9 +59,9 @@ export default async function CandidatePaymentDetailPage({
       <FactPanel title="Payment Breakdown" facts={facts} />
       {transfer && <FactPanel title="Transfer Run" facts={transferFacts} />}
       {data.invoices.length > 0 && (
-        <section className="detailPanel">
-          <h2>Receipts & Invoices</h2>
-          <p className="detailPanelNote">
+        <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+          <h2 className="m-0 p-[18px] border-b border-[var(--line)]">Receipts & Invoices</h2>
+          <p className="text-[var(--muted)] p-[18px] pb-3.5 m-0">
             Paid invoices linked to this payment period serve as your receipt.
           </p>
           <CompactList title="Invoices" rows={data.invoices} />
diff --git a/src/app/company/companies/[id]/page.tsx b/src/app/company/companies/[id]/page.tsx
index 3ac7f77..878783d 100644
--- a/src/app/company/companies/[id]/page.tsx
+++ b/src/app/company/companies/[id]/page.tsx
@@ -36,7 +36,7 @@ export default async function CompanyAccountDetailPage({ params }: { params: Pro
           { label: "Updated", value: formatDate(data.company.company_updated_at) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Stores" rows={data.stores} />
         <CompactList title="Notes" rows={data.notes} />
       </section>
diff --git a/src/app/company/requests/[id]/page.tsx b/src/app/company/requests/[id]/page.tsx
index 626ada7..e384894 100644
--- a/src/app/company/requests/[id]/page.tsx
+++ b/src/app/company/requests/[id]/page.tsx
@@ -37,7 +37,7 @@ export default async function CompanyRequestDetailPage({ params }: { params: Pro
           { label: "Updated", value: formatDate(data.request.request_updated_datetime) }
         ]}
       />
-      <section className="detailGrid">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <CompactList title="Interviews" rows={data.interviews} />
         <CompactList title="Stories" rows={data.stories} />
       </section>
diff --git a/src/app/hub/page.tsx b/src/app/hub/page.tsx
index 98b6fa1..c3507f6 100644
--- a/src/app/hub/page.tsx
+++ b/src/app/hub/page.tsx
@@ -24,130 +24,145 @@ export default async function HubPage({
   const guide = buildRoleGuide(session.role, data);
 
   return (
-    <main className="commandOS">
-      <aside className="commandRail">
-        <Link className="commandBrand" href="/app" aria-label="StudentHub command home">
-          <span>SH</span>
+    <main className="grid grid-cols-[224px_minmax(0,1fr)] min-h-svh bg-[radial-gradient(circle_at_top_left,color-mix(in_srgb,var(--blue)_10%,transparent),transparent_32rem),var(--paper)] text-[var(--ink)]">
+      <aside className="sticky top-0 h-svh grid grid-rows-[auto_minmax(0,1fr)_auto] justify-items-stretch gap-2.5 border-r border-[var(--line)] bg-[color-mix(in_srgb,var(--surface)_94%,transparent)] py-3 px-2.5">
+        <Link className="w-full min-h-11 flex items-center gap-2.5 border border-[var(--line)] rounded-lg bg-[var(--ink)] text-[var(--surface)] px-3 font-black no-underline dark:bg-[#e7ecf5] dark:text-[#090d14]" href="/app" aria-label="StudentHub command home">
+          <span className="w-[30px] h-[30px] inline-flex items-center justify-center rounded-md bg-[rgba(255,255,255,0.14)]">SH</span>
           <strong>StudentHub</strong>
         </Link>
 
-        <nav className="commandRailNav" aria-label="Workspace navigation">
+        <nav className="w-full grid content-start gap-[5px]" aria-label="Workspace navigation">
           {data.navigation.map((item) => (
             <Link
-              className={item.href === hubContext || item.href === "/app" ? "active" : ""}
+              className={`w-full min-h-[46px] grid content-center gap-[3px] border rounded-lg px-3 no-underline ${
+                item.href === hubContext || item.href === "/app"
+                  ? "border-[var(--line)] bg-[var(--surface-soft)] text-[var(--blue)]"
+                  : "border-transparent text-[var(--muted)] hover:border-[var(--line)] hover:bg-[var(--surface-soft)] hover:text-[var(--blue)]"
+              }`}
               href={item.href}
               key={item.href}
               title={`${item.label}: ${item.description}`}
             >
-              <strong>{item.label}</strong>
-              <small>{item.description}</small>
+              <strong className="text-inherit text-sm">{item.label}</strong>
+              <small className="overflow-hidden text-[var(--muted)] text-xs text-ellipsis whitespace-nowrap">{item.description}</small>
             </Link>
           ))}
         </nav>
 
-        <div className="commandRailFooter">
+        <div className="grid gap-2">
           <ThemeToggle />
-          <form className="commandRailSignout" action={logoutAction}>
-            <button type="submit">Sign out</button>
+          <form action={logoutAction}>
+            <button
+              type="submit"
+              className="w-full min-h-10 border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] text-[var(--ink)] text-[13px] font-black cursor-pointer hover:border-[var(--blue)] hover:text-[var(--blue)]"
+            >
+              Sign out
+            </button>
           </form>
         </div>
       </aside>
 
-      <section className="commandDesk">
-        <header className="commandTopbar">
-          <div className="commandIdentity">
-            <span>{session.role}</span>
-            <strong>{session.name}</strong>
-            <small>{session.email}</small>
+      <section className="min-w-0 grid grid-rows-[auto_minmax(0,1fr)] min-h-svh">
+        <header className="sticky top-0 z-20 min-h-16 grid grid-cols-[220px_minmax(280px,1fr)_auto] items-center gap-2.5 border-b border-[var(--line)] bg-[color-mix(in_srgb,var(--surface)_90%,transparent)] backdrop-blur-md px-3.5 py-2.5">
+          <div className="min-w-0 grid gap-0.5">
+            <span className="text-[#667085] text-[11px] font-black uppercase">{session.role}</span>
+            <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{session.name}</strong>
+            <small className="overflow-hidden text-[#667085] text-ellipsis whitespace-nowrap">{session.email}</small>
           </div>
-          <form className="commandSearch">
+          <form className="grid grid-cols-[minmax(0,1fr)_auto] overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] focus-within:border-[#8bb4ea] focus-within:shadow-[0_0_0_3px_rgba(11,99,206,0.12)]">
             <input
               aria-label="Find records"
               data-command-search
               defaultValue={data.query}
               id="hub-search"
               name="q"
+              className="min-w-0 h-[42px] border-0 bg-transparent text-[var(--ink)] px-[13px] font-inherit focus:outline-none"
               placeholder="Search candidates, companies, requests, transfers, ID batches"
             />
             <input type="hidden" name="scope" value={data.scope} />
-            <button type="submit">Search</button>
+            <button
+              type="submit"
+              className="border-0 border-l border-[var(--line)] bg-[var(--surface-soft)] text-[var(--ink)] px-3.5 font-black cursor-pointer"
+            >
+              Search
+            </button>
           </form>
           <HubShortcuts commands={commands} />
         </header>
 
-        <section className="journeyHome">
+        <section className="w-[min(100%,1500px)] min-w-0 min-h-0 overflow-y-auto grid content-start gap-3 mx-auto p-3.5">
           {requiredRole && requiredRole !== session.role ? (
-            <section className="roleBoundaryNotice" aria-label="Role access notice">
-              <div>
-                <span>Access boundary</span>
-                <strong>You are signed in as {session.role}, not {requiredRole}.</strong>
-                <p>Use the matching production credentials to enter that workspace. This keeps candidate, staff, company, and admin data separated.</p>
+            <section className="flex items-center justify-between gap-3.5 border border-[#f3c2d3] rounded-lg bg-[#fff8fb] p-3.5 px-4" aria-label="Role access notice">
+              <div className="grid gap-1">
+                <span className="text-[var(--rose)] text-[11px] font-black uppercase">Access boundary</span>
+                <strong className="text-[#101828]">You are signed in as {session.role}, not {requiredRole}.</strong>
+                <p className="text-[var(--muted)] m-0">Use the matching production credentials to enter that workspace. This keeps candidate, staff, company, and admin data separated.</p>
               </div>
-              <Link href="/login">Switch account</Link>
+              <Link className="min-h-[38px] inline-flex items-center border border-[#e8a6bd] rounded-lg bg-white text-[var(--rose)] px-3 font-black no-underline whitespace-nowrap" href="/login">Switch account</Link>
             </section>
           ) : null}
 
-          <section className="journeyHero">
+          <section className="grid grid-cols-[minmax(0,1fr)_minmax(250px,340px)] gap-3.5 border border-[var(--line)] rounded-lg bg-[linear-gradient(135deg,color-mix(in_srgb,var(--surface)_96%,var(--blue)),var(--surface))] p-4 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
             <div>
-              <span className="journeyEyebrow">Start here</span>
-              <h1>{guide.title}</h1>
-              <p>{guide.description}</p>
-              <div className="journeyHeroActions">
-                <Link className="primary" href={guide.primary.href}>
+              <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">Start here</span>
+              <h1 className="max-w-[860px] text-[var(--ink)] text-3xl leading-[1.06] my-1.5 mx-0">{guide.title}</h1>
+              <p className="max-w-[780px] text-[var(--muted)] text-[15px] leading-relaxed m-0">{guide.description}</p>
+              <div className="flex flex-wrap gap-2.5 mt-[18px]">
+                <Link className="min-h-10 inline-flex items-center rounded-lg bg-[#111827] text-white px-[13px] font-black no-underline" href={guide.primary.href}>
                   {guide.primary.label}
                 </Link>
-                <Link href={hubContext}>Open focused search</Link>
+                <Link className="min-h-10 inline-flex items-center border border-[var(--line)] bg-[var(--surface)] text-[var(--ink)] px-4 font-bold text-sm no-underline rounded-lg whitespace-nowrap" href={hubContext}>Open focused search</Link>
               </div>
             </div>
-            <aside className="journeyGuardrail">
-              <span>Signed in as {session.role}</span>
+            <aside className="border border-[var(--line)] rounded-lg bg-[var(--surface)] p-3.5 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+              <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">Signed in as {session.role}</span>
               <strong>{session.name}</strong>
-              <p>{guide.guardrail}</p>
+              <p className="text-[var(--muted)] m-0">{guide.guardrail}</p>
             </aside>
           </section>
 
-          <section className="journeyGrid" aria-label={`${session.role} workflows`}>
+          <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1" aria-label={`${session.role} workflows`}>
             {guide.journeys.map((journey) => (
-              <article className="journeyCard" key={journey.title}>
-                <div className="journeyCardHeader">
-                  <span>{journey.kicker}</span>
+              <article className="grid gap-2.5 border border-[var(--line)] rounded-lg bg-[var(--surface)] p-4 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" key={journey.title}>
+                <div className="grid gap-1.5">
+                  <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">{journey.kicker}</span>
                   <strong>{journey.title}</strong>
-                  <p>{journey.description}</p>
+                  <p className="text-[var(--muted)] m-0">{journey.description}</p>
                 </div>
-                <ol className="journeySteps">
+                <ol className="grid gap-2.5 list-none p-0 m-0">
                   {journey.steps.map((step, index) => (
-                    <li key={step}>
-                      <span>{index + 1}</span>
+                    <li className="grid grid-cols-[24px_minmax(0,1fr)] gap-2" key={step}>
+                      <span className="w-6 h-6 inline-flex items-center justify-center rounded-full bg-[var(--blue)] text-white text-xs font-bold">{index + 1}</span>
                       <strong>{step}</strong>
                     </li>
                   ))}
                 </ol>
-                <Link href={journey.href}>{journey.action}</Link>
+                <Link className="min-h-9 inline-flex items-center border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] text-[var(--blue)] text-[13px] font-extrabold px-3 no-underline whitespace-nowrap w-fit hover:border-[var(--blue)] hover:bg-[#eef5ff]" href={journey.href}>{journey.action}</Link>
               </article>
             ))}
           </section>
 
-          <section className="journeyWorkbench" aria-label="Search and live queues">
-            <div className="journeyPanel">
-              <div className="journeyPanelHeader">
-                <span>Live queues</span>
+          <section className="grid gap-3" aria-label="Search and live queues">
+            <div className="border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+              <div className="grid gap-1.5 p-4 border-b border-[var(--line)]">
+                <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">Live queues</span>
                 <strong>What needs attention</strong>
               </div>
-              <div className="journeyQueueGrid">
+              <div className="grid grid-cols-2">
                 {data.queues.map((queue) => {
                   const content = (
                     <>
-                      <span>{queue.label}</span>
-                      <strong>{queue.value.toLocaleString("en-US")}</strong>
-                      <small>{queue.note}</small>
+                      <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">{queue.label}</span>
+                      <strong className="text-[22px] leading-none">{queue.value.toLocaleString("en-US")}</strong>
+                      <small className="text-[#667085] leading-[1.35]">{queue.note}</small>
                     </>
                   );
                   return queue.href ? (
-                    <Link className="journeyQueue" href={queue.href as Route} key={queue.label}>
+                    <Link className="grid gap-1 rounded-lg text-[#344054] p-2 px-2 no-underline hover:bg-[#f6f8fb]" href={queue.href as Route} key={queue.label}>
                       {content}
                     </Link>
                   ) : (
-                    <article className="journeyQueue" key={queue.label}>
+                    <article className="grid gap-1 rounded-lg text-[#344054] p-2 px-2" key={queue.label}>
                       {content}
                     </article>
                   );
@@ -155,17 +170,21 @@ export default async function HubPage({
               </div>
             </div>
 
-            <div className="journeyPanel">
-              <div className="journeyPanelHeader">
-                <span>{data.scope}</span>
+            <div className="border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+              <div className="grid gap-1.5 p-4 border-b border-[var(--line)]">
+                <span className="text-[#667085] text-[11px] font-black uppercase tracking-normal">{data.scope}</span>
                 <strong>{data.query ? `Search results for ${data.query}` : "Find a record"}</strong>
               </div>
-              <nav className="journeyScopePills" aria-label="Search scopes">
+              <nav className="flex flex-wrap gap-2 p-3" aria-label="Search scopes">
                 {data.scopes.map((item) => {
                   const query = data.query ? `&q=${encodeURIComponent(data.query)}` : "";
                   return (
                     <Link
-                      className={item.value === data.scope ? "active" : ""}
+                      className={`min-h-8 inline-flex items-center rounded-full px-2.5 text-xs font-extrabold no-underline ${
+                        item.value === data.scope
+                          ? "bg-[var(--blue)] text-white"
+                          : "bg-[#eef2f7] text-[#344054] hover:bg-[#dde5f3]"
+                      }`}
                       href={`/app?scope=${item.value}${query}` as Route}
                       key={item.value}
                     >
@@ -174,15 +193,15 @@ export default async function HubPage({
                   );
                 })}
               </nav>
-              <div className="journeyResults">
+              <div className="grid gap-1 p-3">
                 {data.results.slice(0, 6).map((result) => (
-                  <Link href={hubRecordHref(data.query, data.scope, result.id)} key={result.id}>
-                    <span>{result.type}</span>
-                    <strong>{result.title}</strong>
-                    <small>{result.meta}</small>
+                  <Link className="grid grid-cols-[92px_minmax(0,1fr)_minmax(160px,230px)] items-center gap-3 border border-transparent rounded-lg text-[#111827] px-2.5 py-2 no-underline hover:border-[#d7e4f7] hover:bg-white hover:shadow-[0_8px_24px_rgba(16,24,40,0.06)]" href={hubRecordHref(data.query, data.scope, result.id)} key={result.id}>
+                    <span className="text-[#667085] text-xs">{result.type}</span>
+                    <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{result.title}</strong>
+                    <small className="min-w-0 text-[#667085] text-xs overflow-hidden text-ellipsis whitespace-nowrap not-italic">{result.meta}</small>
                   </Link>
                 ))}
-                {data.results.length === 0 ? <p>No matching records for this login and scope.</p> : null}
+                {data.results.length === 0 ? <p className="text-[var(--muted)]">No matching records for this login and scope.</p> : null}
               </div>
             </div>
 
@@ -196,67 +215,67 @@ export default async function HubPage({
 
 function RecordPreview({ preview }: { preview: NonNullable<HubData["preview"]> }) {
   return (
-    <section className="journeyPanel previewPanel" aria-label="Selected record preview">
-      <div className="previewHeader">
-        <span>{preview.type}</span>
-        <h2>{preview.title}</h2>
-        <p>{preview.subtitle}</p>
-        <small>{preview.meta}</small>
+    <section className="border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" aria-label="Selected record preview">
+      <div className="grid gap-1.5 p-4 border-b border-[var(--line)]">
+        <span className="text-[#667085] text-[11px] font-black uppercase">{preview.type}</span>
+        <h2 className="break-words text-[22px] m-0">{preview.title}</h2>
+        <p className="text-[#667085] m-0 break-words">{preview.subtitle}</p>
+        <small className="text-[#667085] m-0 break-words">{preview.meta}</small>
       </div>
 
       {preview.flags.length ? (
-        <div className="previewFlags">
+        <div className="flex flex-wrap gap-2 p-3 px-4 border-b border-[var(--line)]">
           {preview.flags.map((flag) => (
-            <span key={flag}>{flag}</span>
+            <span className="min-h-[26px] inline-flex items-center rounded-full bg-[#eef2f7] text-[#344054] px-[9px] text-xs font-extrabold" key={flag}>{flag}</span>
           ))}
         </div>
       ) : null}
 
       {preview.actions.length ? (
-        <div className="previewActions">
+        <div className="flex flex-wrap gap-2 p-3 px-4 border-b border-[var(--line)]">
           {preview.actions.map((action) => (
-            <a href={action.href} key={`${action.label}-${action.href}`}>
+            <a className="min-h-9 inline-flex items-center border border-[#d9dee8] rounded-lg bg-[#fbfcfd] text-[#111827] px-2.5 text-[13px] font-black no-underline hover:border-[#8bb4ea] hover:text-[#0b63ce] hover:bg-[#eef5ff]" href={action.href} key={`${action.label}-${action.href}`}>
               {action.label}
             </a>
           ))}
         </div>
       ) : null}
 
-      <div className="previewFacts">
+      <div className="grid grid-cols-2 border-b border-[var(--line)]">
         {preview.facts.map((fact) => (
-          <div key={fact.label}>
-            <span>{fact.label}</span>
-            <strong>{fact.value}</strong>
+          <div className="min-w-0 min-h-[72px] grid content-center gap-[5px] border-r border-b border-[var(--line)] px-3 py-2.5 [&:nth-child(2n)]:border-r-0" key={fact.label}>
+            <span className="text-[#667085] text-[11px] font-black uppercase">{fact.label}</span>
+            <strong className="overflow-hidden text-ellipsis whitespace-nowrap text-sm">{fact.value}</strong>
           </div>
         ))}
       </div>
 
       {preview.related.length ? (
-        <div className="previewRelated">
+        <div className="grid">
           {preview.related.map((section) => (
-            <section key={section.title}>
-              <div className="previewRelatedHeader">
-                <span>Related</span>
-                <h3>{section.title}</h3>
+            <section className="border-b border-[var(--line)]" key={section.title}>
+              <div className="min-h-[42px] flex items-center justify-between gap-3 px-3">
+                <span className="text-[#667085] text-[11px] font-black uppercase">Related</span>
+                <h3 className="text-sm m-0">{section.title}</h3>
               </div>
               {section.rows.length ? (
                 section.rows.map((row) =>
                   row.href ? (
-                    <Link className="previewRow" href={row.href} key={row.id}>
-                      <strong>{row.title}</strong>
-                      <span>{row.subtitle}</span>
-                      <small>{row.meta}</small>
+                    <Link className="min-h-[58px] grid gap-1 text-[#111827] px-3 py-[9px] no-underline hover:bg-[#f6f8fb]" href={row.href} key={row.id}>
+                      <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[#667085] text-xs">{row.subtitle}</span>
+                      <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[#667085] text-xs">{row.meta}</small>
                     </Link>
                   ) : (
-                    <article className="previewRow" key={row.id}>
-                      <strong>{row.title}</strong>
-                      <span>{row.subtitle}</span>
-                      <small>{row.meta}</small>
+                    <article className="min-h-[58px] grid gap-1 text-[#111827] px-3 py-[9px]" key={row.id}>
+                      <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[#667085] text-xs">{row.subtitle}</span>
+                      <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[#667085] text-xs">{row.meta}</small>
                     </article>
                   )
                 )
               ) : (
-                <p className="previewEmpty">No related records visible to this login.</p>
+                <p className="grid gap-1.5 p-3.5 text-[#667085] text-xs">No related records visible to this login.</p>
               )}
             </section>
           ))}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 088508b..b4437ab 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -78,10 +78,10 @@ export default async function LoginPage({
         aria-label="StudentHub sign in"
       >
         {params.error === "expired" ? (
-          <p className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">That verified account choice expired. Sign in again to continue.</p>
+          <p role="alert" aria-live="assertive" className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">That verified account choice expired. Sign in again to continue.</p>
         ) : null}
         {params.error === "account" ? (
-          <p className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">Choose a verified account to continue.</p>
+          <p role="alert" aria-live="assertive" className="text-[var(--destructive)] font-bold m-0 p-4 pb-0">Choose a verified account to continue.</p>
         ) : null}
         <LoginForm />
       </section>
diff --git a/src/app/staff/interviews/[id]/page.tsx b/src/app/staff/interviews/[id]/page.tsx
index fde383e..fb15b6e 100644
--- a/src/app/staff/interviews/[id]/page.tsx
+++ b/src/app/staff/interviews/[id]/page.tsx
@@ -54,9 +54,9 @@ export default async function StaffInterviewDetailPage({
     >
       <FactPanel title="Interview Details" facts={facts} />
 
-      <section className="detailPanel">
-        <h2>Actions</h2>
-        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+      <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+        <h2 className="m-0 p-[18px] border-b border-[var(--line)]">Actions</h2>
+        <div className="flex gap-2 flex-wrap p-[18px]">
           {interview.status !== 1 && (
             <form action={updateInterviewStatusAction}>
               <input type="hidden" name="interview_uuid" value={interview.request_interview_uuid} />
@@ -81,8 +81,8 @@ export default async function StaffInterviewDetailPage({
         </div>
       </section>
 
-      <section className="detailPanel">
-        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+      <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+        <div className="flex gap-2 flex-wrap p-[18px]">
           {interview.candidate?.candidate_id && (
             <Link href={`/staff/candidates?candidate=${interview.candidate.candidate_id}` as Route}>
               <Button variant="outline">View Candidate</Button>
@@ -100,8 +100,8 @@ export default async function StaffInterviewDetailPage({
       </section>
 
       {notice && (
-        <section className="detailPanel">
-          <p className="notice">
+        <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+          <p className="m-0 p-[18px] text-[var(--muted)]">
             {notice === "interview-updated" && "Interview updated successfully."}
             {notice === "not-found" && "Interview not found."}
             {notice === "missing-fields" && "Missing required fields."}
diff --git a/src/app/styles.css b/src/app/styles.css
index 07a0add..154aeba 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -326,12 +326,6 @@ body {
 
 
 
-.lockedRole span {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
 
 
@@ -588,39 +582,9 @@ body {
   display: none;
 }
 
-.workTab {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 6px;
-  background: var(--surface-soft);
-  overflow: hidden;
-  flex-shrink: 0;
-}
 
-.workTab.active {
-  border-color: var(--blue);
-  background: #eef5ff;
-}
 
-.workTab button {
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  border: 0;
-  background: none;
-  color: var(--ink);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 0 10px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 
-.workTab.active button {
-  color: var(--blue);
-}
 
 .workTabClose {
   min-width: 24px;
@@ -721,14 +685,6 @@ h2 {
   margin-bottom: 10px;
 }
 
-.environment {
-  min-width: 220px;
-  display: grid;
-  gap: 6px;
-  padding: 14px 16px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-}
 
 .accountBox {
   min-width: 0;
@@ -766,66 +722,17 @@ h2 {
   margin-top: 6px;
 }
 
-.loginShell {
-  min-height: 100svh;
-  width: min(1240px, calc(100% - 32px));
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
-  align-items: center;
-  gap: 28px;
-  padding: 28px 0;
-}
 
 
 
 
-.brandMark {
-  width: 44px;
-  height: 44px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ink);
-  color: #fff;
-  font-weight: 900;
-}
 
 
 
-.loginSignal span,
-.loginProof span {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-}
 
-.loginHero {
-  max-width: 720px;
-}
 
-.loginHero h1 {
-  max-width: 660px;
-  font-size: clamp(38px, 4.5vw, 64px);
-  line-height: 0.98;
-}
 
-.loginHero p {
-  max-width: 580px;
-  color: var(--muted);
-  font-size: 17px;
-  line-height: 1.55;
-  margin: 18px 0 0;
-}
 
-.loginProof {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0;
-  border: 1px solid var(--line);
-  background: #fff;
-}
 
 
 
@@ -833,43 +740,11 @@ h2 {
 
 
 
-.loginProof div {
-  min-height: 104px;
-  display: grid;
-  align-content: space-between;
-  border-right: 1px solid var(--line);
-  padding: 18px;
-}
 
-.loginProof div:last-child {
-  border-right: 0;
-}
 
-.loginProof strong {
-  font-size: 34px;
-  line-height: 1;
-}
 
-.loginSignal {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
 
-.loginSignal div {
-  min-height: 72px;
-  display: grid;
-  align-content: center;
-  gap: 6px;
-  border-left: 4px solid var(--green);
-  background: #f7fbf8;
-  padding: 12px 14px;
-}
 
-.loginSignal strong {
-  overflow-wrap: anywhere;
-  font-size: 14px;
-}
 
 
 
@@ -880,98 +755,19 @@ h2 {
 
 
 
-.rolePicker {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
 
-.rolePicker legend {
-  grid-column: 1 / -1;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 700;
-  margin-bottom: 2px;
-}
 
-.lockedRole {
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
-  padding: 13px;
-}
 
-.lockedRole strong {
-  font-size: 18px;
-}
 
-.lockedRole small {
-  color: var(--muted);
-  line-height: 1.4;
-}
 
-.roleOption {
-  min-height: 62px;
-  position: relative;
-  display: flex !important;
-  align-items: center;
-  justify-content: flex-start;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink) !important;
-  cursor: pointer;
-  padding: 12px;
-}
 
-.roleOption:nth-of-type(1),
-.roleOption:nth-of-type(2),
-.roleOption:nth-of-type(3) {
-  grid-column: auto;
-}
 
-.roleOption:nth-of-type(4),
-.roleOption:nth-of-type(5) {
-  grid-column: auto;
-  border-top: 1px solid var(--line);
-}
 
-.roleOption:nth-of-type(3),
-.roleOption:nth-of-type(5) {
-  border-right: 1px solid var(--line);
-}
 
-.roleOption input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
 
-.roleOption:has(input:checked) {
-  border-color: var(--blue);
-  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
-  box-shadow: inset 0 0 0 1px var(--blue);
-}
 
-.roleOption span {
-  min-width: 0;
-  display: grid;
-  gap: 4px;
-}
 
-.roleOption strong {
-  font-size: 14px;
-}
 
-.roleOption small {
-  color: var(--muted);
-  font-size: 12px;
-}
 
 
 
@@ -1112,9 +908,6 @@ h2 {
   color: var(--muted);
 }
 
-.environment strong {
-  font-size: 15px;
-}
 
 .metrics {
   display: grid;
@@ -1448,26 +1241,8 @@ h2 {
   padding: 8px;
 }
 
-.linearCandidateCard {
-  display: grid;
-  gap: 7px;
-  border: 1px solid #e2e6ee;
-  border-radius: 8px;
-  background: #fff;
-  color: var(--ink);
-  padding: 10px;
-  text-decoration: none;
-}
 
-.linearCandidateCard:hover,
-.linearCandidateCard.active {
-  border-color: #9dbde8;
-  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
-}
 
-.linearCandidateCard.active {
-  box-shadow: inset 3px 0 0 var(--blue), 0 8px 24px rgba(16, 24, 40, 0.08);
-}
 
 .linearCardTop,
 .linearCardFooter,
@@ -1727,42 +1502,9 @@ h2 {
   text-align: center;
 }
 
-.workspaceNav {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  margin: 0 -8px;
-  padding: 12px 8px;
-  background: rgba(245, 247, 250, 0.92);
-  backdrop-filter: blur(10px);
-  scrollbar-width: none;
-}
 
-.workspaceNav::-webkit-scrollbar {
-  display: none;
-}
 
-.workspaceNav a {
-  min-height: 42px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  color: var(--ink);
-  padding: 0 16px;
-  font-size: 14px;
-  font-weight: 700;
-  text-decoration: none;
-  white-space: nowrap;
-}
 
-.workspaceNav a:hover {
-  border-color: #9fb9db;
-  color: var(--blue);
-}
 
 .mobileTabBar {
   display: none;
@@ -1904,363 +1646,48 @@ h2 {
   box-shadow: 0 12px 44px rgba(16, 24, 40, 0.05);
 }
 
-.commandSurface {
-  display: grid;
-  gap: 12px;
-  margin-top: 18px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  padding: 14px;
-}
 
-.searchForm {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: end;
-  gap: 10px;
-}
 
-.searchForm label {
-  display: grid;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.searchForm input {
-  min-height: 46px;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  color: var(--ink);
-  padding: 0 14px;
-  font: inherit;
-  text-transform: none;
-}
 
-.searchForm button {
-  min-height: 46px;
-  border: 0;
-  background: var(--ink);
-  color: #fff;
-  padding: 0 18px;
-  font-weight: 900;
-  cursor: pointer;
-}
 
-.filterRail {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
 
-.filterRail::-webkit-scrollbar {
-  display: none;
-}
 
-.filterRail a {
-  min-height: 38px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  color: var(--ink);
-  padding: 0 12px;
-  font-size: 13px;
-  font-weight: 800;
-  text-decoration: none;
-  white-space: nowrap;
-}
 
-.filterRail a.active {
-  border-color: var(--blue);
-  background: #eef5ff;
-  color: var(--blue);
-}
 
-.stackedCell,
-.statusCell {
-  display: grid;
-  gap: 4px;
-}
 
-.stackedCell small,
-.statusCell small {
-  color: var(--muted);
-  font-size: 12px;
-}
 
-.statusCell small {
-  width: fit-content;
-  border: 1px solid #b7cff0;
-  background: #eef5ff;
-  color: var(--blue);
-  padding: 2px 6px;
-  font-weight: 800;
-}
 
-.candidateCommand {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 18px;
-  margin-top: 18px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  padding: 16px 18px;
-  box-shadow: 0 12px 44px rgba(16, 24, 40, 0.05);
-}
 
-.candidateIdentity {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-}
 
-.candidateIdentity > span {
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.candidateIdentity > strong {
-  overflow-wrap: anywhere;
-  font-size: 24px;
-}
 
-.statusPills,
-.candidateActions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
 
-.statusPills span {
-  min-height: 28px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #b7cff0;
-  background: #eef5ff;
-  color: var(--blue);
-  padding: 0 10px;
-  font-size: 12px;
-  font-weight: 900;
-}
 
-.candidateActions {
-  justify-content: flex-end;
-}
 
-.candidateActions a {
-  min-height: 42px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  color: var(--ink);
-  padding: 0 14px;
-  font-size: 13px;
-  font-weight: 900;
-  text-decoration: none;
-  white-space: nowrap;
-}
 
-.candidateActions a:hover {
-  border-color: var(--blue);
-  color: var(--blue);
-  background: #eef5ff;
-}
 
-.studentOS {
-  min-height: 100svh;
-  display: grid;
-  grid-template-columns: 264px minmax(0, 1fr);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 247, 250, 0.9)),
-    #f5f7fa;
-}
 
-.studentOSSidebar {
-  position: sticky;
-  top: 0;
-  height: 100svh;
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
-  gap: 12px;
-  border-right: 1px solid #d9e0eb;
-  background: #101828;
-  color: #f9fafb;
-  padding: 14px;
-}
 
-.studentOSBrand,
-.studentOSNav a,
-.studentOSWorkflowAction,
-.studentOSWorkflowRow,
-.opsNoSelectionActions a {
-  text-decoration: none;
-}
 
-.studentOSBrand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: 44px;
-  color: #fff;
-}
 
-.studentOSBrand span {
-  width: 34px;
-  height: 34px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  background: #fff;
-  color: #101828;
-  border-radius: 8px;
-  font-weight: 900;
-}
 
-.studentOSUser {
-  display: grid;
-  gap: 5px;
-  border: 1px solid rgba(255, 255, 255, 0.13);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.06);
-  padding: 12px;
-}
 
-.studentOSUser span,
-.studentOSEstate span,
-.studentOSWorkflowHeader span {
-  color: #98a2b3;
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.studentOSUser strong,
-.studentOSUser small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.studentOSUser small {
-  color: #cbd5e1;
-}
 
-.studentOSNav {
-  display: grid;
-  align-content: start;
-  gap: 6px;
-  overflow-y: auto;
-  padding-right: 2px;
-}
 
-.studentOSNav a {
-  min-height: 46px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: #d0d5dd;
-  padding: 0 10px;
-}
 
-.studentOSNav a:hover,
-.studentOSNav a.active {
-  border-color: rgba(255, 255, 255, 0.16);
-  background: rgba(255, 255, 255, 0.08);
-  color: #fff;
-}
 
-.studentOSNav span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 800;
-}
 
-.studentOSNav strong {
-  min-width: 30px;
-  min-height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.1);
-  font-size: 12px;
-}
 
-.studentOSEstate {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 1px;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.13);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.13);
-}
 
-.studentOSEstate div {
-  min-width: 0;
-  display: grid;
-  gap: 3px;
-  background: #182230;
-  padding: 10px;
-}
 
-.studentOSEstate strong {
-  font-size: 18px;
-}
 
-.studentOSEstate small {
-  color: #98a2b3;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.studentOSSignout button {
-  width: 100%;
-  min-height: 42px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 8px;
-  background: #fff;
-  color: #101828;
-  font-weight: 900;
-  cursor: pointer;
-}
 
-.studentOSMain {
-  min-width: 0;
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  padding: 18px;
-}
 
-.studentOSTop {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  border-bottom: 1px solid var(--line);
-  padding: 4px 0 16px;
-}
 
-.studentOSTop h1 {
-  font-size: 36px;
-  line-height: 1;
-}
 
 .studentOSTop p:not(.eyebrow) {
   max-width: 740px;
@@ -2269,652 +1696,96 @@ h2 {
   margin: 8px 0 0;
 }
 
-.studentOSKeys {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 6px;
-  max-width: 330px;
-}
 
-.studentOSKeys span {
-  min-height: 30px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #fff;
-  color: var(--muted);
-  padding: 0 9px;
-  font-size: 12px;
-  font-weight: 900;
-}
 
-.studentOSWorkflowGrid {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(220px, 1fr));
-  gap: 10px;
-  overflow-x: auto;
-  padding-bottom: 2px;
-  scrollbar-width: thin;
-}
 
-.studentOSWorkflow {
-  min-width: 220px;
-  display: grid;
-  grid-template-rows: auto minmax(160px, 1fr) auto;
-  overflow: hidden;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);
-  transition:
-    border-color 160ms ease,
-    box-shadow 160ms ease,
-    transform 160ms ease;
-}
 
-.studentOSWorkflow:hover {
-  border-color: #afc4e4;
-  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.1);
-  transform: translateY(-1px);
-}
 
-.studentOSWorkflowHeader {
-  min-height: 82px;
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid var(--line);
-  padding: 13px;
-}
 
-.studentOSWorkflowHeader h2 {
-  font-size: 16px;
-  margin: 5px 0 0;
-}
 
-.studentOSWorkflowHeader strong {
-  font-size: 28px;
-  line-height: 1;
-}
 
-.studentOSWorkflowRows {
-  display: grid;
-  align-content: start;
-}
 
-.studentOSWorkflowRow,
-.studentOSWorkflowEmpty {
-  min-width: 0;
-  display: grid;
-  gap: 4px;
-  border-bottom: 1px solid var(--line);
-  color: var(--ink);
-  padding: 11px 13px;
-}
 
-.studentOSWorkflowRow:hover {
-  background: #f8fbff;
-}
 
-.studentOSWorkflowRow strong,
-.studentOSWorkflowRow span,
-.studentOSWorkflowRow small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.studentOSWorkflowRow span,
-.studentOSWorkflowRow small,
-.studentOSWorkflowEmpty span {
-  color: var(--muted);
-  font-size: 12px;
-}
 
-.studentOSWorkflowAction {
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--line);
-  background: #fbfcfe;
-  color: var(--blue);
-  font-size: 13px;
-  font-weight: 900;
-}
 
-.studentOSWorkflowAction:hover {
-  background: #eef5ff;
-}
 
-.opsStatBar {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(140px, 1fr));
-  gap: 1px;
-  border: 1px solid var(--line);
-  background: var(--line);
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
 
-.opsStat {
-  min-width: 0;
-  min-height: 78px;
-  display: grid;
-  align-content: center;
-  gap: 5px;
-  background: rgba(255, 255, 255, 0.94);
-  padding: 13px 14px;
-}
 
-.opsStat span,
-.opsStat small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.opsStat span {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsStat strong {
-  font-size: 28px;
-  line-height: 1;
-}
 
-.opsStat small {
-  color: var(--faint);
-  font-size: 12px;
-}
 
-.opsToolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: end;
-  gap: 12px;
-  margin-top: 18px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.92);
-  padding: 14px;
-  box-shadow: 0 12px 44px rgba(16, 24, 40, 0.05);
-}
 
-.opsSearch {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: end;
-  gap: 10px;
-}
 
-.opsSearch label {
-  display: grid;
-  gap: 7px;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsSearch input {
-  min-height: 46px;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  color: var(--ink);
-  padding: 0 14px;
-  font: inherit;
-  text-transform: none;
-}
 
-.opsSearch input:focus {
-  outline: 3px solid rgba(11, 99, 206, 0.14);
-  border-color: var(--blue);
-  background: #fff;
-}
 
-.opsSearch button {
-  min-height: 46px;
-  border: 0;
-  background: var(--ink);
-  color: #fff;
-  padding: 0 18px;
-  font-weight: 900;
-  cursor: pointer;
-}
 
-.opsFilters {
-  margin-top: 10px;
-}
 
-.opsLanes {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(230px, 1fr));
-  gap: 12px;
-  margin-top: 14px;
-  overflow-x: auto;
-  padding-bottom: 2px;
-  scrollbar-width: thin;
-}
 
-.opsLane {
-  min-width: 230px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  box-shadow: 0 10px 34px rgba(16, 24, 40, 0.04);
-}
 
-.opsLaneHeader,
-.opsPanelHeader {
-  min-height: 58px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid var(--line);
-  padding: 14px;
-}
 
-.opsLaneHeader h2,
-.opsPanelHeader h2 {
-  font-size: 15px;
-  margin: 0;
-}
 
-.opsLaneHeader p {
-  color: var(--muted);
-  font-size: 12px;
-  line-height: 1.35;
-  margin: 5px 0 0;
-}
 
-.opsLaneHeader span,
-.opsPanelHeader span {
-  min-width: 30px;
-  min-height: 30px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #b7cff0;
-  background: #eef5ff;
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-}
 
-.opsLaneCards,
-.opsActivityList,
-.opsRecordRows,
-.opsActionList {
-  display: grid;
-}
 
-.opsCandidateCard {
-  min-height: 166px;
-  display: grid;
-  align-content: start;
-  gap: 7px;
-  border-bottom: 1px solid var(--line);
-  border-left: 4px solid transparent;
-  background: #fff;
-  color: var(--ink);
-  padding: 13px 14px;
-  text-decoration: none;
-}
 
-.opsCandidateCard:last-child {
-  border-bottom: 0;
-}
 
-.opsCandidateCard:hover,
-.opsCandidateCard.active {
-  border-left-color: var(--blue);
-  background: #f8fbff;
-}
 
-.opsCandidateCard > span {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsCandidateCard > strong,
-.opsCandidateCard > small,
-.opsCardMeta span,
-.opsCardFooter em,
-.opsCardFooter strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.opsCandidateCard > strong {
-  font-size: 16px;
-}
 
-.opsCandidateCard > small,
-.opsCardMeta span,
-.opsCardFooter em {
-  color: var(--muted);
-  font-size: 12px;
-  font-style: normal;
-}
 
-.opsCardMeta {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
 
-.opsCardFooter {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
 
-.opsCardFooter strong {
-  color: var(--green);
-  font-size: 12px;
-}
 
-.opsMiniPills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}
 
-.opsMiniPills span {
-  min-height: 24px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #f2c98c;
-  background: #fff8eb;
-  color: var(--amber);
-  padding: 0 7px;
-  font-size: 11px;
-  font-weight: 900;
-}
 
-.candidateOpsGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 360px;
-  gap: 12px;
-  margin-top: 14px;
-}
 
-.opsRecord,
-.opsSidePanel section {
-  border: 1px solid var(--line);
-  background: var(--surface);
-  box-shadow: 0 12px 44px rgba(16, 24, 40, 0.05);
-}
 
-.opsSidePanel {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-}
 
-.opsRecordHeader {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px;
-  align-items: start;
-  border-bottom: 1px solid var(--line);
-  padding: 18px;
-}
 
-.opsRecordHeader span {
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsRecordHeader h2 {
-  overflow-wrap: anywhere;
-  font-size: 28px;
-  margin: 4px 0 6px;
-}
 
-.opsRecordHeader p {
-  color: var(--muted);
-  margin: 0;
-  overflow-wrap: anywhere;
-}
 
-.opsStatusPills {
-  border-bottom: 1px solid var(--line);
-  padding: 12px 18px;
-}
 
-.opsFactStrip,
-.opsCoverageGrid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  border-bottom: 1px solid var(--line);
-}
 
-.opsCoverageGrid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 0;
-}
 
-.opsFact {
-  min-width: 0;
-  min-height: 78px;
-  display: grid;
-  align-content: center;
-  gap: 7px;
-  border-right: 1px solid var(--line);
-  padding: 13px 14px;
-}
 
-.opsFact:nth-child(4n),
-.opsCoverageGrid .opsFact:nth-child(2n) {
-  border-right: 0;
-}
 
-.opsFact span {
-  color: var(--muted);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsFact strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
 
-.opsActionPanel {
-  border-bottom: 1px solid var(--line);
-}
 
-.opsActionList {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
 
-.opsAction {
-  min-height: 132px;
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  padding: 14px;
-}
 
-.opsAction:nth-child(3n) {
-  border-right: 0;
-}
 
-.opsAction span {
-  width: fit-content;
-  border: 1px solid #c8e3d6;
-  background: #f0fbf5;
-  color: var(--green);
-  padding: 3px 7px;
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsAction p {
-  color: var(--muted);
-  font-size: 13px;
-  line-height: 1.4;
-  margin: 0;
-}
 
-.opsRecordSections {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
 
-.opsRecordSection {
-  min-width: 0;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-}
 
-.opsRecordSection:nth-child(2n) {
-  border-right: 0;
-}
 
-.opsRecordRow,
-.opsActivityItem {
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-  border-bottom: 1px solid var(--line);
-  padding: 12px 14px;
-}
 
-.opsRecordRow:last-child,
-.opsActivityItem:last-child {
-  border-bottom: 0;
-}
 
-.opsRecordRow {
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-}
 
-.opsRecordRow div {
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-}
 
-.opsRecordRow strong,
-.opsRecordRow span,
-.opsRecordRow em,
-.opsActivityItem strong,
-.opsActivityItem small,
-.opsActivityItem em {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.opsRecordRow a {
-  color: inherit;
-  text-decoration: none;
-}
 
-.opsRecordRow a:hover,
-.opsActivityItem:hover strong {
-  color: var(--blue);
-}
 
-.opsRecordRow span,
-.opsRecordRow em,
-.opsActivityItem small,
-.opsActivityItem em {
-  color: var(--muted);
-  font-size: 12px;
-  font-style: normal;
-}
 
-.opsActivityItem {
-  color: var(--ink);
-  text-decoration: none;
-}
 
-.opsActivityItem > span {
-  width: fit-content;
-  border: 1px solid #f3c2d3;
-  background: #fff3f7;
-  color: var(--rose);
-  padding: 3px 7px;
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.opsEmpty,
-.opsNoSelection {
-  display: grid;
-  gap: 6px;
-  color: var(--muted);
-  padding: 18px;
-}
 
 .opsEmpty.slim {
   padding: 12px 14px;
 }
 
-.opsEmpty strong,
-.opsNoSelection strong {
-  color: var(--ink);
-}
 
-.opsNoSelection {
-  min-height: 360px;
-  align-content: center;
-  justify-items: center;
-  text-align: center;
-}
 
-.opsNoSelection span {
-  max-width: 560px;
-  line-height: 1.5;
-}
 
-.opsNoSelectionActions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 8px;
-}
 
-.opsNoSelectionActions a {
-  min-height: 40px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #fff;
-  color: var(--ink);
-  padding: 0 12px;
-  font-weight: 900;
-}
 
-.opsNoSelectionActions a:hover {
-  border-color: var(--blue);
-  color: var(--blue);
-  background: #eef5ff;
-}
 
 .tableHeader {
   min-height: 76px;
@@ -3362,384 +2233,60 @@ tr:last-child td {
   box-shadow: none;
 }
 
-.commandTabs {
-  display: flex;
-  gap: 6px;
-  overflow-x: auto;
-  border-bottom: 1px solid #e2e6ee;
-  background: #fff;
-  padding: 8px 14px;
-  scrollbar-width: none;
-}
 
-.commandTabs::-webkit-scrollbar {
-  display: none;
-}
 
-.commandTabs a {
-  min-width: 156px;
-  max-width: 240px;
-  min-height: 42px;
-  display: grid;
-  align-content: center;
-  gap: 2px;
-  border: 1px solid #e2e6ee;
-  border-radius: 8px;
-  background: #fbfcfd;
-  color: #111827;
-  padding: 0 10px;
-}
 
-.commandTabs a.active,
-.commandTabs a:hover {
-  border-color: #b8c7dd;
-  background: #fff;
-}
 
-.commandTabs span,
-.commandTabs strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.commandTabs span {
-  color: #667085;
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.commandBody {
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 230px minmax(360px, 1fr) minmax(320px, 420px);
-  gap: 0;
-}
 
-.commandViews,
-.commandWorklist,
-.commandInspector {
-  min-width: 0;
-  min-height: 0;
-  overflow-y: auto;
-  border-right: 1px solid #e2e6ee;
-  background: #fff;
-}
 
-.commandWorklist {
-  background: #f7f8fa;
-}
 
-.commandInspector {
-  border-right: 0;
-}
 
-.commandSectionTitle {
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border-bottom: 1px solid #e2e6ee;
-  padding: 0 12px;
-}
 
 .commandSectionTitle.compact {
   border-top: 1px solid #e2e6ee;
 }
 
-.commandSectionTitle strong {
-  min-width: 28px;
-  min-height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #eef2f7;
-  color: #344054;
-  font-size: 12px;
-}
-
-.commandScopeList,
-.commandQueueList {
-  display: grid;
-  padding: 8px;
-}
-
-.commandScopeList a {
-  min-height: 40px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  color: #344054;
-  padding: 0 8px;
-}
-
-.commandScopeList a:hover,
-.commandScopeList a.active {
-  background: #eef5ff;
-  color: #0b63ce;
-}
-
-.commandQueue {
-  display: grid;
-  gap: 4px;
-  border-radius: 8px;
-  color: #344054;
-  padding: 9px 8px;
-}
-
-.commandQueue:hover {
-  background: #f6f8fb;
-}
-
-.commandQueue strong {
-  font-size: 22px;
-  line-height: 1;
-}
-
-.commandQueue small {
-  color: #667085;
-  line-height: 1.35;
-}
 
-.commandWorklistHeader {
-  min-height: 84px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: end;
-  gap: 16px;
-  border-bottom: 1px solid #e2e6ee;
-  background: #fff;
-  padding: 14px;
-}
 
-.commandWorklistHeader h1 {
-  font-size: 24px;
-  line-height: 1.1;
-  margin: 3px 0 0;
-}
 
-.commandMetaStrip {
-  display: flex;
-  gap: 1px;
-  overflow: hidden;
-  border: 1px solid #e2e6ee;
-  border-radius: 8px;
-  background: #e2e6ee;
-}
 
-.commandMetaStrip div {
-  min-width: 112px;
-  display: grid;
-  gap: 3px;
-  background: #fbfcfd;
-  padding: 8px 10px;
-}
 
-.commandMetaStrip strong {
-  font-size: 15px;
-}
 
-.commandResultList {
-  display: grid;
-  padding: 8px;
-}
 
-.commandResult {
-  min-height: 58px;
-  display: grid;
-  grid-template-columns: 92px minmax(0, 1fr) minmax(160px, 230px);
-  align-items: center;
-  gap: 12px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: #111827;
-  padding: 8px 10px;
-}
 
-.commandResult:hover,
-.commandResult.active {
-  border-color: #d7e4f7;
-  background: #fff;
-  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
-}
 
-.commandResult.active {
-  box-shadow: inset 3px 0 0 #0b63ce;
-}
 
-.commandResult div,
-.commandResult strong,
-.commandResult small,
-.commandResult em {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.commandResult small,
-.commandResult em {
-  color: #667085;
-  font-size: 12px;
-  font-style: normal;
-}
 
-.commandInspectorHeader {
-  display: grid;
-  gap: 6px;
-  border-bottom: 1px solid #e2e6ee;
-  padding: 16px;
-}
 
-.commandInspectorHeader h2 {
-  overflow-wrap: anywhere;
-  font-size: 22px;
-  margin: 0;
-}
 
-.commandInspectorHeader p,
-.commandInspectorHeader small {
-  color: #667085;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
 
-.commandInspectorActions,
-.commandFlags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  border-bottom: 1px solid #e2e6ee;
-  padding: 12px 16px;
-}
 
-.commandInspectorActions a {
-  min-height: 36px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid #d9dee8;
-  border-radius: 8px;
-  background: #fbfcfd;
-  color: #111827;
-  padding: 0 10px;
-  font-size: 13px;
-  font-weight: 900;
-}
 
-.commandInspectorActions a:hover {
-  border-color: #8bb4ea;
-  color: #0b63ce;
-  background: #eef5ff;
-}
 
-.commandFlags span {
-  min-height: 26px;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  background: #eef2f7;
-  color: #344054;
-  padding: 0 9px;
-  font-size: 12px;
-  font-weight: 800;
-}
 
-.commandFacts {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid #e2e6ee;
-}
 
-.commandFacts div {
-  min-width: 0;
-  min-height: 72px;
-  display: grid;
-  align-content: center;
-  gap: 5px;
-  border-right: 1px solid #e2e6ee;
-  border-bottom: 1px solid #e2e6ee;
-  padding: 10px 12px;
-}
 
-.commandFacts div:nth-child(2n) {
-  border-right: 0;
-}
 
-.commandFacts strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
 
-.commandRelated {
-  display: grid;
-}
 
-.commandRelated section {
-  border-bottom: 1px solid #e2e6ee;
-}
 
-.commandRelatedHeader {
-  min-height: 42px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-}
 
-.commandRelatedHeader h3 {
-  font-size: 14px;
-  margin: 0;
-}
 
-.commandRelatedRow {
-  min-height: 58px;
-  display: grid;
-  gap: 4px;
-  color: #111827;
-  padding: 9px 12px;
-}
 
-.commandRelatedRow:hover {
-  background: #f6f8fb;
-}
 
-.commandRelatedRow strong,
-.commandRelatedRow span,
-.commandRelatedRow small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.commandRelatedRow span,
-.commandRelatedRow small,
-.commandRelatedEmpty,
-.commandEmptyState span {
-  color: #667085;
-  font-size: 12px;
-}
 
-.commandRelatedEmpty,
-.commandEmptyState {
-  display: grid;
-  gap: 6px;
-  padding: 14px;
-}
 
-.commandEmptyState {
-  min-height: 160px;
-  align-content: center;
-  justify-items: center;
-  text-align: center;
-}
+
+
+
+
+
+
+
 
 .journeyHome {
   width: min(100%, 1500px);
@@ -4096,155 +2643,23 @@ tr:last-child td {
   padding: 10px;
 }
 
-.hubShell {
-  min-height: 100svh;
-  display: grid;
-  grid-template-columns: 272px minmax(0, 1fr);
-  background: #f7f8fb;
-}
 
-.hubSidebar {
-  position: sticky;
-  top: 0;
-  height: 100svh;
-  display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
-  gap: 12px;
-  border-right: 1px solid var(--line);
-  background: rgba(249, 250, 252, 0.96);
-  padding: 14px;
-}
 
-.hubBrand,
-.hubRoleNav a,
-.lockedModule,
-.hubResult,
-.hubQueue,
-.hubMobileDock a {
-  text-decoration: none;
-}
 
-.hubBrand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 44px;
-  color: var(--ink);
-}
 
-.hubBrand span {
-  width: 36px;
-  height: 36px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ink);
-  color: #fff;
-  border-radius: 8px;
-  font-weight: 900;
-}
 
-.hubBrand strong {
-  font-size: 18px;
-}
 
-.hubProfile {
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  padding: 12px;
-}
 
-.hubProfile span,
-.hubRoleNav span,
-.lockedModule span,
-.moduleCard span,
-.hubMode span,
-.hubCommand label,
-.hubQueue span,
-.resultType,
-.hubSystem span {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.hubProfile strong,
-.hubProfile small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.hubProfile small {
-  color: var(--muted);
-}
 
-.hubRoleNav {
-  display: grid;
-  align-content: start;
-  gap: 8px;
-  overflow-y: auto;
-}
 
-.hubRoleNav a,
-.lockedModule {
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 12px;
-}
 
-.hubRoleNav a.active {
-  border-color: var(--blue);
-  background: #eef5ff;
-}
 
-.lockedModule {
-  opacity: 0.62;
-}
 
-.hubSignout button {
-  width: 100%;
-  min-height: 42px;
-  border: 0;
-  border-radius: 8px;
-  background: var(--ink);
-  color: #fff;
-  font-weight: 900;
-  cursor: pointer;
-}
 
-.hubMain {
-  min-width: 0;
-  display: grid;
-  align-content: start;
-  gap: 12px;
-  padding: 14px;
-}
 
-.hubHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.94);
-  border-radius: 8px;
-  padding: 14px 16px;
-  box-shadow: 0 12px 36px rgba(16, 24, 40, 0.05);
-}
 
-.hubHeader h1 {
-  font-size: clamp(25px, 2vw, 32px);
-  line-height: 1.05;
-}
 
 .hubHeader p:not(.eyebrow) {
   max-width: 680px;
@@ -4254,347 +2669,57 @@ tr:last-child td {
   line-height: 1.45;
 }
 
-.hubHeaderActions {
-  display: flex;
-  align-items: stretch;
-  gap: 10px;
-}
-
-.hubMode {
-  min-width: 140px;
-  display: grid;
-  gap: 5px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  padding: 11px 12px;
-}
-
-.hubMode strong {
-  text-transform: capitalize;
-}
 
-.hubCommand {
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  padding: 12px;
-}
 
-.hubCommand form {
-  display: grid;
-  gap: 8px;
-}
 
-.hubSearchRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
-}
 
-.hubSearchRow input {
-  min-height: 44px;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 0 16px;
-  font: inherit;
-  font-weight: 700;
-}
 
-.hubSearchRow input:focus {
-  outline: 3px solid rgba(11, 99, 206, 0.14);
-  border-color: var(--blue);
-  background: #fff;
-}
 
-.hubSearchRow button {
-  min-height: 44px;
-  border: 0;
-  border-radius: 8px;
-  background: var(--blue);
-  color: #fff;
-  padding: 0 22px;
-  font-weight: 900;
-  cursor: pointer;
-}
 
-.hubScopes {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  margin-top: 12px;
-  scrollbar-width: none;
-}
 
-.hubScopes::-webkit-scrollbar {
-  display: none;
-}
 
-.hubScopes a {
-  min-height: 34px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  background: #fbfcfe;
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 0 13px;
-  font-size: 13px;
-  font-weight: 900;
-  text-decoration: none;
-  white-space: nowrap;
-}
 
-.hubScopes a.active {
-  border-color: var(--blue);
-  background: #eef5ff;
-  color: var(--blue);
-}
 
-.hubQueues {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.hubQueue {
-  min-height: 92px;
-  display: grid;
-  align-content: space-between;
-  gap: 8px;
-  border: 1px solid var(--line);
-  border-top: 4px solid var(--blue);
-  background: var(--surface);
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 16px;
-}
 
-.hubQueue strong {
-  font-size: 26px;
-  line-height: 1;
-}
 
-.hubQueue small {
-  color: var(--muted);
-  line-height: 1.35;
-}
 
-.hubQueue.warning {
-  border-top-color: var(--amber);
-}
 
-.hubQueue.attention {
-  border-top-color: var(--rose);
-}
 
-.hubQueue.demand {
-  border-top-color: var(--green);
-}
 
-.hubQueue.compliance {
-  border-top-color: var(--ink);
-}
 
-.hubQueue:hover,
-.hubResult:hover,
-.hubRoleNav a:hover,
-.workstream:hover {
-  border-color: #9fb9db;
-  box-shadow: 0 16px 48px rgba(16, 24, 40, 0.08);
-}
 
-.hubWorkstreams {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.workstreamStack {
-  display: grid;
-  gap: 8px;
-  padding: 12px;
-}
 
-.workstream {
-  min-width: 0;
-  display: grid;
-  align-content: space-between;
-  gap: 14px;
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 14px;
-  text-decoration: none;
-}
 
-.workstream div:first-child {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-}
 
-.workstream span:first-child {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.workstream strong {
-  font-size: 22px;
-  line-height: 1;
-}
 
-.workstream small {
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.streamMeter {
-  height: 6px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: #e8edf5;
-}
 
-.streamMeter span {
-  display: block;
-  height: 100%;
-  background: var(--blue);
-}
 
-.workstream.attention .streamMeter span {
-  background: var(--rose);
-}
 
-.workstream.warning .streamMeter span {
-  background: var(--amber);
-}
 
-.workstream.demand .streamMeter span {
-  background: var(--green);
-}
 
-.workstream.compliance .streamMeter span {
-  background: var(--ink);
-}
 
-.workstream.money .streamMeter span {
-  background: #6f4fd8;
-}
 
-.hubGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 380px;
-  gap: 12px;
-  align-items: start;
-}
 
-.hubSideStack {
-  min-width: 0;
-  display: grid;
-  gap: 12px;
-}
 
-.hubPanel {
-  border: 1px solid var(--line);
-  background: var(--surface);
-  border-radius: 8px;
-  overflow: hidden;
-}
 
-.hubPanelHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid var(--line);
-  padding: 18px;
-}
 
-.hubPanelHeader h2 {
-  margin-bottom: 4px;
-}
 
-.hubPanelHeader p,
-.hubPanelHeader > span {
-  color: var(--muted);
-  margin-bottom: 0;
-}
 
-.hubPanelHeader > span {
-  font-size: 12px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
-.hubPanelHeader.inset {
-  border-top: 1px solid var(--line);
-}
 
-.hubResults,
-.moduleStack {
-  display: grid;
-}
 
-.hubResult {
-  display: grid;
-  grid-template-columns: 86px minmax(0, 1fr) auto;
-  gap: 14px;
-  align-items: center;
-  border-bottom: 1px solid var(--line);
-  color: var(--ink);
-  padding: 14px 18px;
-}
 
-.hubResult.active {
-  background: #f1f6ff;
-  box-shadow: inset 3px 0 0 var(--blue);
-}
 
-.hubResult:last-child,
-.moduleCard:last-child {
-  border-bottom: 0;
-}
 
-.resultBody {
-  min-width: 0;
-  display: grid;
-  gap: 5px;
-}
 
-.resultBody strong,
-.resultBody span,
-.resultBody small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.resultBody span,
-.resultBody small,
-.moduleCard p,
-.hubSystem small {
-  color: var(--muted);
-}
 
-.resultAction {
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--line);
-  border-radius: 7px;
-  padding: 0 12px;
-  color: var(--blue);
-  font-size: 12px;
-  font-weight: 900;
-}
+
+
 
 .previewPanel {
   overflow: hidden;
@@ -4757,57 +2882,15 @@ tr:last-child td {
   padding: 0 18px 14px;
 }
 
-.moduleCard {
-  display: grid;
-  gap: 7px;
-  border-bottom: 1px solid var(--line);
-  padding: 16px 18px;
-}
 
-.moduleCard.active {
-  background: #eef5ff;
-}
 
-.moduleCard p {
-  margin-bottom: 0;
-  line-height: 1.45;
-}
 
-.hubSystem {
-  display: grid;
-  grid-template-columns: 1fr;
-  border-top: 1px solid var(--line);
-}
 
-.hubSystem div {
-  display: grid;
-  gap: 5px;
-  border-bottom: 1px solid var(--line);
-  padding: 15px 18px;
-}
 
-.hubSystem div:last-child {
-  border-bottom: 0;
-}
 
-.hubSystem strong {
-  font-size: 24px;
-}
 
-.hubEmpty {
-  display: grid;
-  gap: 6px;
-  padding: 24px 18px;
-  color: var(--muted);
-}
 
-.hubEmpty strong {
-  color: var(--ink);
-}
 
-.hubMobileDock {
-  display: none;
-}
 
 .commandLauncher {
   min-width: 168px;
@@ -4831,23 +2914,6 @@ tr:last-child td {
   background: #fff;
 }
 
-kbd {
-  min-height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #c8d1df;
-  border-bottom-color: #aeb9c9;
-  border-radius: 6px;
-  background: #fff;
-  color: #3b4658;
-  padding: 0 6px;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 900;
-  line-height: 1;
-  white-space: nowrap;
-}
 
 .commandOverlay {
   position: fixed;
@@ -5001,110 +3067,18 @@ kbd {
 }
 
 @media (max-width: 1040px) {
-  .metrics,
-  .lists,
-  .workspace,
   .focus,
-  .loginShell,
-  .loginSignal,
-  .featureGrid,
-  .detailGrid,
   .candidateOpsGrid {
     grid-template-columns: 1fr;
   }
 
 
-  .loginHero h1 {
-    max-width: 560px;
-    font-size: 38px;
-    line-height: 1;
-  }
-
-  .loginHero p {
-    max-width: 620px;
-    font-size: 16px;
-    line-height: 1.45;
-    margin-top: 10px;
-  }
-
-  .loginProof div {
-    min-height: 62px;
-    padding: 11px 16px;
-  }
-
-  .loginProof strong {
-    font-size: 24px;
-  }
-
-  .loginSignal {
-    display: none;
-  }
-
-  .loginShell {
-    align-items: start;
-    gap: 14px;
-    padding: 16px 0 32px;
-  }
-
-
-
-
-
-
-
-
-  .studentOS {
-    grid-template-columns: 1fr;
-  }
-
-  .studentOSSidebar {
-    position: static;
-    height: auto;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    grid-template-rows: auto auto;
-  }
-
-  .studentOSBrand {
-    grid-column: 1;
-  }
-
-  .studentOSUser {
-    grid-column: 2;
-  }
-
-  .studentOSNav {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    grid-template-columns: repeat(6, minmax(96px, 1fr));
-    overflow-x: auto;
-  }
 
-  .studentOSNav a {
-    min-height: 42px;
-    padding: 0 8px;
-  }
 
-  .studentOSEstate {
-    display: none;
-  }
 
-  .studentOSSignout {
-    grid-column: 3;
-    grid-row: 1;
-  }
 
-  .studentOSSignout button {
-    height: 100%;
-  }
 
-  .studentOSTop {
-    flex-direction: column;
-  }
 
-  .studentOSKeys {
-    justify-content: flex-start;
-    max-width: none;
-  }
 
   .commandOS {
     grid-template-columns: 1fr;
@@ -6230,30 +4204,6 @@ kbd {
 
 
 
-.portalChooserHero h1,
-
-
-
-.portalChooserPromise,
-
-.portalChooserPromise span,
-
-
-
-
-
-
-.portalChooserHero {
-  max-width: 900px;
-  padding-top: clamp(38px, 8vw, 92px);
-}
-
-.portalChooserHero h1 {
-  max-width: 900px;
-}
-
-
-
 
 
 
@@ -6305,40 +4255,8 @@ kbd {
 }
 
 /* Candidate search operating system */
-.candidateSearchOS {
-  display: grid;
-  gap: 12px;
-}
 
 .candidateSearchHero,
-.candidateSearchSource,
-.candidateSearchMetrics article,
-.candidateSearchToolbar,
-.candidateSearchFilters,
-.candidateFacetPanel,
-.candidateResultsPanel,
-.candidatePreviewPanel {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface);
-}
-
-.candidateSearchHero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
-  gap: 16px;
-  align-items: stretch;
-  padding: 18px;
-}
-
-.candidateSearchHero > div:first-child {
-  display: grid;
-  align-content: center;
-  gap: 8px;
-}
-
-.candidateSearchHero span,
-.candidateSearchSource span,
 .candidateSearchMetrics span,
 .candidateResultsHeader span,
 .candidateFacetHeader span,
@@ -6353,12 +4271,6 @@ kbd {
   text-transform: uppercase;
 }
 
-.candidateSearchHero h2 {
-  max-width: 820px;
-  margin: 0;
-  font-size: clamp(34px, 4vw, 62px);
-  line-height: 0.98;
-}
 
 .candidateSearchHero p,
 .candidateSearchSource small,
@@ -6370,91 +4282,21 @@ kbd {
 .candidatePreviewRows span,
 .candidatePreviewRows small,
 .candidateEmptyState span,
-.candidateAccessNotice span {
-  color: var(--muted);
-  line-height: 1.45;
-}
-
-.candidateSearchHero p {
-  max-width: 720px;
-  margin: 0;
-}
-
-.candidateSearchSource {
-  display: grid;
-  align-content: end;
-  gap: 8px;
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 58%),
-    var(--surface-soft);
-  padding: 14px;
+.candidateAccessNotice span {
+  color: var(--muted);
+  line-height: 1.45;
 }
 
-.candidateSearchSource strong {
-  font-size: 26px;
-  line-height: 1;
-}
 
-.candidateSearchMetrics {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 10px;
-}
 
-.candidateSearchMetrics article {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-  padding: 14px;
-}
 
-.candidateSearchMetrics strong {
-  font-size: 28px;
-  line-height: 1;
-}
 
-.candidateSearchToolbar {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: center;
-  padding: 10px;
-}
 
-.candidateSearchForm {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
-}
 
-.candidateSearchForm input {
-  min-width: 0;
-  min-height: 48px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 0 14px;
-  font: inherit;
-  font-weight: 800;
-}
 
-.candidateSearchForm input:focus {
-  border-color: var(--blue);
-  outline: 3px solid color-mix(in srgb, var(--blue) 16%, transparent);
-}
 
-.candidateSearchForm button {
-  min-height: 48px;
-  border: 0;
-  border-radius: 8px;
-  background: var(--ink);
-  color: var(--surface);
-  padding: 0 18px;
-  font: inherit;
-  font-weight: 900;
-}
+
+
 
 .candidateSearchFilters {
   display: flex;
@@ -6493,36 +4335,9 @@ kbd {
   color: var(--blue);
 }
 
-.candidateSearchGrid {
-  display: grid;
-  grid-template-columns: minmax(190px, 260px) minmax(360px, 0.9fr) minmax(340px, 0.8fr);
-  gap: 12px;
-  align-items: start;
-}
 
-.candidateFacetPanel,
-.candidatePreviewPanel {
-  position: sticky;
-  top: 14px;
-  overflow: hidden;
-}
 
-.candidateFacetHeader,
-.candidateResultsHeader,
-.candidatePreviewSectionHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border-bottom: 1px solid var(--line);
-  padding: 12px;
-}
 
-.candidateFacetHeader a {
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 900;
-}
 
 .candidateFacetGroup {
   display: grid;
@@ -6569,16 +4384,7 @@ kbd {
   font-size: 12px;
 }
 
-.candidateResultsPanel,
-.candidatePreviewPanel {
-  min-width: 0;
-  overflow: hidden;
-}
 
-.candidateResultsHeader strong {
-  display: block;
-  font-size: 20px;
-}
 
 .candidateAccessNotice,
 .candidateEmptyState {
@@ -6603,25 +4409,7 @@ kbd {
   padding: 10px;
 }
 
-.candidateResultCard {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 9px 10px;
-  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
-}
 
-.candidateResultCard:hover,
-.candidateResultCard.active {
-  border-color: var(--blue);
-  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
-  transform: translateY(-1px);
-  box-shadow: 0 14px 38px rgba(16, 24, 40, 0.1);
-}
 
 .candidateResultTop,
 .candidateResultMeta,
@@ -6634,29 +4422,9 @@ kbd {
   align-items: center;
 }
 
-.candidateResultTop {
-  justify-content: space-between;
-}
 
-.candidateResultTop em {
-  color: var(--green);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 900;
-}
 
-.candidateResultCard > strong {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 18px;
-}
 
-.candidateResultCard > small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
 .candidateResultTags span,
 .candidatePreviewPills span {
@@ -6672,112 +4440,21 @@ kbd {
   font-weight: 800;
 }
 
-.candidatePreviewHeader {
-  display: grid;
-  gap: 7px;
-  border-bottom: 1px solid var(--line);
-  padding: 16px;
-}
 
-.candidatePreviewHeader h2 {
-  overflow-wrap: anywhere;
-  margin: 0;
-  font-size: 30px;
-  line-height: 1;
-}
 
-.candidatePreviewHeader p {
-  margin: 0;
-}
 
-.candidatePreviewActions {
-  border-bottom: 1px solid var(--line);
-  padding: 12px 16px;
-}
 
-.candidatePreviewActions a,
-.candidatePreviewFullRecord {
-  min-height: 38px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--surface-soft);
-  color: var(--ink);
-  padding: 0 12px;
-  font-size: 13px;
-  font-weight: 900;
-}
 
-.candidatePreviewActions a:first-child,
-.candidatePreviewFullRecord {
-  border-color: var(--blue);
-  background: var(--blue);
-  color: #fff;
-}
 
-.candidatePreviewFacts {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid var(--line);
-}
 
-.candidatePreviewFacts div {
-  min-width: 0;
-  display: grid;
-  gap: 6px;
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  padding: 12px 16px;
-}
 
-.candidatePreviewFacts div:nth-child(2n) {
-  border-right: 0;
-}
 
-.candidatePreviewFacts strong {
-  overflow-wrap: anywhere;
-}
 
-.candidatePreviewSection {
-  border-bottom: 1px solid var(--line);
-}
 
-.candidatePreviewRows,
-.candidatePreviewPills {
-  display: grid;
-  gap: 8px;
-  padding: 12px 16px;
-}
 
-.candidatePreviewPills {
-  display: flex;
-}
 
-.candidatePreviewRows a,
-.candidatePreviewRows article {
-  min-width: 0;
-  display: grid;
-  gap: 4px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  color: var(--ink);
-  padding: 10px;
-}
 
-.candidatePreviewRows strong,
-.candidatePreviewRows span,
-.candidatePreviewRows small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.candidatePreviewFullRecord {
-  width: calc(100% - 32px);
-  margin: 16px;
-}
 
 [data-theme="dark"] .candidateSearchHero,
 [data-theme="dark"] .candidateSearchSource,
@@ -7138,67 +4815,14 @@ kbd {
   overflow-y: auto;
 }
 
-.candidateTabEmpty {
-  display: grid;
-  align-content: center;
-  justify-items: center;
-  gap: 8px;
-  padding: 28px;
-  text-align: center;
-}
 
-.candidateTabEmpty strong {
-  font-size: 24px;
-}
 
-.candidateTabEmpty span {
-  max-width: 420px;
-  color: var(--muted);
-  line-height: 1.5;
-}
 
-.candidateSearchOS {
-  gap: 10px;
-}
 
-.candidateSearchHero {
-  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
-  overflow: hidden;
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 58%),
-    var(--surface);
-  padding: 16px;
-}
 
-.candidateSearchHero h2 {
-  max-width: 900px;
-  font-size: clamp(28px, 3.2vw, 48px);
-  line-height: 1.03;
-}
 
-.candidateSearchHeroRail {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-}
 
-.candidateSearchHeroRail article {
-  min-width: 0;
-  display: grid;
-  align-content: end;
-  gap: 5px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--surface) 86%, var(--blue));
-  padding: 12px;
-}
 
-.candidateSearchHeroRail strong {
-  overflow: hidden;
-  font-size: 24px;
-  line-height: 1;
-  text-overflow: ellipsis;
-}
 
 .candidateSearchContext {
   display: grid;
@@ -7313,35 +4937,10 @@ kbd {
   text-decoration: none;
 }
 
-.candidateSearchGrid {
-  grid-template-columns: minmax(220px, 280px) minmax(360px, 0.88fr) minmax(420px, 1.12fr);
-  gap: 10px;
-}
 
-.candidateFacetPanel,
-.candidateResultsPanel,
-.candidatePreviewPanel {
-  border-color: var(--line);
-  background: color-mix(in srgb, var(--surface) 96%, transparent);
-}
 
-.candidateFacetPanel {
-  display: grid;
-  align-content: start;
-  gap: 10px;
-  padding: 10px;
-}
 
-.candidateSearchForm {
-  grid-template-columns: 1fr;
-}
 
-.candidateSearchForm label {
-  color: var(--blue);
-  font-size: 11px;
-  font-weight: 900;
-  text-transform: uppercase;
-}
 
 .candidateSearchCommand .commandLauncher {
   width: 100%;
@@ -7425,11 +5024,6 @@ kbd {
   font-size: 11px;
 }
 
-.candidateResultsPanel {
-  max-height: calc(100svh - 118px);
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-}
 
 .candidateSearchPanel .candidateResultsHeader {
   padding: 9px 12px;
@@ -7467,13 +5061,6 @@ kbd {
   align-content: start;
 }
 
-.candidateResultCard {
-  position: relative;
-  gap: 7px;
-  background: var(--surface);
-  box-shadow: none;
-  padding: 9px 10px;
-}
 
 .candidateResultOpen {
   display: grid;
@@ -7525,11 +5112,6 @@ kbd {
   clip: rect(0 0 0 0);
 }
 
-.candidateResultCard:hover,
-.candidateResultCard.active {
-  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
-  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
-}
 
 .candidateResultMain {
   min-width: 0;
@@ -7591,10 +5173,6 @@ kbd {
   font-size: 11px;
 }
 
-.candidatePreviewPanel {
-  max-height: calc(100svh - 118px);
-  overflow-y: auto;
-}
 
 .candidateProfile {
   display: grid;
@@ -7855,13 +5433,7 @@ kbd {
   font-weight: 600;
 }
 
-.civilIdExpired {
-  color: var(--rose, #e11d48);
-}
 
-.civilIdWarning {
-  color: var(--amber, #d97706);
-}
 
 .civilIdPhotos {
   display: grid;
@@ -7889,26 +5461,8 @@ kbd {
   object-fit: cover;
 }
 
-.civilIdClearVerification {
-  padding-top: 8px;
-  border-top: 1px solid var(--line);
-}
 
-.civilIdClearVerification button {
-  font-size: 13px;
-  padding: 6px 12px;
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  background: var(--surface);
-  color: var(--ink);
-  cursor: pointer;
-}
 
-.civilIdClearVerification button:hover {
-  background: var(--rose);
-  color: #fff;
-  border-color: var(--rose);
-}
 
 [data-theme="dark"] .civilIdPanel {
   border-color: var(--line);
@@ -8510,14 +6064,6 @@ kbd {
   box-shadow: 0 18px 60px rgba(20, 24, 36, 0.06);
 }
 
-.requestNotice {
-  display: grid;
-  gap: 4px;
-  padding: 14px 16px;
-  border-radius: 14px;
-  border-color: rgba(32, 128, 92, 0.22);
-  background: rgba(232, 250, 241, 0.9);
-}
 
 .requestNotice strong,
 .requestHero h2,
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..7f3502f
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/modules/auth/LoginForm.tsx b/src/modules/auth/LoginForm.tsx
index 9d68bda..03c6de1 100644
--- a/src/modules/auth/LoginForm.tsx
+++ b/src/modules/auth/LoginForm.tsx
@@ -51,7 +51,7 @@ export function LoginForm() {
           />
         </div>
 
-        {state.error ? <p className="text-[var(--destructive)] font-bold m-0">{state.error}</p> : null}
+        {state.error ? <p role="alert" aria-live="assertive" className="text-[var(--destructive)] font-bold m-0">{state.error}</p> : null}
 
         <Button type="submit" disabled={pending} size="lg" className="min-h-[52px]">
           <LogIn className="size-4" />
diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx
index b49cf9f..c92845f 100644
--- a/src/modules/dashboard/Dashboard.tsx
+++ b/src/modules/dashboard/Dashboard.tsx
@@ -5,48 +5,48 @@ export async function Dashboard() {
 
   return (
     <>
-      <section className="metrics" aria-label="StudentHub health metrics">
+      <section className="grid grid-cols-4 gap-3 max-[1040px]:grid-cols-1" aria-label="StudentHub health metrics">
         {dashboard.metrics.map((metric) => (
-          <article className="metric" key={metric.label}>
-            <span>{metric.label}</span>
-            <strong>{metric.value.toLocaleString("en-US")}</strong>
-            <p>{metric.note}</p>
+          <article className="min-h-[118px] p-[18px] border border-[var(--line)] bg-[var(--surface)]" key={metric.label}>
+            <span className="text-[var(--blue)] text-[11px] font-black uppercase">{metric.label}</span>
+            <strong className="block text-[38px] leading-none my-4 mx-0">{metric.value.toLocaleString("en-US")}</strong>
+            <p className="text-[var(--faint)] mb-0">{metric.note}</p>
           </article>
         ))}
       </section>
 
-      <section className="workspace">
-        <div className="focus">
+      <section className="grid grid-cols-[minmax(0,1fr)_340px] gap-3 mb-3 max-[1040px]:grid-cols-1">
+        <div className="border border-[var(--line)] bg-[var(--surface)] grid grid-cols-[minmax(0,1fr)_300px] gap-8 p-6">
           <div>
-            <p className="eyebrow">Migration Strategy</p>
-            <h2>Build from the real data model, one clean workflow at a time.</h2>
-            <p>
+            <p className="text-[var(--blue)] text-xs font-bold uppercase m-0 mb-2.5">Migration Strategy</p>
+            <h2 className="max-w-[680px] text-3xl">Build from the real data model, one clean workflow at a time.</h2>
+            <p className="max-w-[760px] leading-relaxed mb-0 text-[var(--muted)]">
               This workspace is reading the local production clone when enabled. Each old portal becomes a
               role-aware surface inside one product.
             </p>
           </div>
-          <div className="statusMix">
+          <div className="grid content-start gap-2">
             {dashboard.statusMix.map((status) => (
-              <div className="statusRow" key={status.label}>
-                <span>{status.label}</span>
+              <div className="flex items-center justify-between gap-4 min-h-11 border-b border-[var(--line)]" key={status.label}>
+                <span className="text-[var(--muted)]">{status.label}</span>
                 <strong>{status.value}</strong>
               </div>
             ))}
           </div>
         </div>
 
-        <div className="rail">
+        <div className="border border-[var(--line)] bg-[var(--surface)] p-6">
           <h2>Next Slices</h2>
-          <ol>
-            <li>Candidate list/detail/edit</li>
-            <li>Company and request pipeline</li>
-            <li>Work logs and approvals</li>
-            <li>Transfer and payroll review</li>
+          <ol className="grid gap-[13px] pl-[22px] mt-[18px] mx-0">
+            <li className="text-[var(--muted)]">Candidate list/detail/edit</li>
+            <li className="text-[var(--muted)]">Company and request pipeline</li>
+            <li className="text-[var(--muted)]">Work logs and approvals</li>
+            <li className="text-[var(--muted)]">Transfer and payroll review</li>
           </ol>
         </div>
       </section>
 
-      <section className="lists">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         <DataList title="Recent Candidates" items={dashboard.recentCandidates} />
         <DataList title="Recent Companies" items={dashboard.recentCompanies} />
         <DataList title="Recent Requests" items={dashboard.recentRequests} />
@@ -68,23 +68,23 @@ type DataListItem = {
 
 function DataList({ title, items }: { title: string; items: DataListItem[] }) {
   return (
-    <section className="dataList">
-      <div className="listHeader">
-        <h2>{title}</h2>
-        <span>{items.length}</span>
+    <section className="border border-[var(--line)] bg-[var(--surface)]">
+      <div className="min-h-[62px] flex items-center justify-between gap-4 px-[18px] py-[18px] pb-3.5 border-b border-[var(--line)]">
+        <h2 className="mb-0">{title}</h2>
+        <span className="min-w-[30px] min-h-[30px] inline-flex items-center justify-center text-[var(--blue)] border border-[#b7cff0] bg-[#eef5ff] font-bold">{items.length}</span>
       </div>
-      <div className="rows">
+      <div className="grid">
         {items.map((item) => (
-          <article className="row" key={item.id}>
-            <div className="rowMain">
-              <strong>{item.title}</strong>
-              <span>{item.subtitle}</span>
+          <article className="min-h-[72px] grid grid-cols-[minmax(0,1fr)_minmax(126px,auto)] gap-4 px-[18px] py-3.5 border-b border-[var(--line)] last:border-b-0" key={item.id}>
+            <div className="min-w-0 grid content-center gap-1.5">
+              <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{item.title}</strong>
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{item.subtitle}</span>
             </div>
-            <div className="rowMeta">
-              <span>{item.meta}</span>
-              {item.amount ? <strong>{item.amount}</strong> : null}
-              {item.count !== undefined ? <strong>{item.count} seats</strong> : null}
-              {item.date ? <small>{item.date}</small> : null}
+            <div className="min-w-0 grid content-center justify-items-end text-right gap-1.5">
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{item.meta}</span>
+              {item.amount ? <strong className="text-[13px]">{item.amount}</strong> : null}
+              {item.count !== undefined ? <strong className="text-[13px]">{item.count} seats</strong> : null}
+              {item.date ? <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{item.date}</small> : null}
             </div>
           </article>
         ))}
diff --git a/src/modules/finance/TransferActionBar.tsx b/src/modules/finance/TransferActionBar.tsx
index c615504..0212495 100644
--- a/src/modules/finance/TransferActionBar.tsx
+++ b/src/modules/finance/TransferActionBar.tsx
@@ -31,8 +31,8 @@ export function TransferActionBar({ data }: { data: TransferDetail }) {
   const isLocked = data.transfer.transfer_status !== 10;
 
   return (
-    <section className="transferActions">
-      <div className="transferActionButtons">
+    <section className="flex flex-col gap-4 mb-6">
+      <div className="flex flex-wrap gap-2 items-center">
         <form action={toggleTransferStatusAction}>
           <input name="transfer_id" type="hidden" value={data.transfer.transfer_id} />
           <Button type="submit" variant={isLocked ? "secondary" : "outline"}>
@@ -58,7 +58,7 @@ export function TransferActionBar({ data }: { data: TransferDetail }) {
             <CardTitle>Candidate Payouts</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="payoutList">
+            <div className="flex flex-col gap-2">
               {data.candidates.map((candidate) => (
                 <CandidatePayoutRow key={candidate.id} candidate={candidate} transferId={data.transfer!.transfer_id} />
               ))}
@@ -74,11 +74,11 @@ function CandidatePayoutRow({ candidate, transferId }: { candidate: TransferDeta
   const isPaid = candidate.meta?.includes("Paid");
 
   return (
-    <div className="payoutRow">
-      <div>
-        <strong>{candidate.title}</strong>
-        <span>{candidate.subtitle}</span>
-        <small>{candidate.meta}</small>
+    <div className="flex items-center justify-between p-2.5 px-3.5 border border-[var(--line)] rounded-lg bg-[var(--surface)]">
+      <div className="flex flex-col gap-0.5 min-w-0">
+        <strong className="text-sm font-semibold text-[var(--ink)]">{candidate.title}</strong>
+        <span className="text-[13px] text-[var(--muted)]">{candidate.subtitle}</span>
+        <small className="text-[13px] text-[var(--muted)]">{candidate.meta}</small>
       </div>
       <form action={toggleCandidatePaidAction}>
         <input name="transfer_id" type="hidden" value={transferId} />
@@ -94,7 +94,7 @@ function CandidatePayoutRow({ candidate, transferId }: { candidate: TransferDeta
 
 function PaymentReceivedForm({ transferId, currentDate }: { transferId: number; currentDate: Date | null }) {
   return (
-    <form action={markPaymentReceivedAction} className="paymentDateForm">
+    <form action={markPaymentReceivedAction} className="flex gap-2 items-center">
       <input name="transfer_id" type="hidden" value={transferId} />
       <Input
         name="received_on"
diff --git a/src/modules/hub/HubContent.tsx b/src/modules/hub/HubContent.tsx
index 10290db..2ed07f9 100644
--- a/src/modules/hub/HubContent.tsx
+++ b/src/modules/hub/HubContent.tsx
@@ -112,14 +112,14 @@ export function HubContent({
   const hubContext = hubContextHref(data.query, data.scope);
 
   const desk = (
-    <section className="commandDesk">
-      <header className="commandTopbar">
-        <div className="commandIdentity">
-          <span>{session.role}</span>
-          <strong>{session.name}</strong>
-          <small>{session.email}</small>
+    <section className="min-w-0 grid grid-rows-[auto_minmax(0,1fr)] min-h-svh">
+      <header className="sticky top-0 z-20 min-h-16 grid grid-cols-[220px_minmax(280px,1fr)_auto] items-center gap-2.5 border-b border-[var(--line)] bg-[color-mix(in_srgb,var(--surface)_90%,transparent)] backdrop-blur-[12px]">
+        <div className="min-w-0 grid gap-0.5">
+          <span className="text-[#667085]">{session.role}</span>
+          <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{session.name}</strong>
+          <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[#667085]">{session.email}</small>
         </div>
-        <form className="commandSearch">
+        <form className="grid grid-cols-[minmax(0,1fr)_auto] overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)] focus-within:border-[#8bb4ea] focus-within:shadow-[0_0_0_3px_rgba(11,99,206,0.12)]">
           <input
             aria-label="Find records"
             data-command-search
@@ -127,91 +127,112 @@ export function HubContent({
             id="hub-search"
             name="q"
             placeholder="Search candidates, companies, requests, transfers, ID batches"
+            className="min-w-0 h-[42px] border-0 bg-transparent text-[var(--ink)] px-[13px] font-[inherit] focus:outline-0"
           />
           <input type="hidden" name="scope" value={data.scope} />
-          <button type="submit">Search</button>
+          <button type="submit" className="border-0 border-l border-[var(--line)] bg-[var(--surface-soft)] text-[var(--ink)] px-3.5 font-black cursor-pointer dark:border-[var(--line)] dark:bg-[var(--surface-soft)] dark:text-[var(--ink)]">Search</button>
         </form>
         {embedded ? null : <HubShortcuts commands={commands} />}
       </header>
 
-      <section className="journeyHome">
+      <section className="w-[min(100%,1500px)] min-w-0 min-h-0 overflow-y-auto grid content-start gap-3 mx-auto p-3.5">
         {requiredRole && requiredRole !== session.role ? (
-          <section className="roleBoundaryNotice" aria-label="Role access notice">
-            <div>
-              <span>Access boundary</span>
-              <strong>
+          <section className="flex items-center justify-between gap-3.5 border border-[#f3c2d3] rounded-lg bg-[#fff8fb] p-3.5 px-4 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" aria-label="Role access notice">
+            <div className="grid gap-1">
+              <span className="text-[var(--rose)] text-[11px] font-black uppercase">Access boundary</span>
+              <strong className="text-[#101828] dark:text-[var(--ink)]">
                 You are signed in as {session.role}, not {requiredRole}.
               </strong>
-              <p>
+              <p className="text-[var(--muted)] m-0">
                 Use the matching production credentials to enter that workspace. This keeps candidate, staff, company, and
                 admin data separated.
               </p>
             </div>
-            <Link href="/login">Switch account</Link>
+            <Link href="/login" className="min-h-[38px] inline-flex items-center border border-[#e8a6bd] rounded-lg bg-white text-[var(--rose)] px-3 font-black no-underline dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">Switch account</Link>
           </section>
         ) : null}
 
-        <section className="journeyHero">
+        <section className="grid grid-cols-[minmax(0,1fr)_minmax(250px,340px)] gap-3.5 border border-[var(--line)] rounded-lg bg-[linear-gradient(135deg,color-mix(in_srgb,var(--surface)_96%,var(--blue)),var(--surface))] p-4 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
           <div>
-            <span className="journeyEyebrow">Start here</span>
-            <h1>{guide.title}</h1>
-            <p>{guide.description}</p>
-            <div className="journeyHeroActions">
-              <Link className="primary" href={guide.primary.href}>
+            <span className="text-[#667085] text-[11px] font-black uppercase">Start here</span>
+            <h1 className="max-w-[860px] text-[var(--ink)] text-[30px] leading-[1.06] my-1.5 mb-2.5">{guide.title}</h1>
+            <p className="max-w-[780px] text-[var(--muted)] text-[15px] leading-[1.5] m-0">{guide.description}</p>
+            <div className="flex flex-wrap gap-2.5 mt-[18px]">
+              <Link
+                className="min-h-10 inline-flex items-center justify-center border border-[var(--primary)] rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] px-[13px] font-black no-underline hover:border-[#0b63ce] hover:text-[#0b63ce] hover:bg-[#eef5ff]"
+                href={guide.primary.href}
+              >
                 {guide.primary.label}
               </Link>
-              <Link href={hubContext}>Open focused search</Link>
+              <Link
+                className="min-h-10 inline-flex items-center justify-center border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] text-[var(--ink)] px-[13px] font-black no-underline hover:border-[#0b63ce] hover:text-[#0b63ce] hover:bg-[#eef5ff]"
+                href={hubContext}
+              >
+                Open focused search
+              </Link>
             </div>
           </div>
-          <aside className="journeyGuardrail">
-            <span>Signed in as {session.role}</span>
-            <strong>{session.name}</strong>
-            <p>{guide.guardrail}</p>
+          <aside className="grid content-start gap-[7px] border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] p-3.5 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+            <span className="text-[#667085] text-[11px] font-black uppercase">Signed in as {session.role}</span>
+            <strong className="text-[var(--ink)] text-lg">{session.name}</strong>
+            <p className="text-[var(--muted)] text-[13px] leading-[1.45]">{guide.guardrail}</p>
           </aside>
         </section>
 
-        <section className="journeyGrid" aria-label={`${session.role} workflows`}>
+        <section className="grid grid-cols-[repeat(auto-fit,minmax(230px,1fr))] gap-2.5" aria-label={`${session.role} workflows`}>
           {guide.journeys.map((journey) => (
-            <article className="journeyCard" key={journey.title}>
-              <div className="journeyCardHeader">
-                <span>{journey.kicker}</span>
-                <strong>{journey.title}</strong>
-                <p>{journey.description}</p>
+            <article className="min-w-0 grid grid-rows-[auto_minmax(0,1fr)_auto] gap-2.5 border border-[var(--line)] rounded-lg bg-[var(--surface)] p-3 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" key={journey.title}>
+              <div className="grid gap-[7px]">
+                <span className="text-[#667085] text-[11px] font-black uppercase">{journey.kicker}</span>
+                <strong className="text-[var(--ink)] text-[17px] leading-[1.15]">{journey.title}</strong>
+                <p className="text-[var(--muted)] text-[13px] leading-[1.45] m-0">{journey.description}</p>
               </div>
-              <ol className="journeySteps">
+              <ol className="grid gap-2 list-none m-0 p-0">
                 {journey.steps.map((step, index) => (
-                  <li key={step}>
-                    <span>{index + 1}</span>
-                    <strong>{step}</strong>
+                  <li className="min-w-0 grid grid-cols-[24px_minmax(0,1fr)] items-center gap-2" key={step}>
+                    <span className="w-6 h-6 inline-flex items-center justify-center rounded-full bg-[#eef2f7] text-[#344054] text-xs font-black">{index + 1}</span>
+                    <strong className="min-w-0 text-[#344054] text-[13px] leading-[1.3]">{step}</strong>
                   </li>
                 ))}
               </ol>
-              <Link href={journey.href}>{journey.action}</Link>
+              <Link
+                className="min-h-10 inline-flex items-center justify-center border border-[var(--primary)] rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] px-[13px] font-black no-underline hover:border-[#0b63ce] hover:text-[#0b63ce] hover:bg-[#eef5ff]"
+                href={journey.href}
+              >
+                {journey.action}
+              </Link>
             </article>
           ))}
         </section>
 
-        <section className="journeyWorkbench" aria-label="Search and live queues">
-          <div className="journeyPanel">
-            <div className="journeyPanelHeader">
-              <span>Live queues</span>
-              <strong>What needs attention</strong>
+        <section className="grid grid-cols-[minmax(260px,0.68fr)_minmax(380px,1.32fr)] gap-2.5" aria-label="Search and live queues">
+          <div className="min-w-0 overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+            <div className="grid gap-1 border-b border-[var(--line)] px-3.5 py-3">
+              <span className="text-[#667085] text-[11px] font-black uppercase">Live queues</span>
+              <strong className="text-[var(--ink)] text-[17px] leading-[1.15]">What needs attention</strong>
             </div>
-            <div className="journeyQueueGrid">
+            <div className="grid grid-cols-2">
               {data.queues.map((queue) => {
                 const content = (
                   <>
-                    <span>{queue.label}</span>
-                    <strong>{queue.value.toLocaleString("en-US")}</strong>
-                    <small>{queue.note}</small>
+                    <span className="text-[#667085] text-[11px] font-black uppercase">{queue.label}</span>
+                    <strong className="text-[var(--ink)] text-2xl leading-none">{queue.value.toLocaleString("en-US")}</strong>
+                    <small className="text-[#667085] text-xs leading-[1.35]">{queue.note}</small>
                   </>
                 );
                 return queue.href ? (
-                  <Link className="journeyQueue" href={queue.href as Route} key={queue.label}>
+                  <Link
+                    className="min-w-0 min-h-[104px] grid content-center gap-[5px] border-r border-b border-[var(--line)] text-[var(--ink)] p-3 no-underline [&:nth-child(2n)]:border-r-0 hover:bg-[var(--surface-soft)] dark:border-[var(--line)] dark:bg-[var(--surface-soft)] dark:text-[var(--ink)]"
+                    href={queue.href as Route}
+                    key={queue.label}
+                  >
                     {content}
                   </Link>
                 ) : (
-                  <article className="journeyQueue" key={queue.label}>
+                  <article
+                    className="min-w-0 min-h-[104px] grid content-center gap-[5px] border-r border-b border-[var(--line)] text-[var(--ink)] p-3 [&:nth-child(2n)]:border-r-0 dark:border-[var(--line)] dark:bg-[var(--surface-soft)] dark:text-[var(--ink)]"
+                    key={queue.label}
+                  >
                     {content}
                   </article>
                 );
@@ -219,17 +240,17 @@ export function HubContent({
             </div>
           </div>
 
-          <div className="journeyPanel">
-            <div className="journeyPanelHeader">
-              <span>{data.scope}</span>
-              <strong>{data.query ? `Search results for ${data.query}` : "Find a record"}</strong>
+          <div className="min-w-0 overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
+            <div className="grid gap-1 border-b border-[var(--line)] px-3.5 py-3">
+              <span className="text-[#667085] text-[11px] font-black uppercase">{data.scope}</span>
+              <strong className="text-[var(--ink)] text-[17px] leading-[1.15]">{data.query ? `Search results for ${data.query}` : "Find a record"}</strong>
             </div>
-            <nav className="journeyScopePills" aria-label="Search scopes">
+            <nav className="flex gap-2 overflow-x-auto border-b border-[var(--line)] px-3 py-2.5" aria-label="Search scopes">
               {data.scopes.map((item) => {
                 const query = data.query ? `&q=${encodeURIComponent(data.query)}` : "";
                 return (
                   <Link
-                    className={item.value === data.scope ? "active" : ""}
+                    className={`min-h-8 inline-flex items-center border border-[var(--line)] rounded-lg text-[var(--ink)] px-[11px] text-[13px] font-extrabold no-underline whitespace-nowrap dark:border-[var(--line)] dark:bg-[var(--surface-soft)] dark:text-[var(--ink)] hover:border-[#0b63ce] hover:bg-[#eef5ff] hover:text-[#0b63ce] ${item.value === data.scope ? "border-[#0b63ce] bg-[#eef5ff] text-[#0b63ce]" : ""}`}
                     href={`/app?scope=${item.value}${query}` as Route}
                     key={item.value}
                   >
@@ -238,15 +259,19 @@ export function HubContent({
                 );
               })}
             </nav>
-            <div className="journeyResults">
+            <div className="grid p-2">
               {data.results.slice(0, 6).map((result) => (
-                <Link href={hubRecordHref(data.query, data.scope, result.id)} key={result.id}>
-                  <span>{result.type}</span>
-                  <strong>{result.title}</strong>
-                  <small>{result.meta}</small>
+                <Link
+                  className="min-w-0 grid grid-cols-[90px_minmax(0,1fr)_minmax(120px,230px)] items-center gap-3 rounded-lg text-[var(--ink)] p-2.5 no-underline hover:bg-[var(--surface-soft)]"
+                  href={hubRecordHref(data.query, data.scope, result.id)}
+                  key={result.id}
+                >
+                  <span className="text-[#667085] text-[11px] font-black uppercase">{result.type}</span>
+                  <strong className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{result.title}</strong>
+                  <small className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[#667085] text-xs">{result.meta}</small>
                 </Link>
               ))}
-              {data.results.length === 0 ? <p>No matching records for this login and scope.</p> : null}
+              {data.results.length === 0 ? <p className="text-[#667085] text-xs m-0 p-2.5">No matching records for this login and scope.</p> : null}
             </div>
           </div>
 
@@ -261,67 +286,79 @@ export function HubContent({
 
 function RecordPreview({ preview }: { preview: HubPreview }) {
   return (
-    <section className="journeyPanel previewPanel" aria-label="Selected record preview">
-      <div className="previewHeader">
-        <span>{preview.type}</span>
-        <h2>{preview.title}</h2>
-        <p>{preview.subtitle}</p>
-        <small>{preview.meta}</small>
+    <section className="min-w-0 overflow-hidden border border-[var(--line)] rounded-lg bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" aria-label="Selected record preview">
+      <div className="grid gap-[7px] p-[18px] border-b border-[var(--line)]">
+        <span className="text-[var(--blue)] text-[11px] font-black uppercase">{preview.type}</span>
+        <h2 className="[overflow-wrap:anywhere] mb-0 text-[28px]">{preview.title}</h2>
+        <p className="[overflow-wrap:anywhere] text-[var(--muted)]">{preview.subtitle}</p>
+        <small className="[overflow-wrap:anywhere] text-[var(--muted)]">{preview.meta}</small>
       </div>
 
       {preview.flags.length ? (
-        <div className="previewFlags">
+        <div className="flex flex-wrap gap-2 px-[18px] py-3 border-b border-[var(--line)]">
           {preview.flags.map((flag) => (
-            <span key={flag}>{flag}</span>
+            <span className="min-h-7 inline-flex items-center border border-[#b7cff0] bg-[#eef5ff] rounded-[7px] text-[var(--blue)] px-[9px] text-[13px] dark:border-[color-mix(in_srgb,var(--blue)_42%,var(--line))] dark:bg-[color-mix(in_srgb,var(--blue)_14%,var(--surface))]" key={flag}>{flag}</span>
           ))}
         </div>
       ) : null}
 
       {preview.actions.length ? (
-        <div className="previewActions">
-          {preview.actions.map((action) => (
-            <a href={action.href} key={`${action.label}-${action.href}`}>
+        <div className="flex flex-wrap gap-2 px-[18px] py-3 border-b border-[var(--line)]">
+          {preview.actions.map((action, i) => (
+            <a
+              className={`min-h-[38px] inline-flex items-center justify-center rounded-lg px-3 font-black no-underline hover:border-[#0b63ce] hover:text-[#0b63ce] hover:bg-[#eef5ff] ${
+                i === 0
+                  ? "border border-[var(--blue)] bg-[var(--blue)] text-white dark:bg-[var(--surface-soft)] dark:text-[var(--ink)]"
+                  : "border border-[var(--line)] bg-[#fbfcfe] text-[var(--ink)] dark:bg-[var(--surface-soft)] dark:text-[var(--ink)]"
+              }`}
+              href={action.href}
+              key={`${action.label}-${action.href}`}
+            >
               {action.label}
             </a>
           ))}
         </div>
       ) : null}
 
-      <div className="previewFacts">
+      <div className="grid grid-cols-2 border-b border-[var(--line)] max-md:grid-cols-1">
         {preview.facts.map((fact) => (
-          <div key={fact.label}>
-            <span>{fact.label}</span>
-            <strong>{fact.value}</strong>
+          <div className="min-w-0 grid gap-1.5 p-[13px] px-[18px] border-r border-b border-[var(--line)] [&:nth-child(2n)]:border-r-0 max-md:border-r-0" key={fact.label}>
+            <span className="text-[var(--muted)] text-[11px] font-black uppercase">{fact.label}</span>
+            <strong className="[overflow-wrap:anywhere] text-sm">{fact.value}</strong>
           </div>
         ))}
       </div>
 
       {preview.related.length ? (
-        <div className="previewRelated">
+        <div className="grid">
           {preview.related.map((section) => (
-            <section key={section.title}>
-              <div className="previewRelatedHeader">
-                <span>Related</span>
-                <h3>{section.title}</h3>
+            <section className="border-b border-[var(--line)] last:border-b-0" key={section.title}>
+              <div className="flex items-center justify-between gap-2.5 px-[18px] pt-[13px] pb-2">
+                <span className="text-[var(--muted)] text-[11px] font-black uppercase">Related</span>
+                <h3 className="m-0 text-[15px]">{section.title}</h3>
               </div>
               {section.rows.length ? (
                 section.rows.map((row) =>
                   row.href ? (
-                    <Link className="previewRow" href={row.href} key={row.id}>
-                      <strong>{row.title}</strong>
-                      <span>{row.subtitle}</span>
-                      <small>{row.meta}</small>
+                    <Link
+                      className="grid gap-1 px-[18px] py-[11px] text-[var(--ink)] no-underline hover:bg-[#fbfcfe] dark:hover:bg-[var(--surface-soft)] dark:hover:text-[var(--ink)]"
+                      href={row.href}
+                      key={row.id}
+                    >
+                      <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.subtitle}</span>
+                      <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.meta}</small>
                     </Link>
                   ) : (
-                    <article className="previewRow" key={row.id}>
-                      <strong>{row.title}</strong>
-                      <span>{row.subtitle}</span>
-                      <small>{row.meta}</small>
+                    <article className="grid gap-1 px-[18px] py-[11px] text-[var(--ink)]" key={row.id}>
+                      <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.subtitle}</span>
+                      <small className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.meta}</small>
                     </article>
                   )
                 )
               ) : (
-                <p className="previewEmpty">No related records visible to this login.</p>
+                <p className="text-[var(--muted)] m-0 px-[18px] pb-3.5">No related records visible to this login.</p>
               )}
             </section>
           ))}
diff --git a/src/modules/workspace/DataTable.tsx b/src/modules/workspace/DataTable.tsx
index 664a9cf..6202286 100644
--- a/src/modules/workspace/DataTable.tsx
+++ b/src/modules/workspace/DataTable.tsx
@@ -1,6 +1,14 @@
 import type { ReactNode } from "react";
 import type { Route } from "next";
 import Link from "next/link";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell
+} from "@/components/ui/table";
 
 export type DataTableColumn<T> = {
   key: string;
@@ -22,52 +30,57 @@ export function DataTable<T extends { id: string | number }>({
   rowHref?: (row: T) => Route;
 }) {
   return (
-    <section className="tableSurface">
-      <div className="tableHeader">
+    <section className="border border-[#dfe4ed] rounded-lg bg-white dark:border-[var(--line)] dark:bg-[var(--surface)]">
+      <div className="min-h-[76px] flex items-center justify-between gap-[18px] p-[18px] border-b border-[var(--line)]">
         <div>
-          <h2>{title}</h2>
-          <p>{description}</p>
+          <h2 className="mb-1">{title}</h2>
+          <p className="text-[var(--muted)] mb-0">{description}</p>
         </div>
-        <span>{rows.length} shown</span>
+        <span className="text-[var(--muted)] text-[13px] font-bold">{rows.length} shown</span>
       </div>
-      <div className="tableScroller">
-        <table>
-          <thead>
-            <tr>
+      <div className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
               {columns.map((column) => (
-                <th key={column.key}>{column.label}</th>
+                <TableHead key={column.key}>{column.label}</TableHead>
               ))}
-              {rowHref ? <th aria-label="Open record" /> : null}
-            </tr>
-          </thead>
-          <tbody>
+              {rowHref ? <TableHead aria-label="Open record" /> : null}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
             {rows.length ? (
               rows.map((row) => (
-                <tr key={row.id}>
+                <TableRow key={row.id}>
                   {columns.map((column) => (
-                    <td data-label={column.label} key={column.key}>
+                    <TableCell data-label={column.label} key={column.key}>
                       {column.render(row)}
-                    </td>
+                    </TableCell>
                   ))}
                   {rowHref ? (
-                    <td className="rowAction" data-label="Action">
-                      <Link href={rowHref(row)}>Open</Link>
-                    </td>
+                    <TableCell className="w-[1%] whitespace-nowrap" data-label="Action">
+                      <Link
+                        className="inline-flex min-h-9 items-center justify-center border border-[var(--line)] px-3.5 text-[var(--blue)] text-[13px] font-extrabold no-underline hover:border-[var(--blue)] hover:bg-[#eef5ff]"
+                        href={rowHref(row)}
+                      >
+                        Open
+                      </Link>
+                    </TableCell>
                   ) : null}
-                </tr>
+                </TableRow>
               ))
             ) : (
-              <tr className="emptyTableRow">
-                <td colSpan={columns.length + (rowHref ? 1 : 0)}>
-                  <div className="emptyState">
-                    <strong>No records found</strong>
+              <TableRow>
+                <TableCell className="p-0" colSpan={columns.length + (rowHref ? 1 : 0)}>
+                  <div className="grid gap-1.5 p-[18px] text-[var(--muted)]">
+                    <strong className="text-[var(--ink)] text-[15px]">No records found</strong>
                     <span>This view is connected to the prod clone, but this account has no matching rows yet.</span>
                   </div>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             )}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
     </section>
   );
diff --git a/src/modules/workspace/DetailPanels.tsx b/src/modules/workspace/DetailPanels.tsx
index 7663520..d5d7209 100644
--- a/src/modules/workspace/DetailPanels.tsx
+++ b/src/modules/workspace/DetailPanels.tsx
@@ -16,13 +16,16 @@ type Row = {
 
 export function FactPanel({ title, facts }: { title: string; facts: Fact[] }) {
   return (
-    <section className="detailPanel">
-      <h2>{title}</h2>
-      <div className="factGrid">
+    <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+      <h2 className="m-0 p-[18px] border-b border-[var(--line)]">{title}</h2>
+      <div className="grid grid-cols-4">
         {facts.map((fact) => (
-          <div className="fact" key={fact.label}>
-            <span>{fact.label}</span>
-            <strong>{fact.value || "Not set"}</strong>
+          <div
+            className="min-h-[88px] px-[18px] py-4 border-r border-b border-[var(--line)] [&:nth-child(4n)]:border-r-0"
+            key={fact.label}
+          >
+            <span className="block mb-2 text-[var(--muted)] text-xs font-extrabold uppercase">{fact.label}</span>
+            <strong className="block break-words text-[15px]">{fact.value ?? "Not set"}</strong>
           </div>
         ))}
       </div>
@@ -32,30 +35,45 @@ export function FactPanel({ title, facts }: { title: string; facts: Fact[] }) {
 
 export function CompactList({ title, rows }: { title: string; rows: Row[] }) {
   return (
-    <section className="detailPanel">
-      <div className="listHeader compact">
-        <h2>{title}</h2>
-        <span>{rows.length}</span>
+    <section className="mt-5 border border-[var(--line)] bg-[var(--surface)]">
+      <div className="min-h-14 flex items-center justify-between gap-4 px-[18px] py-[18px] pb-3.5 border-b border-[var(--line)]">
+        <h2 className="mb-0">{title}</h2>
+        <span className="min-w-[30px] min-h-[30px] inline-flex items-center justify-center text-[var(--blue)] border border-[#b7cff0] bg-[#eef5ff] font-bold">
+          {rows.length}
+        </span>
       </div>
-      <div className="rows compactRows">
+      <div className="grid">
         {rows.length ? (
           rows.map((row) => (
-            <article className="row" key={row.id}>
-              <div className="rowMain">
+            <article
+              className={`min-h-[72px] grid ${row.meta ? "grid-cols-[minmax(0,1fr)_minmax(126px,auto)]" : "grid-cols-[minmax(0,1fr)]"} gap-4 px-[18px] py-3.5 border-b border-[var(--line)] last:border-b-0`}
+              key={row.id}
+            >
+              <div className="min-w-0 grid content-center gap-1.5">
                 {row.href ? (
-                  <Link href={row.href as Route}>
-                    <strong>{row.title}</strong>
+                  <Link
+                    className="text-inherit no-underline hover:text-[var(--blue)] hover:underline hover:underline-offset-[3px]"
+                    href={row.href as Route}
+                  >
+                    <strong className="block overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
                   </Link>
                 ) : (
-                  <strong>{row.title}</strong>
+                  <strong className="block overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
                 )}
-                <span>{row.subtitle}</span>
+                <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.subtitle}</span>
               </div>
-              {row.meta ? <div className="rowMeta">{row.meta}</div> : null}
+              {row.meta ? (
+                <div className="min-w-0 grid content-center justify-items-end text-right gap-1.5">
+                  <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.meta}</span>
+                </div>
+              ) : null}
             </article>
           ))
         ) : (
-          <p className="emptyState">No imported records found here yet.</p>
+          <p className="grid gap-1.5 p-[18px] text-[var(--muted)]">
+            <strong className="text-[var(--ink)] text-[15px]">No records found</strong>
+            No imported records found here yet.
+          </p>
         )}
       </div>
     </section>
diff --git a/src/modules/workspace/FeatureGrid.tsx b/src/modules/workspace/FeatureGrid.tsx
index 6bbc26c..28b0ca7 100644
--- a/src/modules/workspace/FeatureGrid.tsx
+++ b/src/modules/workspace/FeatureGrid.tsx
@@ -3,11 +3,18 @@ import type { NavItem } from "./navigation";
 
 export function FeatureGrid({ items }: { items: NavItem[] }) {
   return (
-    <section className="featureGrid" aria-label="Workspace features">
+    <section
+      className="grid grid-cols-4 gap-3 pt-5 max-[1040px]:grid-cols-1"
+      aria-label="Workspace features"
+    >
       {items.map((item) => (
-        <Link className="featureTile" href={item.href} key={item.href}>
-          <span>{item.label}</span>
-          <strong>Open</strong>
+        <Link
+          className="min-h-28 grid content-between border border-[var(--line)] border-t-[4px] border-t-[var(--blue)] bg-[var(--surface)] text-[var(--ink)] p-4 no-underline shadow-[0_10px_36px_rgba(16,24,40,0.04)] hover:border-[#9fb9db] hover:shadow-[0_18px_54px_rgba(16,24,40,0.09)] hover:-translate-y-px transition-[transform,box-shadow,border-color] duration-160"
+          href={item.href}
+          key={item.href}
+        >
+          <span className="text-lg font-bold">{item.label}</span>
+          <strong className="text-[var(--blue)] text-[13px]">Open</strong>
         </Link>
       ))}
     </section>
diff --git a/src/modules/workspace/Skeletons.tsx b/src/modules/workspace/Skeletons.tsx
index 7006c8f..b7541ca 100644
--- a/src/modules/workspace/Skeletons.tsx
+++ b/src/modules/workspace/Skeletons.tsx
@@ -2,57 +2,52 @@
 
 import { Skeleton } from "@/components/ui/skeleton";
 
-/** Full-page skeleton matching the WorkspaceShell layout for route transitions. */
 export function WorkspaceShellSkeleton({ rowCount = 8 }: { rowCount?: number }) {
   return (
-    <main className="shell shellEmbedded">
-      <section className="workspaceStage">
-        {/* Topbar */}
-        <section className="topbar">
+    <main className="block min-h-0">
+      <section className="min-w-0 w-[calc(100vw-236px)] overflow-x-hidden grid content-start gap-3.5 p-3.5 max-md:w-auto max-md:p-2.5 max-md:pb-[76px]">
+        <section className="grid grid-cols-[minmax(0,1fr)_minmax(220px,300px)] items-center gap-[18px] border border-[#dfe4ed] rounded-lg bg-[color-mix(in_srgb,var(--surface)_92%,transparent)] p-4">
           <div>
             <Skeleton className="h-3 w-24 mb-2" />
             <Skeleton className="h-7 w-64" />
           </div>
-          <div className="accountBox">
+          <div className="min-w-0 grid gap-1.5 p-3.5 border border-[var(--line)] bg-[var(--surface)] rounded-lg">
             <Skeleton className="h-3 w-12" />
             <Skeleton className="h-4 w-28" />
             <Skeleton className="h-3 w-40" />
           </div>
         </section>
-
-        {/* Metrics */}
-        <section className="metrics" aria-label="Loading metrics">
+        <section className="grid grid-cols-4 gap-3 max-[1040px]:grid-cols-1" aria-label="Loading metrics">
           {[1, 2, 3, 4].map((i) => (
-            <article className="metric" key={i}>
+            <article className="min-h-[118px] p-[18px] border border-[var(--line)] bg-[var(--surface)]" key={i}>
               <Skeleton className="h-3 w-16 mb-2" />
               <Skeleton className="h-9 w-20 mb-1" />
               <Skeleton className="h-3 w-12" />
             </article>
           ))}
         </section>
-
-        {/* Content area */}
-        <div className="skeletonContent" style={{ padding: "18px 22px", display: "grid", gap: 14 }}>
+        <div className="px-[22px] py-[18px] grid gap-3.5">
           <Skeleton className="h-6 w-48" />
           <Skeleton className="h-40 w-full rounded-lg" />
         </div>
-
-        {/* Data lists */}
-        <section className="lists">
+        <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
           {[1, 2].map((col) => (
-            <section className="dataList" key={col}>
-              <div className="listHeader">
+            <section className="border border-[var(--line)] bg-[var(--surface)]" key={col}>
+              <div className="min-h-[62px] flex items-center justify-between gap-4 px-[18px] py-[18px] pb-3.5 border-b border-[var(--line)]">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-5 w-8 rounded-full" />
               </div>
-              <div className="rows">
+              <div className="grid">
                 {Array.from({ length: rowCount }).map((_, i) => (
-                  <article className="row" key={i}>
-                    <div className="rowMain">
+                  <article
+                    className="min-h-[72px] grid grid-cols-[minmax(0,1fr)_minmax(126px,auto)] gap-4 px-[18px] py-3.5 border-b border-[var(--line)] last:border-b-0"
+                    key={i}
+                  >
+                    <div className="min-w-0 grid content-center gap-1.5">
                       <Skeleton className="h-4 w-48 mb-1" />
                       <Skeleton className="h-3 w-64" />
                     </div>
-                    <div className="rowMeta">
+                    <div className="min-w-0 grid content-center justify-items-end text-right gap-1.5">
                       <Skeleton className="h-3 w-16" />
                     </div>
                   </article>
@@ -66,26 +61,19 @@ export function WorkspaceShellSkeleton({ rowCount = 8 }: { rowCount?: number })
   );
 }
 
-/** Skeleton for data-table list pages. */
 export function DataTableSkeleton({ rows = 10 }: { rows?: number }) {
   return (
-    <div className="skeletonTable" style={{ padding: "18px 22px", display: "grid", gap: 12 }}>
-      {/* Header */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
+    <div className="px-[22px] py-[18px] grid gap-3">
+      <div className="flex justify-between items-center mb-2">
         <Skeleton className="h-7 w-40" />
         <Skeleton className="h-9 w-28 rounded-lg" />
       </div>
-
-      {/* Filter/search bar */}
-      <div style={{ display: "flex", gap: 10, marginBottom: 4 }}>
+      <div className="flex gap-2.5 mb-1">
         <Skeleton className="h-9 flex-1 rounded-lg" />
         <Skeleton className="h-9 w-24 rounded-lg" />
       </div>
-
-      {/* Rows */}
-      <div style={{ display: "grid", gap: 1 }}>
-        {/* Header row */}
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 120px 100px", gap: 12, padding: "10px 14px" }}>
+      <div className="grid gap-px">
+        <div className="grid grid-cols-[1fr_1fr_120px_100px] gap-3 px-3.5 py-2.5">
           <Skeleton className="h-3 w-20" />
           <Skeleton className="h-3 w-24" />
           <Skeleton className="h-3 w-16" />
@@ -94,13 +82,7 @@ export function DataTableSkeleton({ rows = 10 }: { rows?: number }) {
         {Array.from({ length: rows }).map((_, i) => (
           <div
             key={i}
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr 120px 100px",
-              gap: 12,
-              padding: "12px 14px",
-              borderTop: "1px solid var(--line)"
-            }}
+            className="grid grid-cols-[1fr_1fr_120px_100px] gap-3 px-3.5 py-3 border-t border-[var(--line)]"
           >
             <Skeleton className="h-4 w-44" />
             <Skeleton className="h-3 w-56" />
@@ -113,23 +95,20 @@ export function DataTableSkeleton({ rows = 10 }: { rows?: number }) {
   );
 }
 
-/** Compact skeleton for detail pages with fact panels. */
 export function DetailPageSkeleton({ panels = 3 }: { panels?: number }) {
   return (
-    <div style={{ padding: "18px 22px", display: "grid", gap: 14 }}>
-      {/* Action bar placeholder */}
+    <div className="p-[22px] grid gap-3.5">
       <Skeleton className="h-32 w-full rounded-lg" />
-
-      {/* Hero section */}
       <Skeleton className="h-56 w-full rounded-lg" />
-
-      {/* Fact panels */}
-      <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(panels, 2)}, 1fr)`, gap: 12 }}>
+      <div
+        className="grid gap-3"
+        style={{ gridTemplateColumns: `repeat(${Math.min(panels, 2)}, 1fr)` }}
+      >
         {Array.from({ length: panels }).map((_, i) => (
-          <div key={i} style={{ display: "grid", gap: 8, padding: 16, border: "1px solid var(--line)", borderRadius: 10 }}>
+          <div key={i} className="grid gap-2 p-4 border border-[var(--line)] rounded-[10px]">
             <Skeleton className="h-4 w-24" />
             {[1, 2, 3, 4].map((r) => (
-              <div key={r} style={{ display: "flex", justifyContent: "space-between" }}>
+              <div key={r} className="flex justify-between">
                 <Skeleton className="h-3 w-16" />
                 <Skeleton className="h-3 w-32" />
               </div>
@@ -137,11 +116,9 @@ export function DetailPageSkeleton({ panels = 3 }: { panels?: number }) {
           </div>
         ))}
       </div>
-
-      {/* Related lists */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
+      <div className="grid grid-cols-2 gap-3">
         {[1, 2].map((col) => (
-          <div key={col} style={{ display: "grid", gap: 4, padding: 16, border: "1px solid var(--line)", borderRadius: 10 }}>
+          <div key={col} className="grid gap-1 p-4 border border-[var(--line)] rounded-[10px]">
             <Skeleton className="h-4 w-32 mb-2" />
             {[1, 2, 3, 4].map((r) => (
               <Skeleton key={r} className="h-10 w-full" />
@@ -153,10 +130,9 @@ export function DetailPageSkeleton({ panels = 3 }: { panels?: number }) {
   );
 }
 
-/** Lightweight top-of-page pulse skeleton for Suspense fallbacks. */
 export function QuickSkeleton({ lines = 4 }: { lines?: number }) {
   return (
-    <div style={{ padding: "14px 22px", display: "grid", gap: 8 }}>
+    <div className="py-3.5 px-[22px] grid gap-2">
       {Array.from({ length: lines }).map((_, i) => (
         <Skeleton key={i} className={`h-${i === 0 ? 5 : 3} w-${i === 0 ? 48 : 36}`} />
       ))}
diff --git a/src/modules/workspace/SlidePanel.tsx b/src/modules/workspace/SlidePanel.tsx
index 9c47f75..7e9e0ce 100644
--- a/src/modules/workspace/SlidePanel.tsx
+++ b/src/modules/workspace/SlidePanel.tsx
@@ -13,48 +13,27 @@ import {
   SheetBody,
 } from "@/components/ui/sheet";
 
-// ── Types ──────────────────────────────────────────────────
-
 export type SlidePanelSide = "top" | "right" | "bottom" | "left";
 
 export type SlidePanelProps = {
-  /** Controlled: whether the panel is open. */
   open?: boolean;
-  /** Controlled: callback when open state changes. */
   onOpenChange?: (open: boolean) => void;
-
-  /** The side from which the panel slides in. Default: "right". */
   side?: SlidePanelSide;
-  /** Panel title (rendered in SheetHeader). */
   title?: string;
-  /** Optional subtitle line below the title. */
   description?: string;
-  /** Small eyebrow label above the title. */
   eyebrow?: string;
-
-  /** Main panel body content. */
   children?: React.ReactNode;
-  /** Content rendered in the sticky footer at the bottom. */
   footer?: React.ReactNode;
-
-  /** Extra classes for the sheet content wrapper. */
   className?: string;
-
-  /** Whether to show the built-in X close button. Default: true. */
   showCloseButton?: boolean;
 };
 
-// ── Trigger convenience ────────────────────────────────────
-
 export type SlidePanelTriggerProps = {
   children: React.ReactNode;
-  /** When true, renders the trigger as a child wrapper instead of a button. */
   asChild?: boolean;
   className?: string;
 };
 
-// ── Hook: uncontrolled open state ──────────────────────────
-
 export function useSlidePanel(defaultOpen = false) {
   const [open, setOpen] = useState(defaultOpen);
   const toggle = useCallback(() => setOpen((prev) => !prev), []);
@@ -63,8 +42,6 @@ export function useSlidePanel(defaultOpen = false) {
   return { open, onOpenChange: setOpen, toggle, close, show };
 }
 
-// ── SlidePanel Component ───────────────────────────────────
-
 export function SlidePanel({
   open,
   onOpenChange,
@@ -84,16 +61,20 @@ export function SlidePanel({
         showCloseButton={showCloseButton}
         className={className}
       >
-        <div className="slidePanel">
+        <div>
           {title || eyebrow || description ? (
             <SheetHeader>
-              {eyebrow ? <p className="eyebrow">{eyebrow}</p> : null}
+              {eyebrow ? (
+                <p className="text-[var(--blue)] text-xs font-bold uppercase m-0 mb-2.5">
+                  {eyebrow}
+                </p>
+              ) : null}
               {title ? <SheetTitle>{title}</SheetTitle> : null}
               {description ? <SheetDescription>{description}</SheetDescription> : null}
             </SheetHeader>
           ) : null}
           <SheetBody>
-            <div className="slidePanelInner">{children}</div>
+            <div className="px-[22px] pb-[22px] grid gap-3.5">{children}</div>
           </SheetBody>
           {footer ? <SheetFooter>{footer}</SheetFooter> : null}
         </div>
@@ -102,8 +83,6 @@ export function SlidePanel({
   );
 }
 
-// ── SlidePanelTrigger ──────────────────────────────────────
-
 export function SlidePanelTrigger({ children, className }: SlidePanelTriggerProps) {
   return (
     <SheetTrigger className={className} asChild>
diff --git a/src/modules/workspace/WorkTabs.tsx b/src/modules/workspace/WorkTabs.tsx
index 9907212..bd9941d 100644
--- a/src/modules/workspace/WorkTabs.tsx
+++ b/src/modules/workspace/WorkTabs.tsx
@@ -61,12 +61,10 @@ export function useWorkTabs() {
   const router = useRouter();
   const [tabs, setTabs] = useState<WorkTab[]>([]);
 
-  // Hydrate from localStorage on mount
   useEffect(() => {
     setTabs(readTabs());
   }, []);
 
-  // Add current path as a tab when it's a record detail page
   useEffect(() => {
     const label = deriveLabel(pathname);
     if (!label) return;
@@ -117,21 +115,34 @@ export function WorkTabs({ state }: { state: WorkTabState }) {
   if (!state.tabs.length) return null;
 
   return (
-    <nav className="workTabs" aria-label="Recently opened records">
+    <nav
+      className="flex items-center gap-1 overflow-x-auto pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      aria-label="Recently opened records"
+    >
       {state.tabs.map((tab) => {
         const active = pathname === tab.path;
         return (
-          <span key={tab.path} className={`workTab ${active ? "active" : ""}`}>
+          <span
+            key={tab.path}
+            className={`inline-flex items-center border rounded-md overflow-hidden shrink-0 ${
+              active
+                ? "border-[var(--blue)] bg-[#eef5ff] dark:border-[var(--blue)] dark:bg-[rgba(138,191,255,0.12)]"
+                : "border-[var(--line)] bg-[var(--surface-soft)] dark:border-[var(--line)] dark:bg-[var(--surface-soft)]"
+            }`}
+          >
             <button
               type="button"
               onClick={() => router.push(tab.path as Route)}
               aria-current={active ? "page" : undefined}
+              className={`min-h-8 inline-flex items-center border-0 bg-none text-xs font-bold px-2.5 cursor-pointer whitespace-nowrap ${
+                active ? "text-[var(--blue)]" : "text-[var(--ink)]"
+              }`}
             >
               {tab.label}
             </button>
             <button
               type="button"
-              className="workTabClose"
+              className="min-w-6 min-h-6 inline-flex items-center justify-center border-0 border-l border-[var(--line)] bg-none text-[var(--muted)] cursor-pointer p-0 hover:text-[var(--rose)] hover:bg-[rgba(180,35,87,0.08)]"
               aria-label={`Close ${tab.label}`}
               onClick={(e) => {
                 e.stopPropagation();
@@ -144,7 +155,12 @@ export function WorkTabs({ state }: { state: WorkTabState }) {
         );
       })}
       {state.tabs.length > 1 ? (
-        <button type="button" className="workTabsClear" onClick={state.closeAll} aria-label="Close all tabs">
+        <button
+          type="button"
+          className="min-h-8 inline-flex items-center border border-transparent rounded-md bg-none text-[var(--faint)] text-[11px] font-semibold px-2.5 cursor-pointer whitespace-nowrap shrink-0 hover:text-[var(--rose)] hover:border-[var(--line)]"
+          onClick={state.closeAll}
+          aria-label="Close all tabs"
+        >
           Clear all
         </button>
       ) : null}
diff --git a/src/modules/workspace/WorkspaceNavigation.tsx b/src/modules/workspace/WorkspaceNavigation.tsx
index df1ef45..bc31b1d 100644
--- a/src/modules/workspace/WorkspaceNavigation.tsx
+++ b/src/modules/workspace/WorkspaceNavigation.tsx
@@ -7,14 +7,23 @@ import type { NavItem } from "./navigation";
 export function WorkspaceNavigation({ items, role }: { items: NavItem[]; role: string }) {
   const pathname = usePathname();
   return (
-    <nav className="workspaceRailNav" aria-label={`${role} workspace navigation`}>
+    <nav className="w-full grid content-start gap-2" aria-label={`${role} workspace navigation`}>
       {items.map((item) => {
         const active = isActive(pathname, item.href);
         const Icon = item.icon;
         return (
-          <Link aria-current={active ? "page" : undefined} className={active ? "active" : ""} href={item.href} key={item.href}>
+          <Link
+            aria-current={active ? "page" : undefined}
+            className={`w-full min-h-[42px] flex items-center gap-2 relative border rounded-lg px-3 no-underline ${
+              active
+                ? "border-[#d9dee8] bg-[var(--surface-soft)] text-[var(--blue)] shadow-[inset_3px_0_0_var(--blue),0_8px_22px_rgba(16,24,40,0.08)]"
+                : "border-transparent text-[var(--muted)] hover:border-[#d9dee8] hover:bg-[var(--surface-soft)] hover:text-[var(--blue)] hover:shadow-[0_8px_22px_rgba(16,24,40,0.08)]"
+            }`}
+            href={item.href}
+            key={item.href}
+          >
             <Icon size={16} strokeWidth={2.5} aria-hidden="true" />
-            <strong>{item.label}</strong>
+            <strong className="text-sm">{item.label}</strong>
           </Link>
         );
       })}
@@ -25,12 +34,22 @@ export function WorkspaceNavigation({ items, role }: { items: NavItem[]; role: s
 export function WorkspaceMobileNavigation({ items, role }: { items: NavItem[]; role: string }) {
   const pathname = usePathname();
   return (
-    <nav className="mobileTabBar" aria-label={`${role} mobile navigation`}>
+    <nav
+      className="hidden select-none max-md:fixed max-md:right-0 max-md:bottom-0 max-md:left-0 max-md:z-30 max-md:flex max-md:justify-center max-md:border-t max-md:border-[var(--line)] max-md:bg-[rgba(255,255,255,0.97)] max-md:backdrop-blur-md max-md:pt-1.5 max-md:px-1 max-md:pb-[max(6px,env(safe-area-inset-bottom,6px))]"
+      aria-label={`${role} mobile navigation`}
+    >
       {items.map((item) => {
         const active = isActive(pathname, item.href);
         const Icon = item.icon;
         return (
-          <Link aria-current={active ? "page" : undefined} className={active ? "active" : ""} href={item.href} key={item.href}>
+          <Link
+            aria-current={active ? "page" : undefined}
+            className={`flex-1 min-w-0 max-w-24 min-h-14 flex flex-col items-center justify-center gap-0.5 border-none border-t-[3px] bg-transparent px-0.5 py-1 text-[11px] font-semibold no-underline rounded-md ${
+              active ? "border-t-[var(--blue)] text-[var(--blue)]" : "border-t-transparent text-[var(--faint)]"
+            }`}
+            href={item.href}
+            key={item.href}
+          >
             <Icon size={20} strokeWidth={2} aria-hidden="true" />
             <span>{item.label}</span>
           </Link>
diff --git a/src/modules/workspace/WorkspaceOS.tsx b/src/modules/workspace/WorkspaceOS.tsx
index 680ec96..b4566fc 100644
--- a/src/modules/workspace/WorkspaceOS.tsx
+++ b/src/modules/workspace/WorkspaceOS.tsx
@@ -30,8 +30,6 @@ const builtinShortcuts = [
   { keys: "Esc", label: "Close menu or clear focus" }
 ];
 
-// ── Keyboard shortcut chords per role ──────────────────────────
-
 function roleChords(role: string): { keys: string; label: string }[] {
   const base = builtinShortcuts;
   if (role === "admin") {
@@ -61,8 +59,6 @@ function roleChords(role: string): { keys: string; label: string }[] {
   return base;
 }
 
-// ── Build commands from nav items ──────────────────────────────
-
 function buildOSCommands(navItems: NavItem[], role: string): OSCommand[] {
   const chordByHref: Record<string, string> = {};
   chordByHref[`/${role}`] = "G H";
@@ -169,7 +165,6 @@ export function WorkspaceOS({
       const el = e.target as HTMLElement | null;
       const typing = el?.tagName === "INPUT" || el?.tagName === "TEXTAREA" || el?.isContentEditable === true;
 
-      // Cmd+K or ? → open command palette
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
         setCmdOpen(true);
@@ -187,7 +182,6 @@ export function WorkspaceOS({
         return;
       }
 
-      // G then key chord navigation
       if (!typing && e.key.toLowerCase() === "g") {
         seqRef.current = "g";
         window.setTimeout(() => { seqRef.current = ""; }, 900);
@@ -204,7 +198,6 @@ export function WorkspaceOS({
         return;
       }
 
-      // / → focus search
       if (!typing && e.key === "/") {
         const input = document.querySelector<HTMLInputElement>("[data-command-search]");
         if (input) {
@@ -215,7 +208,6 @@ export function WorkspaceOS({
         return;
       }
 
-      // Command palette open → arrow keys / enter / esc
       if (cmdOpen) {
         if (e.key === "Escape") {
           e.preventDefault();
@@ -240,7 +232,6 @@ export function WorkspaceOS({
         }
       }
 
-      // j/k navigation on rows (when not in input)
       if (!typing && !cmdOpen && (e.key === "j" || e.key === "k")) {
         const rows = document.querySelectorAll("[data-os-navigable]");
         if (!rows.length) return;
@@ -261,34 +252,42 @@ export function WorkspaceOS({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [cmdOpen, cmdIndex, filtered, commands, visit]);
 
-  // Reset active index when query changes
   useEffect(() => { setCmdIndex(0); }, [cmdQuery]);
 
   const chords = useMemo(() => roleChords(session.role), [session.role]);
 
   return (
     <WorkspaceOSContext.Provider value={{ embedded: true, session }}>
-      <main className="shell">
+      <main className="grid grid-cols-[224px_minmax(0,1fr)] min-h-svh bg-[radial-gradient(circle_at_top_left,color-mix(in_srgb,var(--blue)_10%,transparent),transparent_32rem),var(--paper)] text-[var(--ink)] max-md:block">
         {/* ── Sidebar Rail ─────────────────────────────────── */}
-        <aside className="workspaceRail">
-          <Link className="workspaceMark" href="/app" aria-label="StudentHub app">
-            <span>SH</span>
+        <aside className="sticky top-0 h-svh grid grid-rows-[auto_minmax(0,1fr)_auto] justify-items-stretch gap-2.5 border-r border-[var(--line)] bg-[color-mix(in_srgb,var(--surface)_94%,transparent)] py-3 px-2.5 max-md:hidden">
+          <Link className="w-full min-h-11 flex items-center gap-2.5 border border-[var(--line)] rounded-lg bg-[var(--ink)] text-[var(--surface)] px-3 font-black no-underline" href="/app" aria-label="StudentHub app">
+            <span className="w-[30px] h-[30px] inline-flex items-center justify-center rounded-md bg-[rgba(255,255,255,0.14)]">SH</span>
             <strong>StudentHub</strong>
           </Link>
           <WorkspaceNavigation items={navItems} role={session.role} />
-          <div className="workspaceRailFooter">
-            <button className="commandLauncher" type="button" onClick={() => { setCmdOpen(true); }}>
-              <span>⌘K</span>
+          <div className="grid gap-2">
+            <button
+              className="min-h-[42px] rounded-lg border border-[var(--line)] bg-[var(--surface-soft)] text-[var(--ink)] text-[13px] font-black cursor-pointer hover:border-[var(--blue)] hover:text-[var(--blue)]"
+              type="button"
+              onClick={() => { setCmdOpen(true); }}
+            >
+              <span className="text-[11px] text-[var(--muted)] font-bold uppercase">⌘K</span>
             </button>
             <ThemeToggle />
-            <form className="workspaceSignout" action={logoutAction}>
-              <button type="submit">Sign out</button>
+            <form action={logoutAction}>
+              <button
+                type="submit"
+                className="w-full min-h-10 border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] text-[var(--ink)] text-[13px] font-black cursor-pointer hover:border-[var(--blue)] hover:text-[var(--blue)]"
+              >
+                Sign out
+              </button>
             </form>
           </div>
         </aside>
 
         {/* ── Content Stage ───────────────────────────────── */}
-        <section className="workspaceStage">
+        <section className="min-w-0 grid grid-rows-[auto_minmax(0,1fr)] min-h-svh">
           {children}
         </section>
 
@@ -298,57 +297,67 @@ export function WorkspaceOS({
 
       {/* ── Command Palette Overlay ───────────────────────── */}
       {cmdOpen ? (
-        <div className="commandOverlay" role="dialog" aria-modal="true" aria-label="Command menu">
-          <button className="commandScrim" aria-label="Close" type="button" onClick={() => setCmdOpen(false)} />
-          <section className="commandMenu">
-            <div className="commandInputWrap">
-              <span>⌘</span>
+        <div className="fixed inset-0 z-50 grid justify-items-center p-4 pt-[12vh]" role="dialog" aria-modal="true" aria-label="Command menu">
+          <button
+            className="absolute inset-0 bg-[rgba(0,0,0,0.48)] backdrop-blur-[6px]"
+            aria-label="Close"
+            type="button"
+            onClick={() => setCmdOpen(false)}
+          />
+          <section className="relative z-10 w-full max-w-[640px] grid rounded-xl border border-[var(--line)] bg-[var(--surface)] shadow-[0_28px_100px_rgba(16,24,40,0.32)] overflow-hidden">
+            <div className="flex items-center min-h-[48px] border-b border-[var(--line)] bg-[var(--surface-soft)] px-3 gap-2">
+              <span className="text-[var(--muted)] text-xs font-bold">⌘</span>
               <input
                 ref={cmdInputRef}
                 autoFocus
+                className="flex-1 min-w-0 h-10 border-0 bg-transparent text-[var(--ink)] text-sm px-1 font-inherit focus:outline-none"
                 placeholder="Jump to a view, search records, or run an action..."
                 value={cmdQuery}
                 onChange={(e) => setCmdQuery(e.target.value)}
               />
-              <kbd>Esc</kbd>
+              <kbd className="text-[var(--muted)] text-[11px] font-bold bg-[var(--surface)] border border-[var(--line)] rounded px-1.5">Esc</kbd>
             </div>
-            <div className="commandList">
+            <div className="max-h-[420px] overflow-y-auto p-2 grid gap-1">
               {grouped.length ? (
                 grouped.map(([section, items]) => (
-                  <div className="commandGroup" key={section}>
-                    <h3>{section}</h3>
+                  <div key={section}>
+                    <h3 className="text-[var(--muted)] text-[11px] font-extrabold uppercase px-2 py-1.5">{section}</h3>
                     {items.map((cmd) => {
                       const idx = filtered.findIndex((f) => f.id === cmd.id);
                       return (
                         <button
-                          className={idx === cmdIndex ? "active" : ""}
+                          className={`w-full min-h-[48px] grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-lg px-2.5 py-1.5 text-left border cursor-pointer ${
+                            idx === cmdIndex
+                              ? "border-[var(--blue)] bg-[#eef5ff]"
+                              : "border-transparent hover:bg-[var(--surface-soft)]"
+                          }`}
                           key={cmd.id}
                           type="button"
                           onMouseEnter={() => setCmdIndex(idx)}
                           onClick={() => visit(cmd.href)}
                         >
-                          <span>
-                            <strong>{cmd.title}</strong>
-                            <small>{cmd.subtitle}</small>
+                          <span className="grid gap-0.5">
+                            <strong className="text-sm text-[var(--ink)]">{cmd.title}</strong>
+                            <small className="text-xs text-[var(--muted)] overflow-hidden text-ellipsis whitespace-nowrap">{cmd.subtitle}</small>
                           </span>
-                          {cmd.shortcut ? <kbd>{cmd.shortcut}</kbd> : null}
+                          {cmd.shortcut ? <kbd className="text-[11px] font-mono font-bold text-[var(--muted)] bg-[var(--surface-soft)] border border-[var(--line)] rounded px-1.5 py-0.5">{cmd.shortcut}</kbd> : null}
                         </button>
                       );
                     })}
                   </div>
                 ))
               ) : (
-                <div className="commandEmpty">
-                  <strong>No command found</strong>
-                  <span>Try a view, record name, scope, or shortcut.</span>
+                <div className="grid gap-1.5 py-8 px-3 justify-items-center text-center">
+                  <strong className="text-[var(--ink)]">No command found</strong>
+                  <span className="text-[var(--muted)] text-sm">Try a view, record name, scope, or shortcut.</span>
                 </div>
               )}
             </div>
-            <div className="shortcutGrid">
+            <div className="grid grid-cols-2 gap-1 px-3 py-2.5 border-t border-[var(--line)]">
               {chords.map((row) => (
-                <div key={row.keys}>
-                  <kbd>{row.keys}</kbd>
-                  <span>{row.label}</span>
+                <div key={row.keys} className="flex items-center justify-between px-2 py-1.5 rounded-md">
+                  <kbd className="font-mono text-[11px] font-bold bg-[var(--surface)] text-[var(--ink)] border border-[var(--line)] rounded px-1.5 py-px">{row.keys}</kbd>
+                  <span className="text-[var(--muted)] text-xs">{row.label}</span>
                 </div>
               ))}
             </div>
diff --git a/src/modules/workspace/WorkspaceShell.tsx b/src/modules/workspace/WorkspaceShell.tsx
index 8e9e07c..8e1ea2c 100644
--- a/src/modules/workspace/WorkspaceShell.tsx
+++ b/src/modules/workspace/WorkspaceShell.tsx
@@ -44,42 +44,47 @@ export function WorkspaceShell({
   const navItems = navForRole(session.role);
 
   const rail = (
-    <aside className="workspaceRail">
-      <Link className="workspaceMark" href="/app" aria-label="StudentHub app">
-        <span>SH</span>
-        <strong>StudentHub</strong>
+    <aside className="sticky top-0 h-svh grid grid-rows-[auto_minmax(0,1fr)_auto] justify-items-center gap-3 border-r border-[#e2e6ee] bg-[var(--surface)] py-3.5 px-3 max-md:hidden">
+      <Link className="w-full min-h-12 flex items-center gap-2.5 border border-[var(--line)] rounded-lg bg-[var(--ink)] text-[var(--surface)] px-3 no-underline dark:bg-[#e7ecf5] dark:text-[#090d14]" href="/app" aria-label="StudentHub app">
+        <span className="w-[30px] h-[30px] inline-flex items-center justify-center rounded-md bg-[rgba(255,255,255,0.14)] font-black dark:bg-[rgba(9,13,20,0.12)]">SH</span>
+        <strong className="text-[15px] font-black">StudentHub</strong>
       </Link>
       <WorkspaceNavigation items={navItems} role={session.role} />
-      <div className="workspaceRailFooter">
+      <div className="w-full grid gap-2">
         <ThemeToggle />
-        <form className="workspaceSignout" action={logoutAction}>
-          <button type="submit">Sign out</button>
+        <form action={logoutAction}>
+          <button
+            type="submit"
+            className="w-full min-h-10 border border-[var(--line)] rounded-lg bg-[var(--surface-soft)] text-[var(--ink)] text-[13px] font-black cursor-pointer hover:border-[var(--blue)] hover:text-[var(--blue)]"
+          >
+            Sign out
+          </button>
         </form>
       </div>
     </aside>
   );
 
   const stage = (
-    <section className="workspaceStage">
-      <section className="topbar">
+    <section className="min-w-0 w-[calc(100vw-236px)] overflow-x-hidden grid content-start gap-3.5 p-3.5 max-md:w-auto max-md:p-2.5 max-md:pb-[76px]">
+      <section className="grid grid-cols-[minmax(0,1fr)_minmax(220px,300px)] items-center gap-[18px] border border-[#dfe4ed] rounded-lg bg-[color-mix(in_srgb,var(--surface)_92%,transparent)] p-4 dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]">
         <div>
-          <p className="eyebrow">{eyebrow}</p>
+          <p className="text-[var(--blue)] text-xs font-bold uppercase m-0 mb-2.5">{eyebrow}</p>
           <h1>{title}</h1>
         </div>
-        <div className="accountBox">
-          <span>{session.role}</span>
-          <strong>{session.name}</strong>
-          <small>{session.email}</small>
+        <div className="min-w-0 grid gap-1.5 p-3.5 border border-[var(--line)] bg-[var(--surface)] rounded-lg">
+          <span className="text-[var(--blue)] text-xs font-bold uppercase">{session.role}</span>
+          <strong className="overflow-hidden text-ellipsis whitespace-nowrap">{session.name}</strong>
+          <small className="text-[var(--muted)] overflow-hidden text-ellipsis">{session.email}</small>
         </div>
       </section>
 
       {metrics.length ? (
-        <section className="metrics" aria-label={`${session.role} workspace metrics`}>
+        <section className="grid grid-cols-4 gap-3 max-[1040px]:grid-cols-1" aria-label={`${session.role} workspace metrics`}>
           {metrics.map((metric) => (
-            <article className="metric" key={metric.label}>
-              <span>{metric.label}</span>
-              <strong>{typeof metric.value === "number" ? metric.value.toLocaleString("en-US") : metric.value}</strong>
-              <p>{metric.note}</p>
+            <article className="min-h-[118px] p-[18px] border border-[var(--line)] bg-[var(--surface)] dark:border-[var(--line)] dark:bg-[var(--surface)] dark:text-[var(--ink)]" key={metric.label}>
+              <span className="text-[var(--blue)] text-[11px] font-black uppercase">{metric.label}</span>
+              <strong className="block text-[38px] leading-none my-4 mx-0">{typeof metric.value === "number" ? metric.value.toLocaleString("en-US") : metric.value}</strong>
+              <p className="text-[var(--faint)] mb-0">{metric.note}</p>
             </article>
           ))}
         </section>
@@ -87,7 +92,7 @@ export function WorkspaceShell({
 
       {children}
 
-      <section className="lists">
+      <section className="grid grid-cols-2 gap-3 max-[1040px]:grid-cols-1">
         {primary ? <WorkspaceList title={primary.title} rows={primary.rows} /> : null}
         {secondary ? <WorkspaceList title={secondary.title} rows={secondary.rows} /> : null}
       </section>
@@ -97,49 +102,56 @@ export function WorkspaceShell({
   // When embedded in a WorkspaceOS layout, the layout already provides the rail and mobile nav.
   if (embedded) {
     return (
-      <main className="shell shellEmbedded">
+      <main className="block min-h-0">
         {stage}
-        <WorkspaceMobileNavigation items={navItems} role={session.role} />
       </main>
     );
   }
 
   return (
-    <main className="shell">
+    <main className="grid grid-cols-[236px_minmax(0,1fr)] min-h-svh bg-[var(--paper)] max-md:block">
       {rail}
       {stage}
       <WorkspaceMobileNavigation items={navItems} role={session.role} />
-      </main>
+    </main>
   );
 }
 
 function WorkspaceList({ title, rows }: { title: string; rows: Row[] }) {
   return (
-    <section className="dataList">
-      <div className="listHeader">
-        <h2>{title}</h2>
-        <span>{rows.length}</span>
+    <section className="border border-[var(--line)] bg-[var(--surface)]">
+      <div className="min-h-[62px] flex items-center justify-between gap-4 px-[18px] py-[18px] pb-3.5 border-b border-[var(--line)]">
+        <h2 className="mb-0">{title}</h2>
+        <span className="min-w-[30px] min-h-[30px] inline-flex items-center justify-center text-[var(--blue)] border border-[#b7cff0] bg-[#eef5ff] font-bold">{rows.length}</span>
       </div>
-      <div className="rows">
+      <div className="grid">
         {rows.length ? (
           rows.map((row) => (
-            <article className="row" key={row.id}>
-              <div className="rowMain">
+            <article
+              className="min-h-[72px] grid grid-cols-[minmax(0,1fr)_minmax(126px,auto)] gap-4 px-[18px] py-3.5 border-b border-[var(--line)] last:border-b-0"
+              key={row.id}
+            >
+              <div className="min-w-0 grid content-center gap-1.5">
                 {row.href ? (
-                  <Link href={row.href as Route}>
-                    <strong>{row.title}</strong>
+                  <Link
+                    className="text-inherit no-underline hover:text-[var(--blue)] hover:underline hover:underline-offset-[3px]"
+                    href={row.href as Route}
+                  >
+                    <strong className="block overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
                   </Link>
                 ) : (
-                  <strong>{row.title}</strong>
+                  <strong className="block overflow-hidden text-ellipsis whitespace-nowrap">{row.title}</strong>
                 )}
-                <span>{row.subtitle}</span>
+                <span className="overflow-hidden text-ellipsis whitespace-nowrap text-[var(--muted)]">{row.subtitle}</span>
+              </div>
+              <div className="min-w-0 grid content-center justify-items-end text-right gap-1.5">
+                {row.meta ? <span className="text-[var(--muted)]">{row.meta}</span> : null}
               </div>
-              <div className="rowMeta">{row.meta ? <span>{row.meta}</span> : null}</div>
             </article>
           ))
         ) : (
-          <div className="emptyState">
-            <strong>No items here</strong>
+          <div className="grid gap-1.5 p-[18px] text-[var(--muted)]">
+            <strong className="text-[var(--ink)] text-[15px]">No items here</strong>
             <span>The imported database did not return rows for this panel.</span>
           </div>
         )}