Simplify web UI theme

webui/style.css

@@ -1,25 +1,25 @@
 :root {
   color-scheme: dark;
-  --bg-color: #05070d;
+  --bg-color: #000000;
-  --panel: #0c111d;
+  --panel: #0b0b0b;
-  --panel-solid: #111827;
+  --panel-solid: #101010;
-  --panel-alt: #080b13;
+  --panel-alt: #050505;
-  --text-color: #f4f7fb;
+  --text-color: #f3f5f8;
-  --accent: #355fc7;
+  --accent: #2f57b8;
-  --accent-hover: #426fdd;
+  --accent-hover: #3b63c6;
-  --accent-soft: #111d3c;
+  --accent-soft: #0d1730;
-  --accent-line: #284aa0;
+  --accent-line: #24428d;
-  --accent-2: #7aa5ff;
+  --accent-2: #6f95eb;
-  --bubble-own: #132552;
+  --bubble-own: #0f1c3f;
-  --bubble-other: #141923;
+  --bubble-other: #111111;
-  --dim: #a4adbd;
+  --dim: #9ea7b7;
-  --line: #232b3a;
+  --line: #1f1f1f;
   --danger: #ff7373;
   --ok: #65e6a4;
   --warn: #f6c969;
   --info: #8ec7ff;
   --radius: 22px;
-  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
+  --shadow: none;
   --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
   --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
 }
