.top-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}
.connection {
  display: inline-flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  border: 1px solid #ffffff12;
  border-radius: 999px;
  background: #1b1b1bcf;
  box-shadow: inset 0 1px #ffffff0a;
}
.connection > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px 0 11px;
  color: #ff9aaa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.connection > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff7188;
  box-shadow: 0 0 0 4px #ff718817;
}
.connection.is-online { border-color: #4ddda735; }
.connection.is-online > span { color: #7dffbd; }
.connection.is-online > span i {
  background: #4ddda7;
  box-shadow: 0 0 0 4px #4ddda718, 0 0 12px #4ddda755;
}
.connection-retry {
  display: grid;
  width: 33px;
  height: 100%;
  place-items: center;
  border: 0;
  border-left: 1px solid #ffffff10;
  background: #ffffff06;
  color: #d0d0d0;
  font-size: 17px;
  cursor: pointer;
}
.connection-retry:active { background: #ffffff12; }
.connection-retry.checking { animation: connection-spin .7s linear infinite; }
@keyframes connection-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .top { align-items: flex-start; }
  .top-status { gap: 6px; flex-wrap: wrap; }
  .who { display: none; }
  .connection > span { padding-left: 9px; }
  .compact { padding: 9px 10px; font-size: 11px; }
}

.shop-last-report {
  display: block;
  margin-top: 7px;
  color: #b8c8da;
  font-size: 11px;
  font-weight: 750;
}
.shop-date-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--shop) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--shop) 14%, #1a1a1a);
  color: #f2f2f2;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
}
.offline-preload{margin-bottom:20px;padding:18px;border:1px solid #ffffff18;border-radius:19px;background:#111111a8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.offline-preload h2{margin:6px 0 7px;font-size:20px}.offline-preload p{margin:0;color:#b9b9b9;font-size:13px;line-height:1.45}
.offline-download{border:1px solid #ffffff1c;background:#292929;color:#fff}.offline-download.is-ready{border-color:#59e1ac55;background:#18352b;color:#8dffcf}
.offline-progress{margin-top:13px}.offline-progress>span{display:block;height:7px;overflow:hidden;border-radius:999px;background:#ffffff12}.offline-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#46c994,#84ffd0);box-shadow:0 0 18px #59e1ac88;transition:width .18s}
.offline-progress small{display:block;margin-top:8px;color:#bcbcbc;font-size:11px}.login-divider{display:flex;align-items:center;gap:10px;margin:4px 0 16px;color:#8c8c8c;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.login-divider:before,.login-divider:after{content:'';flex:1;height:1px;background:#ffffff13}

/* Warm status palette */
.connection.is-online{border-color:#d7b06a35}
.connection.is-online>span{color:#f1d39a}
.connection.is-online .connection-dot{background:#d7b06a;box-shadow:0 0 0 4px #d7b06a18,0 0 12px #d7a85d55}
.connection small{color:#b9aa96}
.offline-download.is-ready{border-color:#d7b06a55;background:#3b2f20;color:#f1d39a}
.offline-progress i{background:linear-gradient(90deg,#b8894e,#efd094);box-shadow:0 0 18px #d7a85d66}