@layer legacy {
.settings-noise{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:visible!important;
  padding:16px 18px!important;
  container-type:inline-size;
  container-name:settings-noise;
}
.settings-noise .settings-panel-head{
  margin-bottom:8px;
}
.settings-noise .settings-panel-head>div:first-child{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}
.settings-noise .settings-panel-head b{
  font-size:18px;
}
.settings-noise .settings-panel-head small{
  color:var(--text-3);
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}
.settings-noise .settings-auto-head>b{
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.settings-noise-intro{
  padding-bottom:8px;
}
.settings-noise-intro>p{
  margin:0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.5;
}
.settings-noise-section-head{
  display:flex;
  min-height:36px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border-soft);
}
.settings-noise-section-head>b{
  color:var(--text);
  font-size:13px;
  font-weight:850;
}
.settings-noise-custom-head{
  margin-top:8px;
}
.settings-noise-custom-head .settings-auto-head{
  min-height:36px;
}
.settings-noise-system-rules{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  min-width:0;
  column-gap:20px;
}
.settings-noise-system-rule{
  display:flex;
  min-width:0;
  min-height:52px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--border-soft);
}
.settings-noise-system-main{
  display:flex;
  min-width:148px;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.settings-noise-system-main>b{
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.settings-noise-system-controls{
  display:flex;
  flex:0 1 auto;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.settings-noise-system-amount,
.settings-noise-system-count{
  display:flex;
  min-width:0;
  height:40px;
  align-items:center;
  gap:5px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:var(--radius-8);
  background:var(--surface);
  color:var(--text-3);
  font-size:12px;
  font-weight:750;
}
.settings-noise-system-amount:focus-within,
.settings-noise-system-count:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
.settings-noise-system-amount>.fi,
.settings-noise-system-count>.fi{
  width:62px;
  min-width:48px;
  height:38px;
  min-height:38px;
  padding:0 2px;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
.settings-noise-system-count>.fi{
  width:42px;
}
.settings-noise-system-amount em,
.settings-noise-system-count em{
  flex:0 0 auto;
  font-style:normal;
  white-space:nowrap;
}
.settings-noise-rules{
  display:grid;
  min-width:0;
}
.settings-noise-rule{
  display:grid;
  grid-template-columns:28px minmax(156px,1fr) minmax(176px,1.1fr) minmax(132px,.68fr) 40px;
  grid-template-areas:"index account category amount delete";
  align-items:center;
  gap:10px;
  min-width:0;
  padding:8px 0;
  border-bottom:1px solid var(--border-soft);
}
.settings-noise-rule-index{
  display:grid;
  grid-area:index;
  place-items:center;
  align-self:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--primary-light);
  color:var(--primary);
  font-size:12px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
.settings-noise-field{
  display:block;
  color:var(--text);
}
.settings-noise-account{
  grid-area:account;
  min-width:156px;
}
.settings-noise-category{
  grid-area:category;
  min-width:176px;
}
.settings-noise-amount-field{
  grid-area:amount;
  min-width:132px;
}
.settings-noise-field>.fi{
  width:100%;
  min-width:0;
  min-height:40px;
}
.settings-noise-amount-input{
  position:relative;
}
.settings-noise-amount-input::before{
  content:"¥";
  position:absolute;
  z-index:1;
  left:11px;
  top:50%;
  color:var(--text-3);
  font-size:13px;
  font-weight:800;
  transform:translateY(-50%);
  pointer-events:none;
}
.settings-noise-amount-input>.fi{
  min-height:40px;
  padding-left:28px;
  font-variant-numeric:tabular-nums;
}
.settings-noise-delete{
  grid-area:delete;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:var(--radius-10)!important;
  border-color:color-mix(in srgb,var(--red) 28%,var(--border))!important;
  background:color-mix(in srgb,var(--red) 7%,var(--surface))!important;
  color:var(--red)!important;
}
.settings-noise-delete:hover{
  border-color:var(--red)!important;
  background:var(--red)!important;
  color:#fff!important;
}
.settings-noise-empty{
  display:grid;
  place-items:center;
  min-height:64px;
  padding:10px 14px;
  color:var(--text-3);
  text-align:center;
}
.settings-noise-empty>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
}
.settings-noise-empty i{
  margin:0;
  color:var(--primary);
  font-size:22px;
}
.settings-noise-empty b{
  display:block;
  color:var(--text);
  font-size:13px;
  line-height:1.3;
  text-align:left;
}
.settings-noise-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:11px;
}
.settings-noise-match{
  display:flex;
  flex:1 1 320px;
  min-width:0;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  font-size:12px;
}
.settings-noise-match i{
  flex:0 0 auto;
  color:var(--primary);
  font-size:17px;
}
.settings-noise-match b{
  color:var(--text);
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
.settings-noise-match.is-warning i,
.settings-noise-match.is-warning b{
  color:var(--amber);
}
.settings-noise-actions{
  display:flex;
  flex:0 1 auto;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  max-width:100%;
}
.settings-noise-actions .btn{
  min-height:40px;
  justify-content:center;
}
.settings-noise[data-enabled="false"] .settings-noise-match i{
  color:var(--text-3);
}

@container settings-noise (max-width:680px){
  .settings-noise-footer{
    align-items:stretch;
    flex-direction:column;
  }
  .settings-noise-system-rules{
    grid-template-columns:minmax(0,1fr);
  }
  .settings-noise-rule{
    grid-template-columns:28px minmax(156px,1fr) minmax(176px,1.1fr) 40px;
    grid-template-areas:
      "index account category delete"
      ". amount amount .";
    gap:8px;
  }
  .settings-noise-actions{
    justify-content:flex-end;
  }
}

@container settings-noise (max-width:560px){
  .settings-noise-system-rule{
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .settings-noise-system-main{
    flex:1 1 148px;
  }
  .settings-noise-system-controls{
    flex:1 1 190px;
  }
}

@container settings-noise (max-width:480px){
  .settings-noise-system-controls{
    justify-content:flex-start;
    padding-left:51px;
  }
  .settings-noise-rule{
    grid-template-columns:28px minmax(176px,1fr) 40px;
    grid-template-areas:
      "index account delete"
      ". category ."
      ". amount .";
  }
  .settings-noise-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
  }
  .settings-noise-actions .btn{
    min-width:0;
  }
  .settings-noise-actions #set-noise-save{
    grid-column:1/-1;
  }
}

@media(max-width:760px){
  .settings-noise{
    padding:14px!important;
  }
}
}