@@ -30,9 +30,7 @@
 
 body {
   margin: 0;
-  background:
+  background: var(--bg-color);
-    radial-gradient(circle at 16% -10%, rgba(53, 95, 199, 0.26), transparent 34rem),
-    radial-gradient(circle at 95% 18%, rgba(122, 165, 255, 0.1), transparent 28rem), var(--bg-color);
   color: var(--text-color);
   font-family: var(--font-ui);
   font-size: 15px;
@@ -47,8 +45,8 @@ a {
 
 a:hover,
 button:hover {
-  border-color: #354158;
+  border-color: #2b2b2b;
-  background: #151d2c;
+  background: #111111;
   color: var(--text-color);
 }
 
@@ -67,7 +65,7 @@ button {
 }
 
 .sidebar {
-  background: linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), var(--panel-alt);
+  background: var(--panel-alt);
   border-right: 1px solid var(--line);
   padding: 30px 24px;
   overflow-y: auto;
@@ -132,11 +130,17 @@ input,
 .content-tab,
 .viewer-channel-item {
   border: 1px solid var(--line);
-  background: rgba(17, 24, 39, 0.74);
+  background: #101010;
   color: var(--text-color);
   border-radius: 999px;
 }
 
+a.nav-link,
+a.button,
+a.content-tab {
+  border-bottom: 1px solid var(--line);
+}
+
 .nav-link,
 .button,
 .content-tab {
@@ -163,14 +167,14 @@ input,
 .content-tab.active {
   border-color: var(--accent-line);
   color: #ffffff;
-  background: linear-gradient(135deg, var(--accent), #27498f);
+  background: var(--accent);
-  box-shadow: 0 14px 32px rgba(53, 95, 199, 0.28);
+  box-shadow: none;
 }
 
 .nav-link.active:hover,
 .button.primary:hover,
 .content-tab.active:hover {
-  background: linear-gradient(135deg, var(--accent-hover), #3159ad);
+  background: var(--accent-hover);
   color: #ffffff;
 }
 
@@ -195,7 +199,7 @@ input,
 .job-card,
 .message-card,
 .settings-dialog {
-  background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(12, 17, 29, 0.96));
+  background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
@@ -210,25 +214,30 @@ input,
 
 .status-card {
   margin-top: 20px;
+  display: grid;
+  gap: 12px;
+  align-content: start;
 }
 
 .status-card .button {
   width: 100%;
-  margin-top: 10px;
+  margin-top: 0;
 }
 
-.status-card .button:first-of-type {
+.status-card .section-title,
+.status-card p,
+.status-card .status-badge {
   margin-top: 0;
+  margin-bottom: 0;
 }
 
 .status-badge {
   display: inline-flex;
-  margin-top: 12px;
   padding: 7px 12px;
   border: 1px solid var(--line);
   border-radius: 999px;
   color: var(--ok);
-  background: rgba(101, 230, 164, 0.06);
+  background: #0d1410;
 }
 
 .content-tabs {
@@ -331,7 +340,7 @@ input,
   text-align: left;
   border: 1px solid var(--line);
   border-radius: 16px;
-  background: rgba(17, 24, 39, 0.78);
+  background: #101010;
   color: var(--text-color);
   padding: 12px 14px;
   cursor: pointer;
@@ -374,7 +383,7 @@ input {
 
 input:focus {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(53, 95, 199, 0.18);
+  box-shadow: none;
 }
 
 .toggle-row {
@@ -451,7 +460,7 @@ td {
 }
 
 tbody tr:hover {
-  background: rgba(53, 95, 199, 0.08);
+  background: #0d0d0d;
 }
 
 .action-row {
@@ -501,7 +510,7 @@ tbody tr:hover {
   padding: 10px 12px;
   border: 1px solid var(--line);
   border-radius: 16px;
-  background: rgba(17, 24, 39, 0.68);
+  background: #101010;
 }
 
 .checkbox-row input {
@@ -572,7 +581,7 @@ tbody tr:hover {
 }
 
 .settings-dialog::backdrop {
-  background: rgba(3, 6, 13, 0.78);
+  background: rgba(0, 0, 0, 0.82);
 }
 
 .dialog-shell {
@@ -615,7 +624,7 @@ tbody tr:hover {
 }
 
 .viewer-sidebar {
-  background: linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%), var(--panel-alt);
+  background: var(--panel-alt);
   border-right: 1px solid var(--line);
   padding: 18px 14px;
   display: flex;
@@ -667,11 +676,11 @@ tbody tr:hover {
 .viewer-channel-item.active {
   border-color: var(--accent-line);
   background: var(--accent-soft);
-  box-shadow: 0 12px 28px rgba(53, 95, 199, 0.18);
+  box-shadow: none;
 }
 
 .viewer-channel-item:hover {
-  background: rgba(53, 95, 199, 0.12);
+  background: #0f0f0f;
 }
 
 .viewer-channel-avatar {
@@ -681,7 +690,7 @@ tbody tr:hover {
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #456fd5, #243d84);
+  background: #274894;
   color: white;
   font-weight: 700;
   letter-spacing: -0.03em;
@@ -725,7 +734,7 @@ tbody tr:hover {
   min-width: 22px;
   padding: 2px 7px;
   border-radius: 999px;
-  background: rgba(53, 95, 199, 0.22);
+  background: #111a32;
   color: var(--accent-2);
   font-size: 0.76rem;
   text-align: center;
@@ -738,22 +747,14 @@ tbody tr:hover {
   flex-direction: column;
   height: 100vh;
   overflow: hidden;
-  background:
+  background: var(--bg-color);
-    radial-gradient(circle at 18% -12%, rgba(53, 95, 199, 0.18), transparent 32rem),
-    radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.025) 1px, transparent 1.5px),
-    radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px), var(--bg-color);
-  background-size:
-    auto,
-    84px 84px,
-    84px 84px,
-    auto;
 }
 
 .viewer-header {
   flex-shrink: 0;
   padding: 18px 26px;
   border-bottom: 1px solid var(--line);
-  background: rgba(8, 11, 19, 0.94);
+  background: var(--panel-alt);
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -831,7 +832,7 @@ tbody tr:hover {
   align-self: center;
   padding: 5px 12px;
   border-radius: 999px;
-  background: rgba(17, 24, 39, 0.88);
+  background: #111111;
 }
 
 .chat-date-sep:empty {
@@ -1008,7 +1009,7 @@ tbody tr:hover {
   color: var(--dim);
   border: 1px solid var(--line);
   border-radius: 14px;
-  background: rgba(12, 17, 29, 0.86);
+  background: #0b0b0b;
 }
 
 .viewer-empty-state {
@@ -1032,7 +1033,6 @@ tbody tr:hover {
   border-radius: 14px;
   background: var(--panel-solid);
   color: var(--text-color);
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
   transition:
     opacity 0.2s ease,
     transform 0.2s ease;
@@ -1141,7 +1141,7 @@ tbody tr:hover {
   padding: 8px 15px;
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(17, 24, 39, 0.72);
+  background: #101010;
   color: var(--text-color);
   cursor: pointer;
   font: inherit;
@@ -1151,8 +1151,8 @@ tbody tr:hover {
 .account-tab.active {
   border-color: var(--accent-line);
   color: #ffffff;
-  background: linear-gradient(135deg, var(--accent), #27498f);
+  background: var(--accent);
-  box-shadow: 0 12px 26px rgba(53, 95, 199, 0.22);
+  box-shadow: none;
 }
 
 .account-tab .account-tab-status {
@@ -1194,7 +1194,7 @@ tbody tr:hover {
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: 16px;
-  background: rgba(17, 24, 39, 0.68);
+  background: #101010;
 }
 
 .account-list-info {
@@ -1228,7 +1228,7 @@ tbody tr:hover {
   padding: 14px;
   border: 1px solid var(--line);
   border-radius: 18px;
-  background: rgba(17, 24, 39, 0.68);
+  background: #101010;
 }
 
 .import-account-row {
@@ -1238,7 +1238,7 @@ tbody tr:hover {
   padding: 14px;
   border: 1px solid var(--line);
   border-radius: 18px;
-  background: rgba(17, 24, 39, 0.68);
+  background: #101010;
 }
 
 /* ── Active Account Card ─────────────────────────────── */