diff --git a/docs/PLAN.md b/docs/PLAN.md
index a89f422..04fb45b 100644
--- a/docs/PLAN.md
+++ b/docs/PLAN.md
@@ -20,3 +20,4 @@ Updated: 2026-04-01
 4. Added paranoia-oriented tests for login gating, proxy link encoding, quota edge cases, and traffic share formatting.
 5. Simplified the UI into a calmer minimalist layout with reduced visual noise and denser operational presentation.
 6. Moved user creation into a modal flow and tightened the operator UX with quieter navigation and a denser users table.
+7. Rebuilt the UI shell from scratch around a stable topbar/tab layout with fixed typography and lower visual noise across window sizes.
diff --git a/docs/PROJECT_INDEX.md b/docs/PROJECT_INDEX.md
index d1dd40c..63d1b22 100644
--- a/docs/PROJECT_INDEX.md
+++ b/docs/PROJECT_INDEX.md
@@ -18,7 +18,7 @@ Updated: 2026-04-01
 ## Frontend
 
 - `src/main.tsx`: application bootstrap
-- `src/App.tsx`: authenticated panel shell, modal user creation flow, and tab composition
+- `src/App.tsx`: authenticated panel shell rebuilt around a topbar/tab layout, plus modal user creation flow
 - `src/App.test.tsx`: login-gate and modal interaction tests
 - `src/app.css`: full panel styling
 - `src/data/mockDashboard.ts`: realistic mock state shaped for future API responses
