feat: service credentials (login/password) on dashboard cards with copy button

app/static/style.css

@@ -344,6 +344,72 @@ button {
   border-color: #0f5b94;
   color: #fff;
 }
+.tile-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.svc-credentials {
+  background: linear-gradient(135deg, #f0f6fc 0%, #e8f2f9 100%);
+  border: 1px solid #c7d9ea;
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+  padding: 0.55rem 0.85rem 0.65rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.svc-cred-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+.svc-cred-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: #5a7d9a;
+  min-width: 3.8rem;
+  flex-shrink: 0;
+}
+.svc-cred-value {
+  font-size: 0.84rem;
+  font-family: monospace;
+  color: #1a3a52;
+  font-weight: 600;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.svc-cred-masked {
+  letter-spacing: .12em;
+  font-size: 0.9rem;
+}
+.svc-cred-copy {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border: 1px solid #b0c8de;
+  border-radius: 6px;
+  background: #fff;
+  color: #3a6d96;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  font-size: 0.78rem;
+  transition: background .15s, color .15s, border-color .15s;
+  font-family: sans-serif;
+}
+.svc-cred-copy::before { content: "\2398"; font-size: 0.9rem; }
+.svc-cred-copy.copied { background: #1a8a4a; border-color: #1a8a4a; color: #fff; }
+.svc-cred-copy.copied::before { content: "\2713"; }
+.svc-cred-copy:hover:not(.copied) { background: #e6f0f9; border-color: #7aabcf; }
+
 .tile {
   display: flex;
   flex-direction: column;
@@ -355,6 +421,7 @@ button {
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
   border: 1px solid transparent;
   transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
+  flex: 1;
 }
 .tile:hover {
   transform: translateY(-2px);
@@ -546,6 +613,11 @@ button {
   border: 1px solid rgba(255, 255, 255, 0.45);
   backdrop-filter: blur(3px);
 }
+.dashboard-page .svc-credentials {
+  background: rgba(224, 240, 252, 0.7);
+  border-color: rgba(180, 210, 235, 0.6);
+  backdrop-filter: blur(3px);
+}
 
 
 .made-by-wrap {
@@ -643,6 +715,11 @@ button {
   background: rgba(255, 255, 255, 0.9) !important;
   border: 1px solid rgba(198, 218, 235, 0.9) !important;
 }
+.dashboard-page .svc-credentials {
+  backdrop-filter: none !important;
+  background: rgba(232, 244, 253, 0.95) !important;
+  border-color: rgba(180, 210, 235, 0.9) !important;
+}
 .dashboard-page .panel {
   width: 100%;
   min-width: 0;
@@ -812,3 +889,7 @@ button {
 .tile-comment th { background: #eaf2fb; font-weight: 700; }
 .tile-comment del { text-decoration: line-through; color: #7a9aaf; }
 .tile-comment input[type=checkbox] { margin-right: 0.3em; }
+
+.tile-wrap:has(.svc-credentials) .tile {
+  border-radius: 12px 12px 0 0;
+}