.connection-panel { display: grid; grid-template-columns: minmax(260px, .8fr) 1.7fr; gap: 28px; align-items: center; padding: 24px; margin-bottom: 18px; }
.connection-state { display: flex; align-items: center; gap: 16px; }
.connection-state small, .connection-state strong { display: block; }
.connection-state small { color: #7d899a; font-size: 11px; }
.connection-state strong { margin-top: 5px; font-size: 22px; }
.connection-state p { margin: 6px 0 0; color: #d14b48; font-size: 11px; word-break: break-word; }
.connection-dot { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; background: #aab2bf; box-shadow: 0 0 0 7px #aab2bf20; }
.connection-dot[data-state="connected"] { background: #28b47d; box-shadow: 0 0 0 7px #28b47d20; }
.connection-dot[data-state="disconnected"] { background: #e25650; box-shadow: 0 0 0 7px #e2565020; }
.connection-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.connection-details div { min-width: 0; padding: 4px 20px; border-left: 1px solid #e7eaf0; }
.connection-details dt { color: #8a95a6; font-size: 10px; }
.connection-details dd { margin: 7px 0 0; color: #26364c; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.data-metric-grid, .storage-metric-grid { margin-bottom: 18px; }
.storage-metric-grid { grid-template-columns: repeat(4, 1fr); }
.metric-card.amber { border-color: #f1e2c9; }
.metric-card.amber strong { color: #b87718; }
.sync-progress-panel { padding: 23px; margin-bottom: 18px; }
.sync-progress-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.sync-progress-heading span, .sync-progress-heading strong { display: block; }
.sync-progress-heading span { color: #738096; font-size: 11px; }
.sync-progress-heading strong { margin-top: 4px; font-size: 25px; }
.sync-progress-heading small { color: #8d97a6; }
.sync-progress-track { height: 9px; overflow: hidden; border-radius: 20px; background: #edf0f4; }
.sync-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e22d27, #f05a4f); transition: width .25s; }
.sync-detail-panel { padding: 22px; margin-bottom: 18px; }
.data-refresh-button { display: flex; align-items: center; justify-content: center; }
#page-dashboard { position: relative; min-height: calc(100vh - 136px); padding-bottom: 88px; }
.dashboard-relay-status { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: 18px minmax(130px, auto) 18px; gap: 13px; align-items: center; min-width: 245px; padding: 14px 16px; border: 1px solid #e1e4e8; border-radius: 7px; background: #fff; color: #222b38; text-align: left; box-shadow: 0 5px 18px #11182012; }
.dashboard-relay-status:hover { border-color: #d7b3b1; box-shadow: 0 7px 22px #1118201b; }
.dashboard-relay-status small, .dashboard-relay-status strong, .dashboard-relay-status em { display: block; }
.dashboard-relay-status small { color: #7d899a; font-size: 10px; }
.dashboard-relay-status strong { margin-top: 2px; font-size: 14px; }
.dashboard-relay-status em { margin-top: 3px; color: #9aa3af; font-size: 9px; font-style: normal; }
.dashboard-relay-status > .ui-icon { width: 16px; height: 16px; color: #9aa3af; }

@media (max-width: 900px) {
  .connection-panel { grid-template-columns: 1fr; }
  .connection-details div:first-child { border-left: 0; }
  .storage-metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .connection-details, .storage-metric-grid { grid-template-columns: 1fr; }
  .connection-details div { padding: 12px 0; border-top: 1px solid #e7eaf0; border-left: 0; }
  .connection-details div:first-child { border-top: 0; }
  #page-dashboard { padding-bottom: 96px; }
  .dashboard-relay-status { right: 0; left: 0; width: 100%; }
}