diff --git a/src/App.test.tsx b/src/App.test.tsx
index 7b59374..7102d2e 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -29,7 +29,7 @@ describe('App login gate', () => {
     await loginIntoPanel(user);
 
     expect(screen.getByRole('navigation', { name: /primary/i })).toBeInTheDocument();
-    expect(screen.getByText(/control panel/i)).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /3proxy ui/i })).toBeInTheDocument();
   });
 
   it('opens add-user flow in a modal and closes it on escape', async () => {
diff --git a/src/App.tsx b/src/App.tsx
index ca8213f..7d53dbd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, KeyboardEvent, useEffect, useMemo, useState } from 'react';
+import { FormEvent, KeyboardEvent, useEffect, useState } from 'react';
 import './app.css';
 import { dashboardSnapshot, panelAuth } from './data/mockDashboard';
 import {
@@ -38,9 +38,10 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
   return (
     <main className="login-shell">
       <section className="login-card">
-        <p className="eyebrow">3proxy UI</p>
-        <h1>Panel access</h1>
-        <p className="lede">Hardcoded credentials for the current prototype build.</p>
+        <div className="login-copy">
+          <h1>3proxy UI</h1>
+          <p>Sign in to the control panel.</p>
+        </div>
         <form className="login-form" onSubmit={handleSubmit}>
           <label>
             Login
@@ -64,102 +65,12 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
           <button type="submit">Open panel</button>
           {error ? <p className="form-error">{error}</p> : null}
         </form>
-        <div className="login-note">
-          <span>Prototype auth is intentionally hardcoded.</span>
-          <span>Backend-backed access control comes next.</span>
-        </div>
       </section>
     </main>
   );
 }
 
-function DashboardTab() {
-  const serviceTone = getServiceTone(dashboardSnapshot.service.status);
-
-  return (
-    <section className="tab-grid">
-      <article className="panel-card hero-card">
-        <div>
-          <p className="eyebrow">Service</p>
-          <h2>3proxy status</h2>
-          <p className="muted">Health, process metadata, and restart actions.</p>
-        </div>
-        <div className="hero-status">
-          <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
-          <span>{dashboardSnapshot.service.pidLabel}</span>
-          <span>{dashboardSnapshot.service.versionLabel}</span>
-        </div>
-        <div className="action-row">
-          <button type="button">Start</button>
-          <button type="button" className="secondary">
-            Restart
-          </button>
-        </div>
-      </article>
-
-      <article className="panel-card">
-        <p className="section-label">Traffic</p>
-        <strong className="metric">{formatBytes(dashboardSnapshot.traffic.totalBytes)}</strong>
-        <p className="muted">
-          {dashboardSnapshot.traffic.liveConnections} live connections across{' '}
-          {dashboardSnapshot.traffic.activeUsers} active users.
-        </p>
-        <div className="sparkline-list">
-          {dashboardSnapshot.traffic.daily.map((bucket) => (
-            <div key={bucket.day} className="sparkline-row">
-              <span>{bucket.day}</span>
-              <div className="sparkline-track">
-                <div style={{ width: `${bucket.share * 100}%` }} />
-              </div>
-              <span>{formatBytes(bucket.bytes)}</span>
-            </div>
-          ))}
-        </div>
-      </article>
-
-      <article className="panel-card">
-        <p className="section-label">User pressure</p>
-        <strong className="metric">{dashboardSnapshot.users.total}</strong>
-        <p className="muted">Configured users in the active profile.</p>
-        <div className="stat-stack">
-          <div>
-            <span>Live now</span>
-            <strong>{dashboardSnapshot.users.live}</strong>
-          </div>
-          <div>
-            <span>Near quota</span>
-            <strong>{dashboardSnapshot.users.nearQuota}</strong>
-          </div>
-          <div>
-            <span>Exceeded</span>
-            <strong>{dashboardSnapshot.users.exceeded}</strong>
-          </div>
-        </div>
-      </article>
-
-      <article className="panel-card">
-        <p className="section-label">Runtime attention</p>
-        <div className="attention-list">
-          {dashboardSnapshot.attention.map((item) => (
-            <div key={item.title} className="attention-item">
-              <span className={`dot ${item.level}`} />
-              <div>
-                <strong>{item.title}</strong>
-                <p>{item.message}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </article>
-    </section>
-  );
-}
-
-function AddUserModal({
-  onClose,
-}: {
-  onClose: () => void;
-}) {
+function AddUserModal({ onClose }: { onClose: () => void }) {
   useEffect(() => {
     const handleKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -186,11 +97,8 @@ function AddUserModal({
         onClick={stopPropagation}
       >
         <div className="modal-header">
-          <div>
-            <p className="section-label">Users</p>
-            <h2 id="add-user-title">Add user</h2>
-          </div>
-          <button type="button" className="ghost-button" onClick={onClose}>
+          <h2 id="add-user-title">Add user</h2>
+          <button type="button" className="button-secondary" onClick={onClose}>
             Close
           </button>
         </div>
@@ -212,7 +120,7 @@ function AddUserModal({
             <input placeholder="Optional" />
           </label>
           <div className="modal-actions">
-            <button type="button" className="secondary" onClick={onClose}>
+            <button type="button" className="button-secondary" onClick={onClose}>
               Cancel
             </button>
             <button type="button">Create user</button>
@@ -223,6 +131,99 @@ function AddUserModal({
   );
 }
 
+function DashboardTab() {
+  const serviceTone = getServiceTone(dashboardSnapshot.service.status);
+
+  return (
+    <section className="page-grid">
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Service</h2>
+          <span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
+        </div>
+        <dl className="kv-list">
+          <div>
+            <dt>Process</dt>
+            <dd>{dashboardSnapshot.service.pidLabel}</dd>
+          </div>
+          <div>
+            <dt>Version</dt>
+            <dd>{dashboardSnapshot.service.versionLabel}</dd>
+          </div>
+          <div>
+            <dt>Uptime</dt>
+            <dd>{dashboardSnapshot.service.uptimeLabel}</dd>
+          </div>
+          <div>
+            <dt>Last event</dt>
+            <dd>{dashboardSnapshot.service.lastEvent}</dd>
+          </div>
+        </dl>
+        <div className="actions-row">
+          <button type="button">Start</button>
+          <button type="button" className="button-secondary">
+            Restart
+          </button>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Traffic</h2>
+        </div>
+        <div className="stats-strip">
+          <div>
+            <span>Total</span>
+            <strong>{formatBytes(dashboardSnapshot.traffic.totalBytes)}</strong>
+          </div>
+          <div>
+            <span>Connections</span>
+            <strong>{dashboardSnapshot.traffic.liveConnections}</strong>
+          </div>
+          <div>
+            <span>Active users</span>
+            <strong>{dashboardSnapshot.traffic.activeUsers}</strong>
+          </div>
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Daily usage</h2>
+        </div>
+        <div className="usage-list">
+          {dashboardSnapshot.traffic.daily.map((bucket) => (
+            <div key={bucket.day} className="usage-row">
+              <span>{bucket.day}</span>
+              <div className="usage-bar">
+                <div style={{ width: `${bucket.share * 100}%` }} />
+              </div>
+              <strong>{formatBytes(bucket.bytes)}</strong>
+            </div>
+          ))}
+        </div>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Attention</h2>
+        </div>
+        <div className="event-list">
+          {dashboardSnapshot.attention.map((item) => (
+            <div key={item.title} className="event-row">
+              <span className={`event-marker ${item.level}`} />
+              <div>
+                <strong>{item.title}</strong>
+                <p>{item.message}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </article>
+    </section>
+  );
+}
+
 function UsersTab() {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -234,132 +235,128 @@ function UsersTab() {
   };
 
   return (
-    <section className="tab-grid users-grid">
-      <article className="panel-card table-card">
-        <div className="table-header">
-          <div>
-            <p className="section-label">Users</p>
-            <h2>Accounts and usage</h2>
+    <>
+      <section className="page-grid single-column">
+        <article className="panel-card">
+          <div className="table-toolbar">
+            <div className="toolbar-title">
+              <h2>Users</h2>
+              <p>{dashboardSnapshot.userRecords.length} accounts in current profile</p>
+            </div>
+            <div className="toolbar-actions">
+              <div className="summary-pills">
+                <span>{dashboardSnapshot.users.live} live</span>
+                <span>{dashboardSnapshot.users.nearQuota} near quota</span>
+                <span>{dashboardSnapshot.users.exceeded} exceeded</span>
+              </div>
+              <button type="button" onClick={() => setIsModalOpen(true)}>
+                New user
+              </button>
+            </div>
           </div>
-          <div className="header-actions">
-            <span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
-            <button type="button" onClick={() => setIsModalOpen(true)}>
-              New user
-            </button>
-          </div>
-        </div>
-        <div className="table-wrap">
-          <table>
-            <thead>
-              <tr>
-                <th>User</th>
-                <th>Endpoint</th>
-                <th>Status</th>
-                <th>Used</th>
-                <th>Remaining</th>
-                <th>Proxy</th>
-              </tr>
-            </thead>
-            <tbody>
-              {dashboardSnapshot.userRecords.map((user) => {
-                const proxyLink = buildProxyLink(user.username, user.password, user.host, user.port);
-                const exhausted = isQuotaExceeded(user.usedBytes, user.quotaBytes);
+          <div className="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>User</th>
+                  <th>Endpoint</th>
+                  <th>Status</th>
+                  <th>Used</th>
+                  <th>Remaining</th>
+                  <th>Share</th>
+                  <th>Proxy</th>
+                </tr>
+              </thead>
+              <tbody>
+                {dashboardSnapshot.userRecords.map((user) => {
+                  const proxyLink = buildProxyLink(user.username, user.password, user.host, user.port);
+                  const exhausted = isQuotaExceeded(user.usedBytes, user.quotaBytes);
 
-                return (
-                  <tr key={user.id}>
-                    <td>
-                      <div className="user-cell">
-                        <strong>{user.username}</strong>
-                        <span>{user.port}</span>
-                      </div>
-                    </td>
-                    <td>{`${user.host}:${user.port}`}</td>
-                    <td>
-                      <span className={`status-pill ${getServiceTone(user.status)}`}>{user.status}</span>
-                    </td>
-                    <td>{formatBytes(user.usedBytes)}</td>
-                    <td>{formatQuotaState(user.usedBytes, user.quotaBytes)}</td>
-                    <td>
-                      <button
-                        type="button"
-                        className={exhausted ? 'danger-link' : 'copy-link'}
-                        onClick={() => handleCopy(user.id, proxyLink)}
-                      >
-                        {copiedId === user.id ? 'Copied' : 'Copy'}
-                      </button>
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-        <div className="table-foot muted">
-          Total traffic share is derived from current snapshot: {formatTrafficShare(
-            dashboardSnapshot.userRecords.reduce((sum, user) => sum + user.usedBytes, 0),
-            dashboardSnapshot.traffic.totalBytes,
-          )}
-        </div>
-      </article>
+                  return (
+                    <tr key={user.id}>
+                      <td>
+                        <div className="user-cell">
+                          <strong>{user.username}</strong>
+                        </div>
+                      </td>
+                      <td>{`${user.host}:${user.port}`}</td>
+                      <td>
+                        <span className={`status-pill ${getServiceTone(user.status)}`}>{user.status}</span>
+                      </td>
+                      <td>{formatBytes(user.usedBytes)}</td>
+                      <td>{formatQuotaState(user.usedBytes, user.quotaBytes)}</td>
+                      <td>{formatTrafficShare(user.usedBytes, dashboardSnapshot.traffic.totalBytes)}</td>
+                      <td>
+                        <button
+                          type="button"
+                          className={exhausted ? 'copy-button danger' : 'copy-button'}
+                          onClick={() => handleCopy(user.id, proxyLink)}
+                        >
+                          {copiedId === user.id ? 'Copied' : 'Copy'}
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </article>
+      </section>
 
       {isModalOpen ? <AddUserModal onClose={() => setIsModalOpen(false)} /> : null}
-    </section>
+    </>
   );
 }
 
 function SystemTab() {
-  const serviceToggles = useMemo(
-    () =>
-      dashboardSnapshot.system.services.map((service) => (
-        <div key={service.name} className="service-row">
-          <div>
-            <strong>{service.name}</strong>
-            <span>{service.description}</span>
-          </div>
-          <div className="service-meta">
-            <span>:{service.port}</span>
-            <span className={`status-pill ${service.enabled ? 'live' : 'idle'}`}>
-              {service.enabled ? 'enabled' : 'disabled'}
-            </span>
-          </div>
-        </div>
-      )),
-    [],
-  );
-
   return (
-    <section className="tab-grid system-grid">
+    <section className="page-grid system-grid">
       <article className="panel-card">
-        <p className="section-label">Runtime model</p>
-        <h2>Ports and reload mode</h2>
-        <div className="system-stats">
+        <div className="card-header">
+          <h2>Runtime</h2>
+        </div>
+        <dl className="kv-list">
           <div>
-            <span>Config mode</span>
-            <strong>{dashboardSnapshot.system.configMode}</strong>
+            <dt>Config mode</dt>
+            <dd>{dashboardSnapshot.system.configMode}</dd>
           </div>
           <div>
-            <span>Reload</span>
-            <strong>{dashboardSnapshot.system.reloadMode}</strong>
+            <dt>Reload</dt>
+            <dd>{dashboardSnapshot.system.reloadMode}</dd>
           </div>
           <div>
-            <span>Storage</span>
-            <strong>{dashboardSnapshot.system.storageMode}</strong>
+            <dt>Storage</dt>
+            <dd>{dashboardSnapshot.system.storageMode}</dd>
           </div>
+        </dl>
+      </article>
+
+      <article className="panel-card">
+        <div className="card-header">
+          <h2>Services</h2>
+        </div>
+        <div className="service-list">
+          {dashboardSnapshot.system.services.map((service) => (
+            <div key={service.name} className="service-row">
+              <div>
+                <strong>{service.name}</strong>
+                <p>{service.description}</p>
+              </div>
+              <div className="service-meta">
+                <span>{service.port}</span>
+                <span className={`status-pill ${service.enabled ? 'live' : 'idle'}`}>
+                  {service.enabled ? 'enabled' : 'disabled'}
+                </span>
+              </div>
+            </div>
+          ))}
         </div>
       </article>
 
-      <article className="panel-card">
-        <p className="section-label">Services</p>
-        <div className="service-list">{serviceToggles}</div>
-      </article>
-
-      <article className="panel-card config-card">
-        <div className="table-header">
-          <div>
-            <p className="section-label">Generated config preview</p>
-            <h2>Generated config</h2>
-          </div>
-          <span className="muted">View-only for now</span>
+      <article className="panel-card wide-card">
+        <div className="card-header">
+          <h2>Generated config</h2>
         </div>
         <pre>{dashboardSnapshot.system.previewConfig}</pre>
       </article>
@@ -376,50 +373,44 @@ export default function App() {
   }
 
   return (
-    <main className="app-shell">
-      <aside className="sidebar">
-        <div className="brand-block">
-          <p className="eyebrow">3proxy UI</p>
-          <h1>Control panel</h1>
+    <main className="shell">
+      <header className="shell-header">
+        <div className="shell-title">
+          <h1>3proxy UI</h1>
+          <p>{dashboardSnapshot.system.publicHost}</p>
         </div>
-
-        <nav className="nav-list" aria-label="Primary">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              type="button"
-              className={activeTab === tab.id ? 'nav-item active' : 'nav-item'}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              <span>{tab.label}</span>
-            </button>
-          ))}
-        </nav>
-
-        <div className="sidebar-foot">
-          <span className={`status-pill ${getServiceTone(dashboardSnapshot.service.status)}`}>
-            {dashboardSnapshot.service.status}
-          </span>
-          <p>{dashboardSnapshot.service.lastEvent}</p>
-        </div>
-      </aside>
-
-      <section className="content-shell">
-        <header className="topbar">
+        <div className="header-meta">
           <div>
-            <p className="section-label">Current host</p>
-            <h2>{dashboardSnapshot.system.publicHost}</h2>
+            <span>Status</span>
+            <strong>{dashboardSnapshot.service.status}</strong>
           </div>
-          <div className="topbar-meta">
-            <span>{dashboardSnapshot.service.status}</span>
-            <span>{dashboardSnapshot.service.versionLabel}</span>
+          <div>
+            <span>Version</span>
+            <strong>{dashboardSnapshot.service.versionLabel}</strong>
           </div>
-        </header>
+          <div>
+            <span>Users</span>
+            <strong>{dashboardSnapshot.users.total}</strong>
+          </div>
+        </div>
+      </header>
 
-        {activeTab === 'dashboard' ? <DashboardTab /> : null}
-        {activeTab === 'users' ? <UsersTab /> : null}
-        {activeTab === 'system' ? <SystemTab /> : null}
-      </section>
+      <nav className="tabbar" aria-label="Primary">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={activeTab === tab.id ? 'tab-button active' : 'tab-button'}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+
+      {activeTab === 'dashboard' ? <DashboardTab /> : null}
+      {activeTab === 'users' ? <UsersTab /> : null}
+      {activeTab === 'system' ? <SystemTab /> : null}
     </main>
   );
 }
diff --git a/src/app.css b/src/app.css
index dcfc563..5f4609b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,40 +1,44 @@
 :root {
-  font-family: "Segoe UI", Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color: #18212b;
-  background: #f4f6f8;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  color: #111827;
+  background: #f3f4f6;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  --bg: #f4f6f8;
+  --page-bg: #f3f4f6;
   --surface: #ffffff;
-  --surface-soft: #f8fafb;
-  --border: #dde4ea;
-  --border-strong: #cbd5dd;
-  --text: #18212b;
-  --muted: #667380;
-  --accent: #1f6feb;
-  --accent-soft: #edf4ff;
-  --success: #16794c;
-  --warn: #9a6700;
-  --danger: #b42318;
-  --idle: #667380;
-  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+  --surface-muted: #f9fafb;
+  --border: #e5e7eb;
+  --border-strong: #d1d5db;
+  --text: #111827;
+  --muted: #6b7280;
+  --accent: #2563eb;
+  --accent-muted: #eff6ff;
+  --success: #15803d;
+  --warning: #a16207;
+  --danger: #b91c1c;
+  --shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
 }
 
 * {
   box-sizing: border-box;
 }
 
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
 body {
   margin: 0;
   min-width: 320px;
-  min-height: 100vh;
-  background: var(--bg);
+  background: var(--page-bg);
   color: var(--text);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 button,
@@ -46,13 +50,8 @@ button {
   cursor: pointer;
 }
 
-#app,
-.login-shell,
-.app-shell {
-  min-height: 100vh;
-}
-
 .login-shell {
+  min-height: 100vh;
   display: grid;
   place-items: center;
   padding: 24px;
@@ -60,49 +59,41 @@ button {
 
 .login-card,
 .panel-card,
-.sidebar,
-.topbar {
+.shell-header,
+.tabbar {
   background: var(--surface);
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
 }
 
 .login-card {
-  width: min(100%, 420px);
-  padding: 28px;
-  border-radius: 16px;
+  width: min(100%, 360px);
+  padding: 24px;
+  border-radius: 12px;
   display: grid;
-  gap: 18px;
+  gap: 20px;
 }
 
-.eyebrow,
-.section-label {
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted);
+.login-copy {
+  display: grid;
+  gap: 4px;
 }
 
-.login-card h1,
-.brand-block h1,
-.panel-card h2,
-.topbar h2 {
+.login-copy h1,
+.shell-title h1,
+.card-header h2,
+.modal-header h2 {
   margin: 0;
-  color: var(--text);
-  font-size: 1.375rem;
-  line-height: 1.25;
+  font-size: 20px;
+  line-height: 1.2;
   font-weight: 600;
+  color: var(--text);
 }
 
-.lede,
-.muted,
-.attention-item p,
-.sidebar-foot p,
-.service-row span,
-.user-cell span,
-.table-foot {
+.login-copy p,
+.toolbar-title p,
+.service-row p,
+.event-row p {
   margin: 0;
   color: var(--muted);
 }
@@ -110,351 +101,367 @@ button {
 .login-form,
 .modal-form {
   display: grid;
-  gap: 14px;
+  gap: 12px;
 }
 
 .login-form label,
 .modal-form label {
   display: grid;
   gap: 6px;
-  color: var(--text);
-  font-size: 0.94rem;
+  font-weight: 500;
 }
 
 .login-form input,
 .modal-form input {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 10px;
+  height: 40px;
+  padding: 0 12px;
   border: 1px solid var(--border-strong);
+  border-radius: 8px;
   background: var(--surface);
   color: var(--text);
 }
 
 .login-form input:focus,
 .modal-form input:focus {
-  outline: 2px solid rgba(31, 111, 235, 0.18);
+  outline: 2px solid rgba(37, 99, 235, 0.12);
   border-color: var(--accent);
 }
 
-.login-form button,
-.action-row button,
-.modal-form button,
-.copy-link,
-.danger-link,
-.nav-item,
-.ghost-button {
-  transition:
-    background-color 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.login-form button,
-.action-row button,
-.modal-form button,
-.header-actions button {
-  padding: 10px 14px;
-  border-radius: 10px;
+button,
+.button-secondary,
+.copy-button {
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 8px;
   border: 1px solid var(--accent);
   background: var(--accent);
   color: #ffffff;
   font-weight: 600;
 }
 
-.secondary {
-  border-color: var(--border-strong) !important;
-  background: var(--surface) !important;
-  color: var(--text) !important;
+.button-secondary,
+.copy-button {
+  border-color: var(--border-strong);
+  background: var(--surface);
+  color: var(--text);
 }
 
-.login-form button:hover,
-.action-row button:hover,
-.modal-form button:hover,
-.header-actions button:hover,
-.ghost-button:hover,
-.copy-link:hover,
-.danger-link:hover {
-  filter: brightness(0.98);
+.copy-button.danger {
+  color: var(--danger);
 }
 
 .form-error {
   margin: 0;
   color: var(--danger);
-  font-size: 0.92rem;
 }
 
-.login-note {
-  display: grid;
-  gap: 4px;
-  padding-top: 6px;
-  border-top: 1px solid var(--border);
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-.app-shell {
-  display: grid;
-  grid-template-columns: 220px minmax(0, 1fr);
-  gap: 16px;
-  padding: 16px;
-}
-
-.sidebar {
-  border-radius: 14px;
-  padding: 20px;
-  display: grid;
-  gap: 20px;
-  align-self: start;
-  position: sticky;
-  top: 16px;
-}
-
-.brand-block {
-  display: grid;
-  gap: 4px;
-}
-
-.brand-block h1 {
-  font-size: 1.12rem;
-}
-
-.nav-list {
-  display: grid;
-  gap: 8px;
-}
-
-.nav-item {
-  padding: 10px 12px;
-  border-radius: 8px;
-  text-align: left;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--text);
-  display: block;
-  font-weight: 500;
-}
-
-.nav-item.active {
-  background: var(--accent-soft);
-  border-color: #cfe0ff;
-}
-
-.sidebar-foot {
-  display: grid;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid var(--border);
-}
-
-.content-shell {
+.shell {
+  width: min(1280px, calc(100vw - 32px));
+  margin: 16px auto;
   display: grid;
   gap: 16px;
 }
 
-.topbar {
-  padding: 14px 18px;
-  border-radius: 14px;
+.shell-header {
+  border-radius: 12px;
+  padding: 18px 20px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   gap: 16px;
+}
+
+.shell-title {
+  display: grid;
+  gap: 4px;
+}
+
+.shell-title p {
+  margin: 0;
+  color: var(--muted);
+}
+
+.header-meta {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 24px;
   align-items: center;
 }
 
-.topbar-meta {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  color: var(--muted);
-  font-size: 0.88rem;
+.header-meta div {
+  display: grid;
+  gap: 2px;
 }
 
-.tab-grid {
+.header-meta span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.header-meta strong {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.tabbar {
+  display: inline-flex;
+  width: fit-content;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.tab-button {
+  height: 34px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.tab-button.active {
+  background: var(--accent-muted);
+  color: var(--accent);
+}
+
+.page-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.users-grid {
+.page-grid.single-column {
   grid-template-columns: 1fr;
 }
 
-.system-grid {
-  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
+.system-grid .wide-card {
+  grid-column: 1 / -1;
 }
 
 .panel-card {
-  border-radius: 14px;
+  border-radius: 12px;
   padding: 18px;
   display: grid;
   gap: 14px;
   min-width: 0;
 }
 
-.hero-card {
-  background: var(--surface);
-}
-
-.hero-status,
-.action-row,
-.stat-stack,
-.attention-item,
+.card-header,
+.table-toolbar,
+.toolbar-actions,
+.actions-row,
+.modal-header,
+.modal-actions,
 .service-row,
-.system-stats {
+.service-meta {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
   align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.metric {
-  font-size: 2rem;
-  line-height: 1;
-  color: var(--text);
-  font-weight: 600;
+.card-header {
+  align-items: baseline;
 }
 
-.sparkline-list,
-.attention-list,
+.stats-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.stats-strip div {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-muted);
+}
+
+.stats-strip span,
+.kv-list dt {
+  color: var(--muted);
+}
+
+.stats-strip strong {
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.kv-list {
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.kv-list div {
+  display: grid;
+  grid-template-columns: 120px minmax(0, 1fr);
+  gap: 12px;
+}
+
+.kv-list dt,
+.kv-list dd {
+  margin: 0;
+}
+
+.usage-list,
+.event-list,
 .service-list {
   display: grid;
   gap: 10px;
 }
 
-.sparkline-row {
+.usage-row {
   display: grid;
-  grid-template-columns: 56px minmax(0, 1fr) 88px;
-  gap: 10px;
+  grid-template-columns: 40px minmax(0, 1fr) 96px;
+  gap: 12px;
   align-items: center;
-  font-size: 0.92rem;
+}
+
+.usage-row span {
   color: var(--muted);
 }
 
-.sparkline-track {
+.usage-row strong {
+  font-size: 13px;
+  text-align: right;
+}
+
+.usage-bar {
   height: 8px;
   border-radius: 999px;
-  background: #edf1f4;
+  background: #eceff3;
   overflow: hidden;
 }
 
-.sparkline-track div {
+.usage-bar div {
   height: 100%;
-  border-radius: inherit;
-  background: #7aa7e8;
+  background: #94a3b8;
 }
 
-.stat-stack {
-  justify-content: space-between;
-}
-
-.stat-stack div,
-.system-stats div {
-  flex: 1 1 120px;
-  display: grid;
-  gap: 4px;
+.event-row,
+.service-row {
   padding: 12px;
   border: 1px solid var(--border);
-  border-radius: 12px;
-  background: var(--surface-soft);
+  border-radius: 10px;
+  background: var(--surface-muted);
 }
 
-.attention-item,
-.service-row {
-  padding: 12px 14px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: var(--surface-soft);
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  flex: none;
-}
-
-.dot.warn {
-  background: #d4a72c;
-}
-
-.dot.live {
-  background: #2da66a;
-}
-
-.dot.fail {
-  background: #d95040;
-}
-
-.table-card,
-.config-card {
-  min-width: 0;
-}
-
-.table-header {
-  display: flex;
-  justify-content: space-between;
+.event-row {
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr);
   gap: 12px;
   align-items: start;
 }
 
-.header-actions {
+.event-marker {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  margin-top: 6px;
+}
+
+.event-marker.live {
+  background: var(--success);
+}
+
+.event-marker.warn {
+  background: var(--warning);
+}
+
+.event-marker.fail {
+  background: var(--danger);
+}
+
+.toolbar-title {
+  display: grid;
+  gap: 4px;
+}
+
+.toolbar-title h2 {
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.2;
+}
+
+.toolbar-actions {
+  flex-wrap: wrap;
+}
+
+.summary-pills {
   display: flex;
-  gap: 10px;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.summary-pills span {
+  display: inline-flex;
   align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--muted);
 }
 
 .table-wrap {
   overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 12px;
+  border-radius: 10px;
 }
 
 table {
   width: 100%;
+  min-width: 760px;
   border-collapse: collapse;
-  min-width: 700px;
   background: var(--surface);
 }
 
 th,
 td {
-  padding: 13px 14px;
-  text-align: left;
+  padding: 12px 14px;
   border-bottom: 1px solid var(--border);
-  font-size: 0.94rem;
+  text-align: left;
+  white-space: nowrap;
 }
 
 th {
+  background: var(--surface-muted);
   color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 700;
+  font-size: 12px;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  background: var(--surface-soft);
+  letter-spacing: 0.04em;
 }
 
 tbody tr:last-child td {
-  border-bottom: none;
+  border-bottom: 0;
 }
 
-.user-cell {
-  display: grid;
-  gap: 2px;
+.user-cell strong {
+  font-size: 14px;
 }
 
 .status-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 28px;
-  padding: 4px 10px;
+  min-width: 72px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid currentColor;
   border-radius: 999px;
-  font-size: 0.72rem;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  border: 1px solid currentColor;
-  background: #ffffff;
+  letter-spacing: 0.04em;
+  background: var(--surface);
 }
 
 .status-pill.live {
@@ -462,7 +469,7 @@ tbody tr:last-child td {
 }
 
 .status-pill.warn {
-  color: var(--warn);
+  color: var(--warning);
 }
 
 .status-pill.fail {
@@ -470,140 +477,115 @@ tbody tr:last-child td {
 }
 
 .status-pill.idle {
-  color: var(--idle);
-}
-
-.copy-link,
-.danger-link {
-  padding: 8px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--border-strong);
-  background: var(--surface);
-  color: var(--text);
-}
-
-.danger-link {
-  color: var(--danger);
-}
-
-.service-row,
-.service-meta {
-  justify-content: space-between;
-}
-
-.config-card {
-  grid-column: 1 / -1;
-}
-
-.table-foot {
-  font-size: 0.88rem;
+  color: var(--muted);
 }
 
 pre {
   margin: 0;
   padding: 14px;
-  border-radius: 12px;
   overflow: auto;
   border: 1px solid var(--border);
-  background: #fbfcfd;
-  color: #24303c;
-  font-family: Consolas, "Courier New", monospace;
-  font-size: 0.88rem;
-  line-height: 1.6;
+  border-radius: 10px;
+  background: #fbfbfc;
+  color: #1f2937;
+  font: 13px/1.55 Consolas, "Courier New", monospace;
 }
 
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.18);
   display: grid;
   place-items: center;
-  padding: 16px;
+  padding: 24px;
+  background: rgba(17, 24, 39, 0.2);
 }
 
 .modal-card {
-  width: min(100%, 480px);
+  width: min(100%, 440px);
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 14px;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
   padding: 18px;
   display: grid;
   gap: 16px;
 }
 
-.modal-header,
-.modal-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-}
-
 .modal-form {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .modal-actions {
   grid-column: 1 / -1;
-  justify-content: end;
+  justify-content: flex-end;
 }
 
-.ghost-button {
-  padding: 8px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--border-strong);
-  background: var(--surface);
-  color: var(--text);
-}
+@media (max-width: 960px) {
+  .shell {
+    width: calc(100vw - 24px);
+    margin: 12px auto;
+    gap: 12px;
+  }
 
-@media (max-width: 1120px) {
-  .app-shell {
+  .shell-header,
+  .table-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .header-meta {
+    grid-auto-flow: row;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    width: 100%;
+    gap: 12px;
+  }
+
+  .page-grid,
+  .stats-strip,
+  .modal-form {
     grid-template-columns: 1fr;
   }
 
-  .sidebar {
-    position: static;
-  }
-
-  .tab-grid,
-  .users-grid,
-  .system-grid {
-    grid-template-columns: 1fr;
+  .modal-actions {
+    justify-content: stretch;
   }
 }
 
-@media (max-width: 720px) {
-  .login-shell,
-  .app-shell {
-    padding: 12px;
-  }
-
-  .login-card,
-  .sidebar,
-  .panel-card,
-  .topbar {
+@media (max-width: 640px) {
+  .login-shell {
     padding: 16px;
   }
 
-  .topbar {
-    flex-direction: column;
-    align-items: start;
+  .shell {
+    width: calc(100vw - 16px);
+    margin: 8px auto;
   }
 
-  .header-actions,
-  .modal-form,
-  .modal-actions {
+  .shell-header,
+  .panel-card,
+  .login-card,
+  .modal-card {
+    padding: 16px;
+  }
+
+  .tabbar {
+    width: 100%;
+  }
+
+  .tab-button {
+    flex: 1 1 0;
+  }
+
+  .header-meta {
     grid-template-columns: 1fr;
-    flex-direction: column;
-    align-items: stretch;
   }
 
-  .sparkline-row {
-    grid-template-columns: 52px minmax(0, 1fr);
+  .usage-row {
+    grid-template-columns: 40px minmax(0, 1fr);
   }
 
-  .sparkline-row span:last-child {
+  .usage-row strong {
     grid-column: 2;
+    text-align: left;
   }
 }