+
diff --git a/webui/style.css b/webui/style.css
index 6d0c4c0..11f23ec 100644
--- a/webui/style.css
+++ b/webui/style.css
@@ -1506,9 +1506,16 @@ input,
background: var(--accent-soft);
}
.nav-link::before {
- content: '—';
- width: 16px;
- color: currentColor;
+ display: none;
+}
+.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: block;
- height: 43px;
- margin: -24px -28px 24px;
+ display: none;
+}
+.dashboard-topbar {
+ 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;
- padding: 17px 18px;
+ position: relative;
+ 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;
- font-size: 30px;
+ margin-top: 24px;
+ 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;
+ }
+}