style(webui): match dashboard reference

webui/index.html

@@ -10,17 +10,43 @@
     <div class="app-shell">
       <aside class="sidebar">
         <div class="brand-block">
+          <svg class="brand-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m21 3-7.6 18-3.8-7.6L2 9.6zM9.6 13.4 14 10" />
+          </svg>
           <div class="eyebrow">Telegram Scraper</div>
           <h1>Control</h1>
           <p class="muted">Local scraper console for channels, jobs, and continuous runs.</p>
         </div>
 
         <nav class="nav-links">
-          <a class="nav-link active" href="/">Dashboard</a>
+          <a class="nav-link active" href="/"
-          <a class="nav-link" href="/settings">Settings</a>
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
-          <a class="nav-link" href="/viewer">Message Viewer</a>
+              <rect x="4" y="4" width="6" height="6" />
-          <a class="nav-link" href="/swagger">API Docs</a>
+              <rect x="14" y="4" width="6" height="6" />
-          <a class="nav-link" href="/health">Health</a>
+              <rect x="4" y="14" width="6" height="6" />
+              <rect x="14" y="14" width="6" height="6" /></svg
+            >Dashboard</a
+          >
+          <a class="nav-link" href="/settings"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="3" />
+              <path
+                d="M12 2v3m0 14v3M2 12h3m14 0h3m-2.9-7.1-2.1 2.1M4.9 19.1 7 17m0-10-2.1-2.1m12.2 14.2-2.1-2.1" /></svg
+            >Settings</a
+          >
+          <a class="nav-link" href="/viewer"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h16v12H8l-4 3z" /></svg>Message
+            Viewer</a
+          >
+          <a class="nav-link" href="/swagger"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="m8 5-5 7 5 7m8-14 5 7-5 7M14 3l-4 18" /></svg
+            >API Docs</a
+          >
+          <a class="nav-link" href="/health"
+            ><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h4l2-6 4 12 2-6h6" /></svg
+            >Health</a
+          >
         </nav>
 
         <section class="status-card" id="active-account-card">
@@ -39,6 +65,13 @@
       </aside>
 
       <main class="content">
+        <header class="dashboard-topbar">
+          <div class="dashboard-title"><span class="menu-icon" aria-hidden="true">☰</span>Dashboard</div>
+          <div class="runtime-status">
+            <span class="runtime-dot"></span>Service: Running <i></i> Scraper: Idle <i></i
+            ><span class="runtime-clock"></span>
+          </div>
+        </header>
         <!-- Account Tabs -->
         <div id="account-tabs" class="account-tabs"></div>
 

webui/style.css

@@ -1506,9 +1506,16 @@ input,
   background: var(--accent-soft);
 }
 .nav-link::before {
-  content: '—';
+  display: none;
-  width: 16px;
+}
-  color: currentColor;
+.nav-icon {
+  display: inline-grid;
+  width: 18px;
+  place-items: center;
+  color: #c6c6c6;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1;
 }
 
 .status-card,
@@ -1548,15 +1555,56 @@ input,
 
 .content {
   max-width: none;
-  padding: 24px 28px 40px;
+  padding: 0 28px 40px;
 }
 .content::before {
-  content: '';
+  display: none;
-  display: block;
+}
-  height: 43px;
+.dashboard-topbar {
-  margin: -24px -28px 24px;
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 0 -28px 20px;
+  padding: 0 28px;
   border-bottom: 1px solid var(--line);
 }
+.dashboard-title,
+.runtime-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: #efefef;
+  font-size: 13px;
+  font-weight: 650;
+}
+.menu-icon {
+  color: #dedede;
+  font-size: 20px;
+  font-weight: 400;
+}
+.runtime-status {
+  color: #b8b8b8;
+  font-size: 12px;
+  font-weight: 500;
+}
+.runtime-status i {
+  width: 1px;
+  height: 17px;
+  background: #363636;
+}
+.runtime-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #e2e2e2;
+}
+.runtime-clock::before {
+  content: '◷';
+  color: #e1e1e1;
+  font-size: 17px;
+}
 .content-tabs,
 .account-tabs {
   gap: 0;
@@ -1612,18 +1660,63 @@ input,
   margin-bottom: 14px;
 }
 .stat-panel {
-  min-height: 128px;
+  position: relative;
-  padding: 17px 18px;
+  min-height: 187px;
+  padding: 18px;
+}
+.stat-panel::after {
+  content: '';
+  position: absolute;
+  right: 18px;
+  bottom: 65px;
+  left: 18px;
+  height: 1px;
+  background: #343434;
+}
+.stat-panel::before {
+  position: absolute;
+  top: 17px;
+  right: 18px;
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 1px solid #9c9c9c;
+  border-radius: 50%;
+  color: #e4e4e4;
+  font-size: 15px;
+  font-weight: 400;
+}
+.stat-panel:nth-child(1)::before {
+  content: '⌘';
+}
+.stat-panel:nth-child(2)::before {
+  content: '⇩';
+}
+.stat-panel:nth-child(3)::before {
+  content: '⇄';
+}
+.stat-panel:nth-child(4)::before {
+  content: '◇';
 }
 .stat-value {
-  margin-top: 20px;
+  margin-top: 24px;
-  font-size: 30px;
+  font-size: 28px;
   font-weight: 650;
   letter-spacing: -0.04em;
 }
 .stat-compact {
   font-size: 19px;
 }
