.live-widget {
  --widget-tint: var(--accent);
  width: 228px;
  height: 94px;
  padding: 17px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ink) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--page) 65%, transparent);
  font-family: 'Open Runde', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.2;
  text-align: left;
  user-select: none;
}
.live-widget *, .live-widget *::before, .live-widget *::after { box-sizing: border-box; }
.widget-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.widget-title { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.widget-number { display: block; font-size: 25px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: normal; }
.widget-number-small { font-size: 20px; }
.widget-unit { margin-left: 3px; margin-right: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.widget-caption { color: var(--muted); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.widget-icon { display: block; object-fit: contain; filter: var(--icon-filter); }
.widget-focus { justify-content: flex-start; }
.widget-focus-ring { width: 51px; height: 51px; border-radius: 50%; flex: 0 0 51px; position: relative; background: conic-gradient(from -90deg, var(--widget-tint) 0 76%, color-mix(in srgb, var(--widget-tint) 13%, transparent) 76% 100%); }
.widget-focus-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.widget-focus-ring::after { content: ''; position: absolute; width: 7px; height: 7px; top: 0; left: 22px; border-radius: 50%; background: var(--widget-tint); }
.widget-focus-dot { position: absolute; inset: 22px; background: var(--widget-tint); border-radius: 50%; }
.widget-focus .widget-copy { gap: 3px; }
.widget-focus .widget-number { font-size: 27px; }
.widget-focus .widget-caption { max-width: 129px; white-space: normal; }
.widget-bars { display: flex; height: 36px; gap: 4px; align-items: flex-end; flex: 0 0 auto; }
.widget-bars i { display: block; width: 5px; height: var(--bar); min-height: 4px; border-radius: 999px; background: var(--widget-tint); }
.widget-activity-bars { position: absolute; right: 23px; top: 25px; opacity: .75; height: 29px; gap: 3px; }
.widget-activity-bars i { width: 4px; }
.widget-activity .widget-number { font-size: 22px; }
.widget-activity .widget-title { padding-right: 65px; }
.widget-activity .widget-number { padding-right: 43px; }
.widget-score-ring { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: conic-gradient(var(--widget-tint) 86%, color-mix(in srgb, var(--widget-tint) 15%, transparent) 0); position: relative; }
.widget-score-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.widget-score-ring > span { z-index: 1; font-size: 17px; font-weight: 600; }
.widget-score-ring > span > span { font-size: 11px; }
.widget-productive { justify-content: flex-start; }
.widget-symbol { flex: 0 0 40px; }
.widget-switch-symbol { display: flex; position: relative; height: 40px; align-items: center; justify-content: space-between; }
.widget-switch-symbol .widget-icon { width: 21px; height: 21px; }
.widget-switch-symbol .widget-icon:last-child { transform: rotate(180deg); align-self: flex-end; }
.widget-switch-symbol .widget-icon:first-child { align-self: flex-start; }
.widget-switch-symbol > span { position: absolute; width: 22px; height: 1px; background: var(--muted); opacity: .25; transform: rotate(-45deg); left: 9px; top: 19px; }
.widget-switches, .widget-agent, .widget-reminder { justify-content: flex-start; }
.widget-agent-mark { display: grid; grid-template-columns: repeat(2, 12px); gap: 4px; transform: rotate(-10deg); margin: 0 6px; flex: 0 0 auto; }
.widget-agent-mark i { display: block; width: 12px; height: 12px; border-radius: 4px; background: var(--widget-tint); }
.widget-agent-mark i:nth-child(2), .widget-agent-mark i:nth-child(3) { opacity: .45; }
.widget-weekly-chart { position: absolute; right: 23px; top: 25px; width: 58px; color: var(--widget-tint); }
.widget-weekly-chart .widget-bars { height: 31px; gap: 3px; }
.widget-weekly-chart .widget-bars i { width: 5px; }
.widget-weekly .widget-number { font-size: 23px; }
.widget-weekly .widget-title { padding-right: 70px; }
.widget-weekly .widget-number { padding-right: 55px; }
.widget-weekly .widget-caption { margin-top: 1px; }
.widget-leverage-mark { position: absolute; right: 25px; top: 22px; display: flex; align-items: flex-start; gap: 4px; }
.widget-leverage-mark .widget-bars { height: 31px; }
.widget-leverage-mark .widget-icon { width: 16px; height: 16px; }
.widget-reminder-mark { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--widget-tint) 12%, transparent); }
.widget-reminder-mark .widget-icon { width: 23px; height: 23px; }