add window guard

client/frontend/src/app.css

@@ -93,6 +93,20 @@ body {
   margin-bottom: 1.5rem;
 }
 
+.brand-logo-img {
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.login-brand-row .brand-logo-img {
+  width: 48px;
+  height: 48px;
+}
+
 .login-logo {
   width: 48px;
   height: 48px;
@@ -413,24 +427,61 @@ body {
   justify-content: space-between;
   align-items: baseline;
   gap: 0.5rem;
-  margin-bottom: 0.65rem;
+  margin-bottom: 0.4rem;
+  flex-shrink: 0;
 }
 
 .card-title-sub {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: var(--text-muted);
   font-family: monospace;
 }
 
 .clock-display-summary {
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.45rem;
+  padding-bottom: 0.45rem;
   border-bottom: 1px dashed var(--border-color);
+  flex: 0 0 auto;
+}
+
+.clock-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-subtle);
+  font-size: 0.72rem;
+}
+
+.clock-chip em {
+  font-style: normal;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.clock-chip strong {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 0.78rem;
+  font-weight: 700;
+}
+
+.clock-chip--online strong {
+  color: var(--online-color);
+}
+
+.clock-chip--offline strong {
+  color: var(--offline-color);
 }
 
 .shifts-wrap {
+  flex: 1;
+  min-height: 0;
   overflow: auto;
-  max-height: min(32vh, 220px);
 }
 
 .shifts-table {
@@ -571,10 +622,11 @@ body {
 .clocks-card {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
+  gap: 0.4rem;
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  padding: 0.75rem 0.85rem;
 }
 
 .card-title {