+.stat-panel .account-health-detail {
+  position: absolute;
+  right: 18px;
+  bottom: 17px;
+  left: 18px;
+}
+.stat-panel .section-title {
+  max-width: calc(100% - 34px);
+}
 .panel-header,
 .dialog-header,
 .job-head {
@@ -1828,3 +1921,270 @@ tbody tr:hover {
     white-space: nowrap;
   }
 }
+
+/* Dashboard reference fidelity pass */
+:root {
+  --sidebar-width: 244px;
+}
+
+.app-shell {
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+}
+
+.sidebar {
+  width: var(--sidebar-width);
+  padding: 18px 12px;
+}
+
+.brand-block {
+  min-height: 62px;
+  padding: 5px 9px 14px;
+}
+
+.brand-block::before {
+  display: none;
+}
+
+.brand-icon {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  width: 27px;
+  height: 27px;
+  fill: none;
+  stroke: #f1f1f1;
+  stroke-width: 1.65;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.brand-block h1 {
+  margin-left: 37px;
+  font-size: 15px;
+}
+
+.brand-block .eyebrow {
+  margin-left: 37px;
+  color: #f5f5f5;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.nav-links {
+  gap: 5px;
+  margin: 6px 0 0;
+}
+
+.nav-link {
+  min-height: 45px;
+  gap: 12px;
+  padding: 0 13px;
+  color: #a1a1a1;
+  font-size: 13px;
+}
+
+.nav-link.active {
+  border-color: transparent;
+  background: #202020;
+}
+
+a.nav-link {
+  border-bottom-color: transparent;
+}
+
+.nav-icon {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.status-card:first-of-type {
+  margin-top: auto;
+}
+
+.status-card {
+  padding: 15px 10px 5px;
+}
+
+.content {
+  padding: 0 20px 28px;
+}
+
+.dashboard-topbar {
+  min-height: 58px;
+  margin: 0 -20px 20px;
+  padding: 0 28px;
+}
+
+.dashboard-title {
+  gap: 22px;
+  font-size: 14px;
+}
+
+.menu-icon {
+  font-size: 21px;
+}
+
+.runtime-status {
+  gap: 13px;
+}
+
+.account-tabs {
+  margin-bottom: 18px;
+}
+
+.account-tab {
+  min-height: 36px;
+  padding: 7px 16px;
+}
+
+.content-tabs {
+  margin-bottom: 16px;
+}
+
+.content-tab {
+  min-height: 35px;
+  padding: 6px 13px;
+}
+
+.panel-grid {
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.panel,
+.stat-panel {
+  border-color: #303030;
+  border-radius: 7px;
+}
+
+.stat-panel {
+  min-height: 188px;
+  padding: 18px 18px 16px;
+}
+
+.stat-panel::after {
+  right: 16px;
+  bottom: 66px;
+  left: 16px;
+  background: #363636;
+}
+
+.stat-panel::before {
+  top: 16px;
+  right: 16px;
+  width: 25px;
+  height: 25px;
+}
+
+.section-title {
+  color: #ebebeb;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-transform: none;
+}
+
+.stat-value {
+  margin-top: 20px;
+  font-size: 27px;
+  font-weight: 500;
+}
+
+.stat-panel .account-health-detail {
+  color: #c7c7c7;
+  font-size: 12px;
+}
+
+.panel {
+  padding: 0;
+  overflow: hidden;
+}
+
+.panel-header {
+  min-height: 52px;
+  padding: 0 18px;
+  border-bottom: 1px solid #343434;
+}
+
+.panel-header h2 {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.panel-header .muted {
+  display: none;
+}
+
+.inline-form {
+  gap: 8px;
+}
+
+.inline-form input {
+  width: 168px;
+}
+
+.table-wrap {
+  padding: 0 8px;
+}
+
+th,
+td {
+  height: 38px;
+  padding: 9px 10px;
+  border-bottom-color: #303030;
+}
+
+th {
+  color: #e6e6e6;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+td {
+  color: #d0d0d0;
+  font-size: 12px;
+}
+
+.action-row .button,
+td .button,
+.job-card .button {
+  min-height: 29px;
+  padding: 4px 9px;
+  border-radius: 5px;
+  font-size: 11px;
+}
+
+.jobs-list {
+  padding: 12px 16px 16px;
+}
+
+.job-card {
+  padding: 14px;
+}
+
+@media (max-width: 768px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    width: auto;
+  }
+
+  .content {
+    padding: 0 16px 20px;
+  }
+
+  .dashboard-topbar {
+    margin: 0 -16px 16px;
+    padding: 0 16px;
+  }
+}