/* Ladi UX Block - Updated visual style */
.ladi-ux-wrapper {
  box-sizing: border-box;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
  padding: 18px 12px;
}

.ladi-ux-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

/* Each item: icon on left, text block on the right */
.ladi-ux-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Icon circle */
.ladi-ux-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Icon SVGs sized properly */
.ladi-ux-icon svg { width: 24px; height: 24px; fill: #fff; opacity: 0.95; }

/* Text - two parts: label and value (value bold) */
.ladi-ux-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.ladi-ux-line {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.ladi-ux-sub { font-weight: 600; font-size: 18px; color: #fff; }

/* Smaller muted subtitle under main line if needed */
.ladi-ux-muted { font-size: 13px; color: rgba(255,255,255,0.85); font-weight:600; margin-top:3px; }

/* Make the first line (time) use monospace for numbers for uniform spacing */
.ladi-ux-time { font-family: 'SFMono-Regular', Menlo, Monaco, monospace; }

/* Add subtle divider between items if desired */
/* .ladi-ux-item + .ladi-ux-item { border-top: 1px solid rgba(255,255,255,0.04); padding-top: 12px; } */

/* Responsive */
@media (max-width: 520px) {
  .ladi-ux-line { font-size: 16px; }
  .ladi-ux-sub { font-size: 16px; }
  .ladi-ux-icon { width: 24px; height: 24px; }
  .ladi-ux-icon svg { width: 20px; height: 20px; }
  .ladi-ux-wrapper { padding: 12px; }
}