I want to style this TemplateChild<gtk::Label> and make it grey in color.

#[derive(Default, gtk::CompositeTemplate, glib::Properties)]
#[properties(wrapper_type = super::AccountRow)]
#[template(resource = "/com/belmoussaoui/Authenticator/account_row.ui")]
pub struct AccountRow {
    #[property(get, set, construct_only)]
    pub account: OnceCell<Account>,
    #[template_child]
    pub increment_btn: TemplateChild<gtk::Button>,
    #[template_child]
    pub otp_label: TemplateChild<gtk::Label>,
    #[template_child]
    pub next_otp_label: TemplateChild<gtk::Label>,
}

Here is how its defined in account_row.ui.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template parent="AdwActionRow" class="AccountRow">
    <property name="activatable">True</property>
    <property name="selectable">False</property>
    <property name="use-markup">False</property>
    <child type="suffix">
      <object class="GtkLabel" id="otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkLabel" id="next_otp_label">
        <property name="halign">start</property>
        <property name="valign">center</property>
        <property name="selectable">True</property>
        <style>
          <class name="numeric" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton" id="increment_btn">
        <property name="visible">False</property>
        <property name="valign">center</property>
        <property name="action-name">account.increment-counter</property>
        <property name="icon-name">refresh-symbolic</property>
        <property name="tooltip-text" translatable="yes">Increment the counter</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkButton">
        <property name="valign">center</property>
        <property name="action-name">account.copy-otp</property>
        <property name="icon-name">copy-symbolic</property>
        <property name="tooltip-text" translatable="yes">Copy PIN to clipboard</property>
        <style>
          <class name="flat" />
        </style>
      </object>
    </child>
    <child type="suffix">
      <object class="GtkImage">
        <property name="icon_name">go-next-symbolic</property>
        <property name="tooltip-text" translatable="yes">Account details</property>
      </object>
    </child>
  </template>
</interface>

I've tried in style.css, I expected it to change something, but it didn't do anything.

#next_otp_label {
  color: gray;
}