.

apps/web/src/styles/app.css

@@ -1,23 +1,23 @@
 :root {
-  color-scheme: light;
+  color-scheme: dark;
-  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
   line-height: 1.5;
   font-weight: 400;
   background:
-    radial-gradient(circle at top left, rgba(183, 198, 211, 0.22), transparent 28%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0, transparent 180px),
-    linear-gradient(180deg, #f6f7f5 0%, #eceeea 100%);
+    linear-gradient(180deg, #0b0d10 0%, #111418 100%);
-  color: #17202a;
+  color: #e7eaee;
-  --surface: rgba(255, 255, 255, 0.86);
+  --surface: #14181d;
-  --surface-strong: #ffffff;
+  --surface-strong: #1a1f25;
-  --surface-muted: #eef1ed;
+  --surface-muted: #111418;
-  --border: rgba(23, 32, 42, 0.12);
+  --border: rgba(255, 255, 255, 0.08);
-  --border-strong: rgba(23, 32, 42, 0.18);
+  --border-strong: rgba(255, 255, 255, 0.14);
-  --text-muted: #5d6772;
+  --text-muted: #949da7;
-  --accent: #22384c;
+  --accent: #d7dde3;
-  --accent-soft: #d8e1e8;
+  --accent-soft: #252b33;
-  --danger: #8f3b32;
+  --danger: #d2766b;
-  --success: #255c44;
+  --success: #7db796;
-  --shadow: 0 24px 60px rgba(21, 27, 34, 0.08);
+  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
 }
 
 * {
@@ -29,6 +29,7 @@ body {
   min-height: 100vh;
   background: inherit;
   color: inherit;
+  letter-spacing: 0.01em;
 }
 
 button,
@@ -56,15 +57,26 @@ button {
 .table-card,
 .modal-card {
   background: var(--surface);
-  backdrop-filter: blur(18px);
   border: 1px solid var(--border);
-  border-radius: 24px;
+  border-radius: 2px;
   box-shadow: var(--shadow);
 }
 
 .auth-card {
   width: min(100%, 460px);
   padding: 32px;
+  position: relative;
+}
+
+.auth-card::before,
+.toolbar-card::before,
+.table-card::before,
+.modal-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgba(255, 255, 255, 0.03);
+  pointer-events: none;
 }
 
 .page-shell {
@@ -88,11 +100,11 @@ button {
 }
 
 .admin-pill {
-  background: rgba(34, 56, 76, 0.08);
+  background: #0f1216;
-  color: var(--accent);
+  color: #c8d0d7;
-  border: 1px solid rgba(34, 56, 76, 0.12);
+  border: 1px solid var(--border);
   padding: 10px 14px;
-  border-radius: 999px;
+  border-radius: 2px;
 }
 
 .eyebrow {
@@ -113,11 +125,13 @@ h1 {
   font-size: clamp(2rem, 3vw, 2.8rem);
   line-height: 1.05;
   margin-bottom: 8px;
+  font-weight: 600;
 }
 
 h2 {
   font-size: 1.2rem;
   margin-bottom: 6px;
+  font-weight: 600;
 }
 
 .auth-copy,
@@ -134,6 +148,7 @@ h2 {
   align-items: end;
   padding: 20px;
   margin-bottom: 16px;
+  position: relative;
 }
 
 .search-field {
@@ -160,47 +175,62 @@ h2 {
 input {
   width: 100%;
   padding: 13px 14px;
-  border-radius: 14px;
+  border-radius: 2px;
   border: 1px solid var(--border-strong);
   background: var(--surface-strong);
   color: inherit;
 }
 
 input:focus {
-  outline: 2px solid rgba(34, 56, 76, 0.18);
+  outline: none;
-  border-color: rgba(34, 56, 76, 0.35);
+  border-color: #7d8892;
+  box-shadow: inset 0 0 0 1px #7d8892;
 }
 
 .primary-button,
 .ghost-button,
 .danger-button {
-  border-radius: 14px;
+  border-radius: 2px;
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   padding: 12px 16px;
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.78rem;
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
 }
 
 .primary-button {
-  background: var(--accent);
+  background: #d9dee3;
-  color: white;
+  color: #0c0f12;
+  border-color: #d9dee3;
 }
 
 .ghost-button {
-  background: var(--surface-strong);
+  background: #171b20;
-  color: var(--accent);
+  color: #d0d6dc;
   border-color: var(--border);
 }
 
 .danger-button {
-  background: rgba(143, 59, 50, 0.08);
+  background: rgba(210, 118, 107, 0.08);
   color: var(--danger);
-  border-color: rgba(143, 59, 50, 0.18);
+  border-color: rgba(210, 118, 107, 0.22);
 }
 
 .primary-button:hover,
 .ghost-button:hover,
 .danger-button:hover {
-  transform: translateY(-1px);
+  background-color: #20262d;
+}
+
+.primary-button:hover {
+  background: #eef2f5;
+  border-color: #eef2f5;
+  color: #0c0f12;
+}
+
+.danger-button:hover {
+  background: rgba(210, 118, 107, 0.14);
 }
 
 .primary-button:disabled,
@@ -212,22 +242,22 @@ input:focus {
 }
 
 .notice {
-  border-radius: 18px;
+  border-radius: 2px;
   padding: 14px 16px;
   margin: 0 0 16px;
   border: 1px solid transparent;
 }
 
 .notice.success {
-  background: rgba(37, 92, 68, 0.08);
+  background: rgba(125, 183, 150, 0.08);
   color: var(--success);
-  border-color: rgba(37, 92, 68, 0.15);
+  border-color: rgba(125, 183, 150, 0.16);
 }
 
 .notice.error {
-  background: rgba(143, 59, 50, 0.08);
+  background: rgba(210, 118, 107, 0.08);
   color: var(--danger);
-  border-color: rgba(143, 59, 50, 0.15);
+  border-color: rgba(210, 118, 107, 0.16);
 }
 
 .form-error {
@@ -237,6 +267,7 @@ input:focus {
 
 .table-card {
   padding: 22px;
+  position: relative;
 }
 
 .table-header {
@@ -254,6 +285,7 @@ input:focus {
 table {
   width: 100%;
   border-collapse: collapse;
+  background: var(--surface-muted);
 }
 
 th,
@@ -268,6 +300,13 @@ th {
   font-size: 0.85rem;
   color: var(--text-muted);
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: #101419;
+}
+
+tbody tr:hover {
+  background: rgba(255, 255, 255, 0.025);
 }
 
 .table-actions {
@@ -287,13 +326,14 @@ th {
   inset: 0;
   display: grid;
   place-items: center;
-  background: rgba(18, 25, 33, 0.36);
+  background: rgba(5, 7, 10, 0.72);
   padding: 20px;
 }
 
 .modal-card {
   width: min(100%, 520px);
   padding: 24px;
+  position: relative;
 }
 
 .modal-header,