/**
 * @file 本文件定义应用页面的基础样式、设置页布局和响应式交互样式。
 */
:root{
  /* 主题主色。 */
  --theme-color: #BD7FFF;
  /* 强调态主题色。 */
  --theme-strong: #a06ed9;
  /* 链接使用的主题色。 */
  --theme-link: #9273e2;
  /* 轻量主题背景色。 */
  --theme-soft: #f1edf9;
  /* 较强的轻量主题背景色。 */
  --theme-soft-strong: #eee6f9;
  /* 白底操作区域悬浮背景色。 */
  --surface-action-hover: var(--theme-soft-strong);
  /* 主题边框色。 */
  --theme-border: #d8ceef;
  /* 页面背景色。 */
  --bg: #f3f1f8;
  /* 默认边框色。 */
  --border: #DFE4EA;
  /* 弱化边框色。 */
  --border-soft: #E8EDF2;
  /* 表单控件背景色。 */
  --control-bg: #FFF;
  /* 表单控件边框色。 */
  --control-border: #CDD6DF;
  /* 标题文字色。 */
  --heading: #17202A;
  /* 正文文字色。 */
  --ink: #1D232A;
  /* 链接基础色。 */
  --link-base: #0B4F87;
  /* 弱化文字色。 */
  --muted: #506070;
  /* 较强的弱化文字色。 */
  --muted-strong: #405060;
  /* 占位文本颜色。 */
  --placeholder: #9AA7B4;
  /* 次级按钮背景色。 */
  --secondary-button: #8469b6;
  /* 强投影颜色。 */
  --shadow-strong: rgba(23, 32, 42, 0.18);
  /* 主内容表面色。 */
  --surface: #FFF;
  /* 轻量内容表面基础色。 */
  --surface-soft-base: #F6F7F8;
  /* Toast 背景色。 */
  --toast-bg: #17202A;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  overflow-y: scroll;
  /* 规则表操作列宽。 */
  --rule-action-column: 54px;
  /* 规则表拖拽列宽。 */
  --rule-drag-column: 44px;
  /* 规则表选择列宽。 */
  --rule-select-column: var(--rule-action-column);
  /* 设置项操作区宽度。 */
  --settings-action-width: 120px;
  /* 设置项控件区宽度。 */
  --settings-control-width: 360px;
}

:root[data-color-mode="dark"]{
  /* 暗色模式页面背景色。 */
  --bg: #1c1b27;
  /* 不支持颜色混合时，仍提供完整的暗色主题。 */
  --theme-strong: #c592fc;
  --theme-link: #bc95ff;
  --theme-soft: #2c2c3e;
  --theme-soft-strong: #35324a;
  --theme-border: #50486c;
  /* 暗色模式默认边框色。 */
  --border: #313842;
  /* 暗色模式弱化边框色。 */
  --border-soft: #27303A;
  /* 暗色模式表单控件背景色。 */
  --control-bg: #151A20;
  /* 暗色模式表单控件边框色。 */
  --control-border: #4A5462;
  /* 暗色模式标题文字色。 */
  --heading: #F2F5F8;
  /* 暗色模式正文文字色。 */
  --ink: #E7EBEF;
  /* 暗色模式链接基础色。 */
  --link-base: #B9D9FF;
  /* 暗色模式弱化文字色。 */
  --muted: #A8B3BF;
  /* 暗色模式较强的弱化文字色。 */
  --muted-strong: #C4CBD3;
  /* 暗色模式占位文本颜色。 */
  --placeholder: #778390;
  /* 暗色模式次级按钮背景色。 */
  --secondary-button: #c1a7e8;
  /* 暗色模式强投影颜色。 */
  --shadow-strong: rgba(0, 0, 0, 0.36);
  /* 暗色模式主内容表面色。 */
  --surface: #171C22;
  /* 暗色模式轻量内容表面基础色。 */
  --surface-soft-base: #1F252D;
  /* 暗色模式 Toast 背景色。 */
  --toast-bg: #F2F5F8;
  color-scheme: dark;
}

/* 自定义属性会保留未知函数，必须先检测混色支持，避免使用时整条颜色失效。 */
@supports (color: color-mix(in srgb, #000, #fff)){
  :root,
  :root[data-color-mode="dark"]{
    --theme-strong: color-mix(in srgb, var(--theme-color) 82%, var(--ink) 18%);
    --theme-link: color-mix(in srgb, var(--theme-color) 76%, var(--link-base) 24%);
    --theme-soft: color-mix(in srgb, var(--theme-color) 8%, var(--surface-soft-base));
    --theme-soft-strong: color-mix(in srgb, var(--theme-color) 14%, var(--surface-soft-base));
    --theme-border: color-mix(in srgb, var(--theme-color) 22%, var(--border));
    --bg: color-mix(in srgb, var(--theme-color) 5%, #f6f7f8);
    --secondary-button: color-mix(in srgb, var(--theme-color) 54%, var(--muted-strong) 46%);
  }
  :root[data-color-mode="dark"]{
    --bg: color-mix(in srgb, var(--theme-color) 7%, #101317);
    --secondary-button: color-mix(in srgb, var(--theme-color) 48%, var(--muted-strong) 52%);
  }
}

body{
  min-width: 0;
  margin: 0;
}

input[dir="ltr"],
textarea[dir="ltr"],
pre[dir="ltr"],
code[dir="ltr"]{
  direction: ltr;
  unicode-bidi: isolate;
}

[hidden]{
  display: none !important;
}

a{
  color: var(--theme-link);
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.topbar{
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 28px;
}

.brand{
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
}

.brand:hover{
  text-decoration: none;
}

.primary-nav{
  align-items: stretch;
  align-self: stretch;
  display: inline-flex;
}

.primary-nav .nav-item{
  align-self: stretch;
  display: inline-flex;
  margin: 0;
  min-width: 0;
}

.primary-nav .nav-item + .nav-item{
  border-inline-start: 1px solid var(--border);
}

.nav-account-menu{
  align-self: stretch;
  position: relative;
}

.nav-avatar-button{
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  list-style: none;
  min-width: 70px;
  padding: 0 14px;
  transition: background-color 160ms ease;
}

.nav-avatar-button::-webkit-details-marker{
  display: none;
}

.nav-avatar-button::after{
  border-bottom: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  color: var(--muted);
  content: "";
  height: 6px;
  margin-inline-start: 8px;
  opacity: .72;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
  width: 6px;
}

.nav-avatar-button:focus-visible{
  background: var(--theme-soft);
  outline: 3px solid var(--theme-border);
  outline-offset: -3px;
}

@supports (color: color-mix(in srgb, #000, #fff)){
  .nav-avatar-button:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--theme-color) 34%, transparent);
  }
}

.nav-account-menu[open] .nav-avatar-button{
  background: var(--theme-soft);
}

.nav-account-menu[open] .nav-avatar-button::after{
  transform: rotate(225deg) translateY(-2px);
}

.account-avatar{
  aspect-ratio: 1 / 1;
  border: 2px solid var(--theme-border);
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 36px;
  height: 36px;
  overflow: hidden;
  position: relative;
  width: 36px;
}

.account-avatar img{
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.account-avatar-uploaded{
  z-index: 1;
}

.nav-account-dropdown{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px var(--shadow-strong);
  min-width: 148px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: calc(100% - 1px);
  z-index: 20;
}

.nav-account-dropdown form{
  border-top: 1px solid var(--border);
  margin: 0;
}

.nav-account-menu-action{
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--theme-link);
  display: flex;
  font: inherit;
  font-weight: 700;
  gap: 7px;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 14px;
  text-align: start;
  transition: background-color 160ms ease, color 160ms ease;
  width: 100%;
}

.nav-account-menu-action:hover, .nav-account-menu-action:focus-visible{
  background: var(--theme-soft-strong) !important;
  box-shadow: none !important;
  text-decoration: none;
  transform: none !important;
}

.nav-account-menu-action:focus-visible{
  outline: 2px solid var(--theme-color);
  outline-offset: -2px;
}

.nav-account-logout{
  color: var(--theme-link);
}

.nav-account-logout:hover, .nav-account-logout:focus-visible{
  background: var(--theme-soft-strong) !important;
}

.nav-account-menu-icon{
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.shell{
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 100%;
  padding: 32px 28px;
  width: 100%;
}

.page-heading{
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}

h1{
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 8px;
}

h2{
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
}

p{
  color: var(--muted);
  margin: 0;
}

.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

button{
  background: var(--theme-strong);
  border: 0;
  border-radius: 6px;
  color: #FFF;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 40px;
  padding: 0 16px;
}

button.secondary{
  background: var(--secondary-button);
}

button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):hover:not(:disabled),
button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):focus-visible:not(:disabled),
.button-link:hover,
.button-link:focus-visible{
  background: var(--theme-strong);
  box-shadow: 0 8px 18px var(--theme-border);
  text-decoration: none;
  transform: translateY(-1px);
}

@supports (color: color-mix(in srgb, #000, #fff)){
  button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):hover:not(:disabled),
  button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):focus-visible:not(:disabled),
  .button-link:hover,
  .button-link:focus-visible{
    background: color-mix(in srgb, var(--theme-strong) 88%, #ffffff 12%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--theme-color) 24%, transparent);
  }
}

button.secondary:hover:not(:disabled),
button.secondary:focus-visible:not(:disabled){
  background: var(--secondary-button);
}

@supports (color: color-mix(in srgb, #000, #fff)){
  button.secondary:hover:not(:disabled),
  button.secondary:focus-visible:not(:disabled){
    background: color-mix(in srgb, var(--secondary-button) 88%, #ffffff 12%);
  }
}

button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):active:not(:disabled),
.button-link:active{
  box-shadow: none;
  transform: translateY(0);
}

button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button, .nav-link-button):disabled{
  cursor: not-allowed;
  opacity: 0.64;
}

.primary-nav .nav-link-button{
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--theme-link);
  display: inline-flex;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  gap: 7px;
  height: 100%;
  justify-content: center;
  line-height: 1.2;
  min-height: 100%;
  min-width: 0;
  padding: 0 16px;
  text-decoration: none;
  transition: background-color 160ms ease,
  color 160ms ease;
  white-space: nowrap;
  width: 100%;
}

.nav-icon{
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.nav-label{
  min-width: 0;
}

.button-link{
  align-items: center;
  background: var(--theme-strong);
  border-radius: 6px;
  color: #FFF;
  display: inline-flex;
  font-weight: 700;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
  transition: background-color 140ms ease,
  box-shadow 140ms ease,
  transform 140ms ease;
  white-space: nowrap;
}

button:not(.dropdown-toggle, .icon-button, .keyword-option-button, .metric-panel-control, .text-action-button),
.button-link{
  transition: background-color 140ms ease,
  box-shadow 140ms ease,
  transform 140ms ease;
}

input,
select{
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  min-height: 38px;
  padding: 0 10px;
  width: 100%;
}

input:disabled,
input[readonly],
select:disabled{
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--muted);
  cursor: not-allowed;
}

@supports (color: color-mix(in srgb, #000, #fff)){
  input:disabled,
  input[readonly],
  select:disabled{
    background: color-mix(in srgb, var(--control-bg) 45%, var(--border-soft) 55%);
    border-color: color-mix(in srgb, var(--control-border) 60%, var(--border-soft) 40%);
  }
}

input[readonly]{
  cursor: default;
}

input:disabled::placeholder,
input[readonly]::placeholder{
  color: var(--placeholder);
}

.settings-list > div > dd > input,
.settings-list > div > dd > select{
  max-width: var(--settings-control-width);
}

/* 匹配配置沿用设置表单的主题色、边框和控件宽度。 */
.settings-list > div[hidden]{
  display: none;
}

.matching-prompt{
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  max-width: 100%;
  padding: 10px 12px;
  resize: vertical;
  width: 100%;
}

.notification-provider-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  width: 100%;
}

.notification-provider-row select{
  flex: 1 1 160px;
  min-width: 0;
  max-width: var(--settings-control-width);
}

.notification-provider-row button{
  box-sizing: border-box;
  flex: 0 1 auto;
  line-height: 1.25;
  max-width: min(100%, 240px);
  min-width: 0;
  min-height: 38px;
  min-inline-size: var(--settings-action-width);
  overflow-wrap: anywhere;
  padding-block: 0;
  text-align: center;
  white-space: normal;
}

.notification-provider-row .settings-icon-action-button{
  flex: 0 0 40px;
  margin-inline-start: auto;
  max-width: 40px;
  min-inline-size: 40px;
  order: 2;
}

.notification-provider-row .inline-action-status{
  order: 1;
}

.settings-list > .notification-test-drawer{
  display: block;
  padding: 0;
  background: var(--theme-soft-strong);
  border-block-start: 1px solid var(--theme-border);
}
.notification-test-drawer > dd{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
}
.notification-test-drawer .notification-test-button{
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-height: 46px;
  border-radius: 0;
  font: inherit;
  text-align: center;
}
.notification-test-drawer .inline-action-status{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin-inline: 8px 20px;
  max-width: 100%;
  flex-wrap: wrap;
  white-space: normal;
  position: relative;
}
@media (max-width: 620px){
  .notification-test-drawer .inline-action-status{
    grid-column: 1 / -1;
    grid-row: 2;
    margin-block-end: 10px;
  }
}

.inline-action-status{
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 1 1 220px;
  font-size: 14px;
  gap: 8px;
  min-height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

.inline-action-status[data-state="error"]{
  color: #B42318;
}

:root[data-color-mode="dark"] .inline-action-status[data-state="error"]{
  color: #FFB4AB;
}

.inline-action-link{
  align-items: center;
  color: var(--theme-strong);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  text-decoration: none;
}

.inline-action-link:hover,
.inline-action-link:focus-visible{
  text-decoration: underline;
}

.inline-action-link svg{
  fill: currentColor;
  height: 14px;
  width: 14px;
}

.input-action-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  width: 100%;
}

.input-action-row input{
  flex: 1 1 220px;
  min-inline-size: min(100%, 220px);
  min-width: 0;
  max-width: var(--settings-control-width);
}

.account-username-row,
.account-single-input-row,
.email-binding-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  width: 100%;
}

.account-settings-group{
  margin-bottom: 0;
}

.account-settings-continuation{
  border-top: 0;
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}

.account-avatar-setting{
  align-items: center;
  display: flex;
  gap: 12px;
  max-width: 560px;
  width: 100%;
}

.account-avatar-preview-button{
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: zoom-in;
  flex: 0 0 auto;
  padding: 0;
  transform: none;
  transition: none;
}

.account-avatar-preview-button:hover, .account-avatar-preview-button:active{
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.account-avatar-preview-button:focus-visible{
  outline: 2px solid var(--theme-strong);
  outline-offset: 3px;
}

.account-avatar-picker{
  align-items: center;
  border: 1px dashed var(--theme-border);
  border-radius: 8px;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 72px;
  min-width: 0;
  padding: 12px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.account-avatar-picker.is-dragover, .account-avatar-picker:hover{
  background: var(--theme-soft);
  border-color: var(--theme-strong);
}

.account-avatar-preview{
  flex-basis: 72px;
  height: 72px;
  width: 72px;
}

.account-avatar-file-input{
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.account-avatar-picker-touch{ display: none; }

@media (hover: none) and (pointer: coarse){
  .account-avatar-picker-text{ display: none; }
  .account-avatar-picker-touch{ display: inline; }
}

.account-avatar-picker-text{
  color: var(--muted);
  font-size: 14px;
}

.avatar-preview-dialog{
  background: transparent;
  border: 0;
  max-height: min(86vh, 920px);
  max-width: min(86vw, 920px);
  overflow: visible;
  padding: 0;
}

.avatar-preview-dialog::backdrop{
  backdrop-filter: blur(10px);
  background: rgba(31, 41, 55, 0.52);
}

@supports (color: color-mix(in srgb, #000, #fff)){
  .avatar-preview-dialog::backdrop{
    background: color-mix(in srgb, var(--ink) 52%, transparent);
  }
}

.avatar-preview-dialog img{
  display: block;
  max-height: min(82vh, 840px);
  max-width: min(82vw, 840px);
  object-fit: contain;
}

.avatar-preview-clear-decorations{
  display: block;
  margin: 12px auto 0;
  max-width: min(100%, 320px);
  white-space: normal;
}

.avatar-preview-close{
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  color: var(--ink);
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
}

.avatar-crop-dialog{
  background: linear-gradient(145deg, var(--surface), var(--theme-soft));
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  box-shadow: 0 24px 64px var(--shadow-strong);
  color: var(--ink);
  max-width: min(92vw, 460px);
  padding: 0;
}

.avatar-crop-dialog::backdrop{
  background: rgba(31, 41, 55, 0.66);
}

@supports (color: color-mix(in srgb, #000, #fff)){
  .avatar-crop-dialog::backdrop{
    background: color-mix(in srgb, var(--ink) 66%, transparent);
  }
}

/* 应用更新提示沿用现有弹窗与设置行，红点不改变点击区域。 */
.app-update-dialog{ width: min(92vw, 460px); }
.app-update-dialog > p{ margin: 0; padding: 16px 20px; overflow-wrap: anywhere; }
.app-update-actions{ display: flex; justify-content: flex-end; gap: 12px; padding: 0 20px 16px; flex-wrap: wrap; }
:root[data-application-platform="android"] .app-update-actions > button{ width: 100%; }
.app-update-unread::after{ background: #df3946; border-radius: 50%; content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 7px; vertical-align: super; flex: 0 0 7px; }
:root[data-application-platform="android"] .topbar{ padding-top: max(12px, env(safe-area-inset-top)); }
:root[data-application-platform="android"] .shell{ padding-bottom: max(24px, env(safe-area-inset-bottom)); }

.avatar-crop-header{
  align-items: center;
  background: var(--theme-soft);
  border-bottom: 1px solid var(--theme-border);
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
}

.avatar-crop-header h2{
  margin: 0;
}

.avatar-crop-stage{
  aspect-ratio: 1 / 1;
  background: var(--surface-soft-base);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  box-sizing: border-box;
  cursor: grab;
  height: auto;
  margin: 20px;
  max-height: none;
  max-width: none;
  overflow: hidden;
  position: relative;
  touch-action: none;
  width: calc(100% - 40px);
}

.avatar-crop-stage:active{
  cursor: grabbing;
}

.avatar-crop-stage canvas{
  height: 100%;
  width: 100%;
}

.avatar-crop-mask{
  border: 2px solid var(--theme-color);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .5);
  inset: 7%;
  pointer-events: none;
  position: absolute;
}

.avatar-crop-zoom{
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto auto 1fr;
  margin: 16px 20px 0;
}

.avatar-crop-zoom output{
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  min-width: 44px;
  text-align: end;
}

.avatar-crop-zoom input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 100%;
}

.avatar-crop-zoom input[type="range"]::-webkit-slider-runnable-track{
  background: linear-gradient(to right, var(--theme-color) 0 var(--avatar-zoom-progress, 0%), var(--control-bg) var(--avatar-zoom-progress, 0%) 100%);
  border-radius: 999px;
  height: 6px;
}

.avatar-crop-zoom input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  background: var(--theme-color);
  border: 0;
  border-radius: 50%;
  height: 18px;
  margin-top: -6px;
  width: 18px;
}

.avatar-crop-zoom input[type="range"]::-moz-range-progress{
  background: var(--theme-color);
}

.avatar-crop-zoom input[type="range"]::-moz-range-track{
  background: var(--control-bg);
  border-radius: 999px;
  height: 6px;
}

.avatar-crop-zoom input[type="range"]::-moz-range-thumb{
  background: var(--theme-color);
  border: 0;
  border-radius: 50%;
  height: 18px;
  width: 18px;
}

.avatar-crop-actions{
  border-top: 1px solid var(--theme-border);
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px 20px 20px;
}

.settings-row-action-button,
.account-mode-buttons{
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.settings-icon-action-button{
  align-items: center;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

.settings-row-action-icon{
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.settings-row-switch-cell{
  display: flex;
  justify-content: flex-end;
}

.application-notifications-cell{
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.application-notifications-cell .inline-action-status{
  order: -2;
  white-space: normal;
}

.application-notifications-cell [data-app-notifications-retry]{
  order: -1;
}

.security-toggle-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: min(100%, 860px);
}

.account-username-row input,
.account-single-input-row input,
.email-binding-row input[type="email"],
.email-binding-row input[type="text"]{
  flex: 1 1 260px;
  min-inline-size: min(100%, 260px);
  min-width: 0;
  max-width: var(--settings-control-width);
}

.email-binding-row .inline-action-status{
  flex: 1 1 220px;
  min-width: 0;
}

.auth-method-row > dd{
  min-width: 0;
}

.email-binding-form{
  display: grid;
  gap: 10px;
  width: 100%;
}

.email-binding-code-row:not(.is-collapsed){
  overflow: visible;
}

.auth-method-summary-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.auth-method-summary{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-method-summary-row > .auth-method-summary{
  flex: 1 1 auto;
  max-width: none;
}

.auth-method-summary-row > .email-binding-row{
  flex: 1 1 260px;
  min-width: 0;
  width: auto;
}

.auth-method-actions{
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.auth-method-toggle-button{
  align-items: center;
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

.auth-method-action-icon{
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.auth-method-action-form{
  display: flex;
  flex: 0 0 auto;
  margin: 0;
}

.auth-method-panel{
  border-top: 1px solid var(--border-soft);
  margin-top: 14px;
  max-height: 760px;
  opacity: 1;
  overflow: visible;
  padding-top: 16px;
  transform: translateY(0);
  transition: max-height 180ms ease,
  opacity 140ms ease,
  padding-top 180ms ease,
  transform 180ms ease;
}

.auth-method-panel.is-collapsed{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.auth-method-form,
.google-binding,
.inline-reauth-panel{
  display: grid;
  gap: 14px;
  max-width: min(100%, 860px);
}

.inline-reauth-panel{
  max-height: 720px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  transition: max-height 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.inline-reauth-panel.is-collapsed{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}

.reauth-status-line{
  display: grid;
  gap: 4px;
}

.reauth-method-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.reauth-method-button{
  flex: 1 1 92px;
  min-width: min(100%, 92px);
}

.reauth-method-button[aria-pressed="true"]{
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.62);
}

@supports (color: color-mix(in srgb, #000, #fff)){
  .reauth-method-button[aria-pressed="true"]{
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 62%, transparent);
  }
}

.reauth-method-details{
  display: grid;
}

.reauth-method-detail{
  max-height: 180px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  transition: max-height 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.reauth-method-detail.is-collapsed{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
}

.reauth-detail-form{
  display: grid;
  gap: 8px;
  max-width: min(100%, 620px);
}

.reauth-input-action-row{
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.reauth-input-action-row input[type="password"],
.reauth-input-action-row input[type="text"]{
  flex: 1 1 auto;
  max-width: none;
  min-width: 0;
}

.reauth-email-delivery{
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 6px;
}

.reauth-email-resend-button{
  min-height: 0;
  padding: 0;
}

.reauth-email-resend-button:disabled{
  color: var(--muted);
  cursor: default;
}

.reauth-cancel-row{
  display: flex;
  justify-content: flex-end;
}

.auth-method-panel-fields{
  display: grid;
  gap: 12px;
}

.auth-method-panel-fields > label,
.auth-method-plain-row{
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.auth-method-panel-fields > label > span,
.auth-method-panel-label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.auth-method-panel-fields input,
.auth-method-panel-fields select,
.auth-method-panel-fields textarea{
  max-width: var(--settings-control-width);
}

.totp-setup-qr-row{
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.totp-setup-qr-content{
  display: grid;
  gap: 8px;
  justify-items: start;
}

.totp-setup-qr-code{
  background: #FFF;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  display: block;
  height: auto;
  max-width: min(240px, 100%);
  padding: 8px;
}

.totp-manual-key-row{
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
}

.totp-manual-key-content{
  align-items: center;
  display: flex;
  gap: 4px;
  min-width: 0;
}

.totp-manual-key-value{
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas,
  monospace;
  font-size: 15px;
  overflow-wrap: anywhere;
  user-select: text;
}

.totp-copy-button,
.recovery-code-download-button{
  color: var(--muted);
  flex: 0 0 30px;
}

.totp-copy-button:hover,
.totp-copy-button:focus-visible,
.totp-copy-button[data-state="copied"],
.recovery-code-download-button:hover,
.recovery-code-download-button:focus-visible{
  color: var(--ink);
}

.totp-copy-button[data-state="failed"],
.recovery-code-download-button[data-state="failed"]{
  color: #B42318;
}

:root[data-color-mode="dark"] .totp-copy-button[data-state="failed"],
:root[data-color-mode="dark"] .recovery-code-download-button[data-state="failed"]{
  color: #FFB4AB;
}

.totp-copy-icon{
  height: 18px;
  width: 18px;
}

.recovery-code-download-icon{
  height: 18px;
  width: 18px;
}

.totp-copy-status{
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.auth-method-credential-block{
  display: grid;
  gap: 8px;
}

.auth-method-credential-heading{
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.recovery-code-reveal{
  display: grid;
  gap: 12px;
}

.recovery-code-generation{
  display: grid;
  gap: 12px;
}

.recovery-code-heading-row{
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.recovery-code-confirm-row{
  display: flex;
  justify-content: flex-end;
}

.recovery-code-list{
  display: grid;
  gap: 8px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  max-width: 520px;
  padding: 0;
}

.recovery-code-list code{
  background: var(--surface-strong);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: block;
  font-size: 15px;
  padding: 9px 12px;
  text-align: center;
  user-select: all;
}

@media (max-width: 560px){
  .recovery-code-list{
    grid-template-columns: 1fr;
  }
}

.auth-google-button{
  min-height: 40px;
}

.email-credential-list{
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  max-width: 620px;
  padding: 0;
}

.email-credential-list li{
  align-items: center;
  color: var(--muted-strong);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px 12px;
}

.email-credential-list li span:first-child{
  color: var(--text);
}

.passkey-credential-list li{
  justify-content: space-between;
}

.auth-method-binding-form{
  display: contents;
}

.passkey-credential-list{
  max-width: none;
  width: 100%;
}

.passkey-credential-list small{
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
}

.passkey-credential-list form{
  margin: 0;
  margin-inline-start: auto;
}

.auth-turnstile,
.settings-turnstile{
  max-height: 90px;
  overflow: hidden;
  transition: margin-top 280ms ease,
  max-height 280ms ease,
  min-height 280ms ease,
  opacity 220ms ease,
  transform 280ms ease;
}

.settings-turnstile{
  margin-top: 12px;
}

.auth-turnstile[data-turnstile-collapsing="true"],
.settings-turnstile[data-turnstile-collapsing="true"]{
  margin-top: 0;
  max-height: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.account-mode-buttons{
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.account-passkey-reauth-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: min(100%, 860px);
  width: 100%;
}

.account-passkey-reauth-row .inline-action-status{
  flex: 1 1 220px;
  min-width: 0;
}

.account-passkey-reauth-row button{
  flex: 0 0 auto;
}

.account-password-check-row .account-field-status,
.account-single-input-row .account-field-status,
.account-username-row .account-field-status{
  flex: 1 1 180px;
  min-width: 0;
}

.account-edit-actions{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  max-height: 60px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 180ms ease,
  opacity 140ms ease,
  transform 180ms ease;
}

.account-form-actions{
  align-items: center;
  gap: 10px;
}

.account-form-actions > .inline-action-status{
  min-width: 0;
}

.account-edit-actions.is-collapsed{
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

input[type="checkbox"]{
  accent-color: var(--theme-strong);
  min-height: 18px;
  width: 18px;
}

.switch-control{
  display: inline-flex;
}

.switch-control input{
  -webkit-appearance: none;
  appearance: none;
  background: var(--control-border);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  height: 24px;
  min-height: 24px;
  padding: 0;
  position: relative;
  transition: background-color 160ms ease;
  width: 44px;
}

.switch-control input::before{
  background: var(--surface);
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 160ms ease;
  width: 18px;
}

.switch-control input:checked{
  background: var(--theme-strong);
}

.switch-control input:checked::before{
  transform: translateX(20px);
}

:root[dir="rtl"] .switch-control input::before{
  left: auto;
  right: 3px;
}

:root[dir="rtl"] .switch-control input:checked::before{
  transform: translateX(-20px);
}

input[type="color"]{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 34px;
  min-height: 34px;
  padding: 0;
  width: 54px;
}

input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 0;
}

input[type="color"]::-webkit-color-swatch{
  border: 0;
  border-radius: 4px;
}

input[type="color"]::-moz-color-swatch{
  border: 0;
  border-radius: 4px;
}

.metrics{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.metric-panel-item{
  display: flex;
  margin: 0;
  min-width: 0;
}

.metric-panel-item + .metric-panel-item{
  border-inline-start: 1px solid var(--border-soft);
}

.metric-panel-control{
  align-content: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 26px;
  min-height: 132px;
  min-width: 0;
  padding: 22px 24px;
  text-align: start;
  text-decoration: none;
  transition: background-color 160ms ease;
  width: 100%;
}

.metric-panel-control.is-disabled{
  cursor: default;
  pointer-events: none;
}

.metric-label{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}

.metric-panel-control strong{
  align-self: center;
  color: var(--heading);
  font-size: 22px;
  justify-self: center;
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

.metric-panel-control[data-latest-match-link]:not(.is-disabled) strong{
  color: var(--theme-strong);
}

.next-poll-panel{
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.next-poll-meta{
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.next-poll-meta h2{
  margin: 0;
}

.next-poll-meta strong{
  color: var(--theme-strong);
  font-size: 15px;
  min-width: 72px;
  text-align: end;
}

.next-poll-track{
  background: var(--border-soft);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  position: relative;
}

.next-poll-fill{
  background: var(--theme-strong);
  border-radius: inherit;
  height: 100%;
  margin-inline-start: auto;
  transition: width 240ms linear;
  width: 100%;
}

.next-poll-fill.is-resetting{
  transition: width 440ms cubic-bezier(0.2, 0, 0, 1);
}

.next-poll-fill.is-resetting-from-left{
  margin-inline-start: 0;
  transition: transform 440ms cubic-bezier(0.2, 0, 0, 1),
  width 440ms cubic-bezier(0.2, 0, 0, 1);
}

.next-poll-fill.is-jump{
  transition: none;
}

.table-section{
  margin-top: 24px;
  position: relative;
}

.section-title-row{
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title-row h2{
  margin: 0;
  white-space: nowrap;
}

.table-filter-shell{
  align-items: center;
  column-gap: 8px;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) 28px;
  justify-content: stretch;
  min-height: 28px;
  min-width: 28px;
  overflow: visible;
}

.filter-toggle-input{
  block-size: 1px;
  inline-size: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
}

.filter-toggle{
  align-items: center;
  border-radius: 6px;
  color: var(--theme-strong);
  cursor: pointer;
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  height: 28px;
  justify-content: center;
  list-style: none;
  transition: background-color 160ms ease;
  width: 28px;
}

.filter-toggle svg{
  fill: currentColor;
  height: 20px;
  width: 20px;
}

.table-filter-form{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-end;
  max-block-size: 132px;
  min-width: 0;
  overflow: hidden;
  transition: clip-path 180ms ease,
  max-block-size 180ms ease,
  opacity 180ms ease,
  transform 180ms ease;
  visibility: visible;
  width: 100%;
}

.table-filter-shell:not(:has(.filter-toggle-input:checked)) .table-filter-form{
  clip-path: inset(0 0 0 100%);
  max-block-size: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
}

:root[dir="rtl"] .table-filter-shell:not(:has(.filter-toggle-input:checked)) .table-filter-form{
  clip-path: inset(0 100% 0 0);
  transform: translateX(-8px);
}

.table-filter-field{
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
}

.table-filter-field span{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.table-filter-field input,
.table-filter-field select{
  min-height: 30px;
  padding-block: 0;
  width: auto;
}

.table-filter-date-field{
  overflow: hidden;
  transition: opacity 180ms ease,
  transform 180ms ease;
}

.table-filter-form.is-custom-collapsed .table-filter-date-field{
  display: none;
}

.table-filter-form:not(.is-custom) .table-filter-date-field{
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
}

:root[dir="rtl"] .table-filter-form:not(.is-custom) .table-filter-date-field{
  transform: translateX(-8px);
}

.pagination-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 12px;
}

.pagination,
.page-size-links{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination{
  flex-wrap: nowrap;
  min-width: 0;
}

.pagination a,
.page-size-links a,
.pagination-ellipsis,
.pagination-page-input{
  align-items: center;
  border-radius: 4px;
  box-sizing: border-box;
  color: var(--theme-strong);
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
  text-decoration: none;
}

.pagination-page-input{
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-sizing: border-box;
  color: var(--heading);
  font-weight: 700;
  text-align: center;
  width: 54px;
}

.pagination a.is-current,
.page-size-links a.is-current{
  background: var(--theme-soft-strong);
  color: var(--heading);
  font-weight: 700;
}

.page-size-links span{
  color: var(--muted);
  font-size: 14px;
}

.settings-list,
table{
  border: 1px solid var(--border);
  border-radius: 8px;
}

.settings-list,
table{
  background: var(--surface);
}

dt{
  color: var(--muted);
  font-size: 14px;
}

.settings-label-with-icon{
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.settings-label-icon{
  color: var(--theme-strong);
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.settings-label-external-link{
  align-items: center;
  color: var(--theme-strong);
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
}

.settings-label-external-link svg{
  fill: currentColor;
  height: 16px;
  width: 16px;
}

.secret-input-row .secret-display-input{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secret-input-row .secret-display-input:not([readonly]){
  background: var(--control-bg);
  border-color: var(--control-border);
  color: var(--ink);
  cursor: text;
}

.pending-title-link{
  font-weight: 700;
}

.settings-list{
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.settings-list:has(.keyword-option-button:hover),
.settings-list:has(.keyword-option-button:focus-visible),
.settings-list:has(.settings-label-external-link:hover),
.settings-list:has(.settings-label-external-link:focus-visible){
  overflow: visible;
}

.settings-list > div{
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  background: var(--theme-soft);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(132px, 180px) minmax(0, 1fr);
  padding: 18px 22px;
}

.settings-list > div > dd{
  min-inline-size: 0;
}

.settings-list > div:last-child{
  border-bottom: 0;
}

/* 导航行由链接覆盖全部可交互区域，与设置抽屉标题使用相同留白。 */
.settings-list > .settings-navigation-row{
  display: block;
  padding: 0;
}

.settings-navigation-link{
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  text-decoration: none;
  width: 100%;
}

.settings-navigation-link:hover{
  background: var(--theme-soft-strong);
  text-decoration: none;
}

.settings-navigation-link:focus-visible{
  outline: 2px solid var(--theme-strong);
  outline-offset: -2px;
}

.settings-navigation-chevron{
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  flex: 0 0 8px;
  height: 8px;
  transform: rotate(45deg);
}

[dir="rtl"] .settings-navigation-chevron{
  transform: rotate(-45deg);
}

.about-downloads{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.about-version,
.about-version-updates{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.about-version-updates .about-update-link{
  font: inherit;
  padding: 0;
}

.about-version-updates .about-update-link:hover,
.about-version-updates .about-update-link:focus-visible{
  background: transparent;
  text-decoration: underline;
}

.about-version-updates .inline-action-status{
  flex: 0 1 auto;
  margin: 0;
  white-space: normal;
}

.about-download{
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-height: 32px;
}

.account-option-row,
.notification-option-row,
.polling-option-row{
  max-height: 180px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 180ms ease,
  opacity 140ms ease,
  padding-bottom 180ms ease,
  padding-top 180ms ease,
  transform 180ms ease;
}

.notification-option-row:not(.is-collapsed){
  overflow: visible;
}

.account-option-row.is-collapsed,
.notification-option-row.is-collapsed,
.polling-option-row.is-collapsed{
  border-bottom-color: transparent;
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  padding-top: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.poll-interval-control{
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 5fr) minmax(72px, 1fr);
  max-width: var(--settings-control-width);
}

.poll-interval-row{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field-hint{
  color: var(--muted-strong);
  flex: 1 1 280px;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  max-width: 520px;
}

dd{
  margin: 0;
}

.form-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.autosave-status{
  color: var(--muted);
  font-size: 14px;
  min-height: 20px;
}

.autosave-status[data-state="error"]{
  color: #B42318;
}

:root[data-color-mode="dark"] .autosave-status[data-state="error"]{
  color: #FFB4AB;
}

.settings-group{
  margin-top: 24px;
  position: relative;
}

.settings-group:first-of-type{
  margin-top: 0;
}

.dropdown-settings-row{
  align-items: center;
  column-gap: 12px;
  cursor: pointer;
  position: relative;
  row-gap: 0;
  transition: background-color 180ms ease;
}

.settings-list > .dropdown-settings-row{
  padding: 0;
  row-gap: 0;
}

.dropdown-settings-row.is-topic-open,
.dropdown-settings-row.is-matching-open,
.dropdown-settings-row.is-advanced-open,
.dropdown-settings-row.is-keyword-open{
  background: var(--theme-soft-strong);
}

.dropdown-heading{
  grid-column: 1 / -1;
  min-width: 0;
}

.dropdown-toggle{
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--heading);
  display: grid;
  font: inherit;
  gap: 12px;
  grid-template-columns: minmax(132px, 180px) minmax(0, 1fr);
  padding: 18px 22px;
  text-align: start;
  width: 100%;
}

.dropdown-toggle > .settings-label-with-icon{
  color: var(--muted);
  font-size: 14px;
}

.dropdown-toggle:focus-visible{
  outline: 2px solid var(--theme-strong);
  outline-offset: -2px;
}

.dropdown-indicator{
  align-items: center;
  display: inline-flex;
  flex: 0 0 26px;
  justify-content: center;
}

.dropdown-chevron{
  border-bottom: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  display: block;
  height: 8px;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
  width: 8px;
}

.dropdown-toggle.is-open .dropdown-chevron{
  transform: rotate(225deg) translate(-2px, -1px);
}

.dropdown-summary-cell{
  align-items: center;
  align-self: stretch;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

.keyword-summary{
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  margin-inline-start: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.keyword-summary [data-keyword-summary-item]{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary-separator{
  color: var(--placeholder);
  flex: 0 0 auto;
}

[data-topic-summary]{
  margin-inline-start: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-panel{
  background: var(--surface);
  cursor: default;
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  margin: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: grid-template-rows 220ms ease,
  opacity 180ms ease,
  transform 220ms ease;
}

.dropdown-settings-row.is-topic-open .dropdown-panel,
.dropdown-settings-row.is-matching-open > .dropdown-panel,
.dropdown-settings-row.is-advanced-open > .dropdown-panel,
.dropdown-settings-row.is-keyword-open .dropdown-panel{
  border-top: 1px solid var(--border-soft);
  grid-template-rows: 1fr;
  margin: 0;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
}

.dropdown-panel-inner{
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.dropdown-settings-row.is-topic-open .dropdown-panel-inner,
.dropdown-settings-row.is-matching-open > .dropdown-panel > .dropdown-panel-inner,
.dropdown-settings-row.is-advanced-open > .dropdown-panel > .dropdown-panel-inner,
.dropdown-settings-row.is-keyword-open .dropdown-panel-inner{
  overflow: visible;
}

.topic-rule-grid,
.keyword-rule-grid{
  width: 100%;
}

.topic-rule-row,
.keyword-rule-row{
  align-items: stretch;
  display: grid;
  gap: 0;
  width: 100%;
}

.topic-rule-row{
  grid-template-columns:
    var(--rule-drag-column)
    var(--rule-select-column)
    minmax(108px, 1.7fr)
    minmax(108px, 1.7fr)
    minmax(58px, 0.78fr)
    minmax(108px, 1.25fr)
    var(--rule-action-column)
    var(--rule-action-column);
}

.keyword-rule-row{
  grid-template-columns:
    var(--rule-drag-column)
    var(--rule-select-column)
    minmax(108px, 1.7fr)
    repeat(4, minmax(86px, 0.9fr))
    var(--rule-action-column)
    var(--rule-action-column);
}

.topic-rule-row > div,
.topic-rule-row > label,
.keyword-rule-row > div,
.keyword-rule-row > label{
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  border-inline-end: 1px solid var(--border-soft);
  display: flex;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 8px 6px;
}

.topic-rule-row input[type="text"],
.topic-rule-row input:not([type]),
.keyword-rule-row input[type="text"],
.keyword-rule-row input:not([type]){
  text-align: start;
}

.topic-rule-row > div:last-child,
.topic-rule-row > label:last-child,
.keyword-rule-row > div:last-child,
.keyword-rule-row > label:last-child{
  border-inline-end: 0;
}

.topic-rule-row:last-child > div,
.topic-rule-row:last-child > label,
.keyword-rule-row:last-child > div,
.keyword-rule-row:last-child > label{
  border-bottom: 0;
}

.topic-rule-head,
.keyword-rule-head{
  background: var(--surface-soft-base);
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
}

.topic-rule-head > *,
.keyword-rule-head > *{
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}

.keyword-rule-head > div:nth-child(4){
  justify-content: center;
  text-align: center;
}

.rule-drag-cell,
.rule-drag-header{
  color: var(--muted);
}

.rule-drag-handle{
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.rule-drag-handle:active{
  cursor: grabbing;
}

.rule-drag-icon{
  height: 20px;
  width: 20px;
}

.topic-rule-item.is-rule-dragging,
.keyword-rule-item.is-rule-dragging{
  opacity: 0.42;
}

.topic-rule-item.is-rule-drag-over-before,
.keyword-rule-item.is-rule-drag-over-before{
  box-shadow: inset 0 3px 0 var(--theme-strong);
}

.topic-rule-item.is-rule-drag-over-after,
.keyword-rule-item.is-rule-drag-over-after{
  box-shadow: inset 0 -3px 0 var(--theme-strong);
}

.topic-rule-item.is-keyword-drop-target{
  background: var(--theme-soft-strong);
  box-shadow: inset 0 0 0 2px var(--theme-strong);
}

.rule-drag-ghost{
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  box-shadow: 0 12px 28px var(--shadow-strong);
  box-sizing: border-box;
  color: var(--ink);
  max-width: min(360px, calc(100vw - 24px));
  opacity: 0.92;
  padding: 10px 12px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.keyword-input-shell{
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px 6px;
  position: relative;
  width: 100%;
}

.keyword-input-shell input:not([type="hidden"]){
  grid-column: 1 / -1;
  grid-row: 1;
  padding-inline-end: 72px;
}

.keyword-option-button{
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  grid-row: 1;
  justify-content: center;
  min-height: 28px;
  padding: 0;
  width: 28px;
  z-index: 1;
}

.keyword-option-button[data-option="caseSensitive"]{
  grid-column: 2;
}

.keyword-option-button[data-option="useRegex"]{
  grid-column: 3;
}

.keyword-option-button:hover,
.keyword-option-button:focus-visible,
.keyword-option-button[aria-pressed="true"]{
  color: var(--theme-strong);
}

.app-tooltip{
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  max-width: min(180px, calc(100vw - 16px));
  padding: 8px 10px;
  pointer-events: none;
  position: fixed;
  text-align: start;
  white-space: normal;
  z-index: 10000;
}

.topic-rule-row > div:has(> .icon-button),
.topic-rule-row > div:has(> .text-action-button),
.keyword-rule-row > div:has(> .icon-button),
.keyword-rule-row > div:has(> .text-action-button){
  padding: 0;
}

.topic-rule-row > div > .icon-button,
.topic-rule-row > div > .text-action-button,
.keyword-rule-row > div > .icon-button,
.keyword-rule-row > div > .text-action-button{
  align-self: stretch;
  border-radius: 0;
  min-height: 100%;
  width: 100%;
}

.checkbox-cell{
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  justify-content: center;
  min-height: 100%;
  width: 100%;
}

th:has(> .checkbox-cell),
td:has(> .checkbox-cell){
  padding: 0;
}

th:has(> .checkbox-cell) > .checkbox-cell,
td:has(> .checkbox-cell) > .checkbox-cell{
  inset: 0;
  padding: 14px 16px;
  position: absolute;
}

.match-table th:has(> .checkbox-cell) > .checkbox-cell,
.match-table td:has(> .checkbox-cell) > .checkbox-cell{
  padding: 6px 4px;
}

.bulk-action-cell,
.location-bulk-cell{
  flex-wrap: wrap;
}

.icon-button{
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--theme-strong);
  display: inline-flex;
  justify-content: center;
  min-height: 30px;
  padding: 0;
  width: 30px;
}

.primary-nav .nav-link-button:hover,
.primary-nav .nav-link-button:focus-visible,
.filter-toggle:hover,
.filter-toggle:focus-visible,
.table-filter-shell:has(.filter-toggle-input:checked) .filter-toggle,
.keyword-option-button:hover,
.keyword-option-button:focus-visible,
.keyword-option-button[aria-pressed="true"],
.checkbox-cell:hover,
.checkbox-cell:focus-within,
.icon-button:hover,
.icon-button:focus-visible,
.dropdown-toggle:hover,
.dropdown-toggle:focus-visible,
.text-action-button:hover,
.text-action-button:focus-visible,
.metric-panel-control:not(.is-disabled):hover,
.metric-panel-control:not(.is-disabled):focus-visible{
  background: var(--surface-action-hover);
  text-decoration: none;
}

.icon-button svg{
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.text-icon-button{
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.text-action-button{
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--theme-strong);
  font-size: 14px;
  min-height: 30px;
  padding: 0 8px;
}

.keyword-toast{
  background: var(--toast-bg);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--shadow-strong);
  color: var(--surface);
  font-size: 14px;
  inset-inline-end: 12px;
  max-width: min(320px, calc(100% - 24px));
  opacity: 1;
  padding: 10px 12px;
  position: absolute;
  top: 12px;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 5;
}

.keyword-toast.is-hiding{
  opacity: 0;
  transform: translateY(-4px);
}

table{
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}

.match-table{
  table-layout: fixed;
  --match-cell-block-padding: 16px;
  --match-row-height: 80px;
}

.match-table-col-2{
  width: 4%;
}

.match-table-col-3{
  width: 12%;
}

.match-table-col-14{
  width: 60%;
}

.match-table-col-5{
  width: 20%;
}

.match-table-col-1{
  width: 4%;
}

th,
td{
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
  padding: 14px 16px;
  position: relative;
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.match-table th,
.match-table td{
  padding-inline: 10px;
}

.match-table tbody tr,
.match-table tbody td{
  height: var(--match-row-height);
}

.match-table tbody td{
  padding-block: calc(var(--match-cell-block-padding) / 4);
}

th:first-child,
td:first-child,
th:last-child,
td:last-child{
  text-align: center;
}

th:first-child .checkbox-cell,
td:first-child .checkbox-cell{
  justify-content: center;
  width: 100%;
}

.match-table-title-link,
.table-clip{
  --table-clip-lines: 3;
  box-sizing: border-box;
  display: -webkit-box;
  line-height: 1.28;
  max-block-size: calc(1.28em * var(--table-clip-lines) + 2px);
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--table-clip-lines);
  line-clamp: var(--table-clip-lines);
  word-break: break-word;
}

.match-content-cell > .table-clip{
  --table-clip-lines: 5;
}

.match-title-cell > .match-table-title-link{
  --table-clip-lines: 5;
}

.match-detail-list{
  display: grid;
  font-size: 12px;
  gap: 2px;
  line-height: 1.28;
  margin: 0;
  min-width: 0;
}

.match-detail-list > div{
  align-items: baseline;
  display: grid;
  gap: 4px;
  grid-template-columns: max-content minmax(0, 1fr);
  min-width: 0;
}

.match-detail-list dt{
  color: var(--muted);
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  white-space: nowrap;
}

.match-detail-list dd{
  color: var(--ink);
  line-height: inherit;
  min-width: 0;
}

.match-detail-value{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-table tbody td:hover{
  z-index: 3;
}

.table-section:has(.match-table-title-link.is-overflowing:hover),
.table-section:has(.match-table-title-link.is-overflowing:focus-visible),
.table-section:has(.table-clip.is-overflowing:hover),
.table-section:has(.table-clip.is-overflowing:focus-visible),
.table-section:has(.match-detail-list.is-overflowing:hover),
.table-section:has(.match-detail-list.is-overflowing:focus-visible){
  z-index: 20;
}

.table-section:has(.match-table-title-link.is-overflowing:hover) .match-table,
.table-section:has(.match-table-title-link.is-overflowing:focus-visible) .match-table,
.table-section:has(.table-clip.is-overflowing:hover) .match-table,
.table-section:has(.table-clip.is-overflowing:focus-visible) .match-table,
.table-section:has(.match-detail-list.is-overflowing:hover) .match-table,
.table-section:has(.match-detail-list.is-overflowing:focus-visible) .match-table{
  overflow: visible;
}

.match-title-cell > .match-table-title-link,
.match-content-cell > .table-clip,
.match-detail-list{
  width: 100%;
}

.match-title-cell:has(> .match-table-title-link.is-overflowing:hover),
.match-title-cell:has(> .match-table-title-link.is-overflowing:focus-visible),
.match-table tbody td:has(.table-clip.is-overflowing:hover),
.match-table tbody td:has(.table-clip.is-overflowing:focus-visible),
.match-table tbody td:has(.match-detail-list.is-overflowing:hover),
.match-table tbody td:has(.match-detail-list.is-overflowing:focus-visible){
  z-index: 5;
}

.match-title-cell:has(> .match-table-title-link.is-overflowing):hover > .match-table-title-link,
.match-title-cell:has(> .match-table-title-link.is-overflowing):focus-within > .match-table-title-link,
.match-table-title-link.is-overflowing:hover,
.match-table-title-link.is-overflowing:focus-visible{
  --table-clip-lines: 8;
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 0;
  box-shadow: 0 8px 24px var(--shadow-strong);
  left: 0;
  max-block-size: min(60vh, max(100%, calc(1.35em * var(--table-clip-lines) +
  14px)));
  min-block-size: 100%;
  overflow: auto;
  padding: 6px 8px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  z-index: 4;
}

.match-content-cell:has(> .table-clip.is-overflowing):hover > .table-clip,
.match-content-cell:has(> .table-clip.is-overflowing):focus-within > .table-clip,
.table-clip.is-overflowing:hover,
.table-clip.is-overflowing:focus-visible{
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 0;
  box-shadow: 0 8px 24px var(--shadow-strong);
  display: block;
  left: 0;
  line-clamp: unset;
  max-block-size: min(60vh, max(100%, 18em));
  min-block-size: 100%;
  overflow: auto;
  padding: 8px 10px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-line-clamp: unset;
  transform: translateY(-50%);
  width: auto;
  z-index: 6;
}

.match-table tbody td:has(> .match-detail-list.is-overflowing):hover > .match-detail-list,
.match-table tbody td:has(> .match-detail-list.is-overflowing):focus-within > .match-detail-list,
.match-detail-list.is-overflowing:hover,
.match-detail-list.is-overflowing:focus-visible{
  background: var(--surface);
  border: 1px solid var(--theme-border);
  border-radius: 0;
  box-shadow: 0 8px 24px var(--shadow-strong);
  left: 0;
  max-block-size: min(60vh, max(100%, 16em));
  min-block-size: 100%;
  overflow: auto;
  padding: 8px 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  z-index: 6;
}

.match-detail-list.is-overflowing:hover .match-detail-value,
.match-detail-list.is-overflowing:focus-visible .match-detail-value,
.match-table tbody td:has(> .match-detail-list.is-overflowing):hover .match-detail-value,
.match-table tbody td:has(> .match-detail-list.is-overflowing):focus-within .match-detail-value{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.table-action-cell{
  border-inline-start: 1px solid var(--border-soft);
  padding: 0;
  position: relative;
}

.table-action-cell .icon-button{
  border-radius: 0;
  bottom: 0;
  height: 100%;
  min-height: 100%;
  position: absolute;
  inset-inline: 0;
  top: 0;
  width: 100%;
}

tr:last-child td{
  border-bottom: 0;
}

@media (max-width: 760px){
  .topbar,
  .page-heading{
    align-items: stretch;
    flex-direction: column;
  }

  .page-heading .actions{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .page-heading .actions form,
  .page-heading .actions button{
    min-width: 0;
    width: 100%;
  }

  .page-heading .actions button{
    white-space: normal;
  }

  .topbar{
    padding: 16px 0 0;
  }

  .topbar > .brand{
    margin-inline: 20px;
  }

  .primary-nav{
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .primary-nav .nav-item{
    min-width: 0;
  }

  .primary-nav .nav-link-button{
    align-content: center;
    display: grid;
    gap: 4px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 18px auto;
    justify-items: center;
    line-height: 1.15;
    min-height: 48px;
    padding-inline: 10px;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .primary-nav .nav-label{
    overflow-wrap: anywhere;
  }

  /* 红点叠放在图标的逻辑末端角，不占据纵向导航中的额外一行。 */
  .primary-nav .nav-link-button > .nav-icon,
  .primary-nav .nav-link-button > .lobotomy-corp-black-forest-egg{
    grid-area: 1 / 1;
  }

  .primary-nav .nav-link-button > .nav-label{
    grid-area: 2 / 1;
  }

  .primary-nav .app-update-unread::after{
    align-self: start;
    grid-area: 1 / 1;
    margin-top: -3px;
    margin-inline-start: 18px;
  }

  .metrics{
    grid-template-columns: 1fr;
  }

  .metric-panel-item + .metric-panel-item{
    border-block-start: 1px solid var(--border-soft);
    border-inline-start: 0;
  }

  .settings-list > .dropdown-settings-row,
  .dropdown-toggle{
    grid-template-columns: 1fr;
  }

  .dropdown-summary-cell{
    margin-bottom: 0;
    margin-top: 0;
  }

  .topic-rule-grid,
  .keyword-rule-grid,
  .topic-rule-row,
  .keyword-rule-row{
    min-width: 0;
    width: 100%;
  }

  .topic-rule-row > *,
  .keyword-rule-row > *,
  .keyword-input-shell,
  .topic-rule-row input,
  .keyword-rule-row input{
    min-width: 0;
  }

  .topic-rule-row{
    grid-template-areas:
      "drag select id enabled delete insert"
      "note note note note keywords keywords";
    grid-template-columns:
      36px
      44px
      minmax(0, 1fr)
      58px
      44px
      44px;
  }

  .topic-rule-head > :nth-child(1),
  .topic-rule-item > :nth-child(2){
    grid-area: drag;
  }

  .topic-rule-head > :nth-child(2),
  .topic-rule-item > :nth-child(3){
    grid-area: select;
  }

  .topic-rule-head > :nth-child(3),
  .topic-rule-item > :nth-child(4){
    grid-area: id;
  }

  .topic-rule-head > :nth-child(4),
  .topic-rule-item > :nth-child(5){
    grid-area: note;
  }

  .topic-rule-head > :nth-child(5),
  .topic-rule-item > :nth-child(6){
    grid-area: enabled;
  }

  .topic-rule-head > :nth-child(6),
  .topic-rule-item > :nth-child(7){
    grid-area: keywords;
  }

  .topic-rule-head > :nth-child(7),
  .topic-rule-item > :nth-child(8){
    grid-area: delete;
  }

  .topic-rule-head > :nth-child(8),
  .topic-rule-item > :nth-child(9){
    grid-area: insert;
  }

  .keyword-rule-row{
    grid-template-areas:
      "drag select keyword keyword keyword keyword delete insert"
      "title title body body comments comments replies replies";
    grid-template-columns:
      36px
      44px
      repeat(4, minmax(0, 1fr))
      44px
      44px;
  }

  .keyword-rule-row > :nth-child(1){
    grid-area: drag;
  }

  .keyword-rule-row > :nth-child(2){
    grid-area: select;
  }

  .keyword-rule-row > :nth-child(3){
    grid-area: keyword;
  }

  .keyword-rule-row > :nth-child(4){
    grid-area: title;
  }

  .keyword-rule-row > :nth-child(5){
    grid-area: body;
  }

  .keyword-rule-row > :nth-child(6){
    grid-area: comments;
  }

  .keyword-rule-row > :nth-child(7){
    grid-area: replies;
  }

  .keyword-rule-row > :nth-child(8){
    grid-area: delete;
  }

  .keyword-rule-row > :nth-child(9){
    grid-area: insert;
  }

  .topic-rule-head > :nth-child(6),
  .topic-rule-item > :nth-child(7),
  .topic-rule-head > :nth-child(8),
  .topic-rule-item > :nth-child(9),
  .keyword-rule-row > :nth-child(7),
  .keyword-rule-row > :nth-child(9){
    border-inline-end: 0;
  }

  .topic-rule-row:last-child > div,
  .topic-rule-row:last-child > label,
  .keyword-rule-row:last-child > div,
  .keyword-rule-row:last-child > label{
    border-bottom: 1px solid var(--border-soft);
  }

  .topic-rule-item:last-child > :nth-child(5),
  .topic-rule-item:last-child > :nth-child(7),
  .keyword-rule-item:last-child > :nth-child(4),
  .keyword-rule-item:last-child > :nth-child(5),
  .keyword-rule-item:last-child > :nth-child(6),
  .keyword-rule-item:last-child > :nth-child(7){
    border-bottom: 0;
  }

  .topic-rule-head,
  .keyword-rule-head{
    font-size: 13px;
  }

  .topic-rule-row > div,
  .topic-rule-row > label,
  .keyword-rule-row > div,
  .keyword-rule-row > label{
    box-sizing: border-box;
    padding: 6px 4px;
  }

  .auth-method-summary{
    white-space: normal;
  }

  .auth-method-panel-fields > label,
  .auth-method-plain-row,
  .totp-setup-qr-row,
  .totp-manual-key-row{
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .auth-method-panel-fields input,
  .auth-method-panel-fields select,
  .auth-method-panel-fields textarea{
    width: 100%;
  }

  .settings-row-action-button,
  .account-mode-buttons,
  .secret-input-row button{
    align-self: auto;
    margin-inline-start: auto;
  }

  .section-title-row{
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .page-size-links{
    justify-content: center;
    width: 100%;
  }

  .page-size-links span{
    flex: 0 0 100%;
    text-align: center;
  }

  .table-filter-shell,
  .table-filter-shell:has(.filter-toggle-input:checked){
    grid-template-columns: minmax(0, 1fr) 28px;
    width: 100%;
  }
}

/* 窄屏按控件类型分配空间，不依赖旧 WebView 缺失的 :has 选择器。 */
@media (max-width: 620px){
  .settings-list > div:not(.dropdown-settings-row):not(.settings-navigation-row):not(.notification-test-drawer){
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .settings-list > div:not(.dropdown-settings-row):not(.settings-navigation-row):not(.notification-test-drawer):not(.is-collapsed){
    padding: 14px 16px;
  }

  .settings-list > .settings-compact-row:not(.is-open){
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px;
    min-height: 64px;
  }

  .settings-compact-row > dd{
    justify-self: end;
    max-inline-size: 55vw;
  }

  .settings-compact-row.is-open > dd{
    justify-self: stretch;
    max-inline-size: none;
  }

  .settings-list > div > dt,
  .settings-list > div > dd{
    overflow-wrap: anywhere;
  }

  .settings-label-with-icon{ column-gap: 0; }
  .settings-label-with-icon > * + *{ margin-inline-start: 6px; }

  .settings-list > div > dd > input,
  .settings-list > div > dd > select,
  .poll-interval-control{
    max-width: none;
    width: 100%;
  }

  .settings-compact-row > dd > .theme-color-input{
    width: 54px;
  }

  .poll-interval-control{
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.7fr);
  }

  .input-action-row input,
  .account-username-row input,
  .account-single-input-row input,
  .email-binding-row input[type="email"],
  .email-binding-row input[type="text"],
  .auth-method-summary-row > .email-binding-row{
    flex: 1 1 0;
    min-inline-size: 0;
    max-width: none;
  }

  .auth-method-summary-row{
    flex-wrap: nowrap;
    column-gap: 0;
  }

  /* 操作间距使用逻辑边距，兼容没有 flex gap 的 WebView 和 RTL。 */
  .input-action-row,
  .account-username-row,
  .account-single-input-row,
  .email-binding-row{
    column-gap: 0;
  }

  .input-action-row > button,
  .account-username-row > .account-mode-buttons,
  .account-single-input-row > .account-mode-buttons,
  .email-binding-row > button,
  .auth-method-summary-row > .auth-method-actions{
    margin-inline-start: 10px;
  }

  .auth-method-summary{
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .account-field-status,
  .input-action-row > .inline-action-status,
  .email-binding-row > .inline-action-status{
    flex-basis: 100%;
    order: 3;
  }

  .settings-list input:not([type="checkbox"]):not([type="radio"]),
  .settings-list select,
  .settings-icon-action-button,
  .auth-method-toggle-button{
    min-height: 44px;
  }

  .settings-icon-action-button,
  .auth-method-toggle-button{
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .account-avatar-setting{
    flex-wrap: wrap;
  }

  .account-avatar-setting > .inline-action-status{
    flex-basis: 100%;
  }

  .account-avatar-preview{
    flex-basis: 56px;
    height: 56px;
    width: 56px;
  }

  .account-avatar-picker{
    border: 0;
    color: var(--theme-link);
    cursor: pointer;
    min-height: 44px;
    padding: 8px 12px;
  }

  .account-avatar-picker-text{ display: none; }
  .account-avatar-picker-touch{ display: inline; }

  .settings-navigation-link{ padding: 16px; }

  .about-version,
  .about-version-updates{ gap: 6px 0; }

  .about-version > * + *,
  .about-version-updates > * + *{ margin-inline-start: 12px; }
}

@media (max-width: 620px){
  .nav-avatar-button{
    min-width: 56px;
    padding-inline: 10px;
  }

  .nav-avatar-button::after{
    display: none;
  }

  .nav-account-dropdown{
    min-width: 148px;
  }

  .match-table{
    --match-cell-block-padding: 12px;
    --match-row-height: 104px;
  }

  .shell{
    padding: 20px 12px;
  }

  .topbar{ gap: 12px; }
  .primary-nav .nav-link-button{ font-size: 14px; min-height: 56px; padding-inline: 4px; }
  .page-heading{ margin-bottom: 20px; }
  .page-heading h1{ font-size: 26px; }

  .topbar > .brand{
    margin-inline: 12px;
  }

  .pagination-row{
    justify-content: center;
  }

  .pagination,
  .page-size-links{
    justify-content: center;
  }

  .section-title-row{
    align-items: center;
    grid-template-columns: max-content minmax(0, 1fr);
  }

  th,
  td{
    padding-block: 6px;
    padding-inline: 4px;
  }

  .match-table th,
  .match-table td{
    padding-inline: 4px;
  }

  .match-table-col-2{
    width: 32px;
  }

  .match-table-col-3{
    width: 5.5em;
  }

  .match-table-col-14{
    width: auto;
  }

  .match-table-col-5{
    width: 6.5em;
  }

  .match-table-col-1{
    width: 32px;
  }

  .match-detail-list{
    font-size: 11px;
    gap: 2px;
  }

  .match-detail-list > div{
    gap: 2px;
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .match-detail-list dd .match-detail-value{
    max-block-size: calc(1.28em + 2px);
  }

  .table-filter-shell,
  .table-filter-shell:has(.filter-toggle-input:checked){
    column-gap: 6px;
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .filter-toggle{
    width: 24px;
  }

  .table-filter-form{
    gap: 6px;
  }

  .table-filter-field{
    flex-basis: auto;
    justify-content: flex-end;
  }
}

/* 404 页面：沿用普通页面外壳，内容居中并突出状态码与返回入口。 */
.not-found{
  align-items: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  margin: clamp(32px, 12vh, 120px) auto 0;
  max-width: 560px;
  text-align: center;
}

.not-found-code{
  color: var(--theme-strong);
  font-size: clamp(56px, 12vw, 96px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  margin: 0;
}

.not-found h1{
  margin: 0;
}

.not-found-description{
  color: var(--muted);
  margin: 0;
}

.not-found form{
  margin-top: 6px;
}

/* 匹配选项复用设置页的抽屉动画和主题变量。 */
.matching-conditional-row{
  opacity: 1;
  transform: translateY(0);
  transition: max-height 180ms ease, opacity 140ms ease, padding 180ms ease, transform 180ms ease, background-color 180ms ease;
}
.matching-conditional-row[style*="max-height"],
.matching-conditional-row.is-collapsed{ overflow: hidden; }
.matching-conditional-row.is-collapsed{
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  pointer-events: none;
  transform: translateY(-4px);
}
.matching-settings-list{ margin: 0; border-radius: 0; overflow: visible; }
.matching-model-control{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); max-width: var(--settings-control-width); }
.matching-picker{ min-width: 0; position: relative; }
.matching-conditional-row:has(.matching-picker-toggle[aria-expanded="true"]){ position: relative; z-index: 2; }
.matching-picker-toggle{
  align-items: center; background: var(--control-bg); border: 1px solid var(--control-border);
  border-radius: 6px 0 0 6px; color: var(--ink); display: flex; font: inherit;
  gap: 12px; justify-content: space-between; min-height: 38px; padding: 0 12px; width: 100%;
}
.matching-picker + .matching-picker .matching-picker-toggle{ border-radius: 0 6px 6px 0; border-inline-start: 0; }
.matching-picker-toggle [data-picker-label]{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matching-picker-toggle .dropdown-chevron{ flex-shrink: 0; width: 6px; height: 6px; }
.matching-picker-menu{
  background: var(--surface); border: 1px solid var(--control-border); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(31, 41, 55, 0.12);
  inset-inline-start: 0; margin-top: 6px; padding: 8px; position: absolute;
  width: max(100%, 220px); max-width: calc(100vw - 52px); box-sizing: border-box; z-index: 20;
}

@supports (color: color-mix(in srgb, #000, #fff)){
  .matching-picker-menu{
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent);
  }
}
.matching-picker:last-child .matching-picker-menu{ inset-inline-start: auto; inset-inline-end: 0; }
.matching-picker-menu[hidden], .matching-picker-options > button[hidden]{ display: none; }
.matching-picker-options{ max-height: 240px; overflow-y: auto; margin-top: 6px; }
.matching-picker-options > button{
  background: transparent; border: 0; border-radius: 4px; color: var(--ink); display: block;
  font: inherit; padding: 9px 10px; text-align: start; overflow-wrap: anywhere; width: 100%;
}
.matching-picker-options > button:hover,
.matching-picker-options > button.is-active,
.matching-picker-options > button[aria-selected="true"]{ background: var(--theme-soft-strong); color: var(--heading); }
.matching-picker-menu [data-model-status]{ display: block; padding: 10px; color: var(--muted-strong); }
.matching-picker-menu [data-model-status][hidden]{ display: none; }
.matching-without-keywords [data-action="edit-topic-keywords"]{ display: none; }
@media (prefers-reduced-motion: reduce){ .matching-conditional-row{ transition: none; } }

/* 连通测试沿用通知测试的行尾图标按钮与状态布局。 */
.matching-test-action{ display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; order: 2; }
.matching-test-action[hidden]{ display: none; }

.desktop-close-options{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.desktop-close-options label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.desktop-close-options input[type="radio"]{
  accent-color: var(--theme-strong);
  width: 16px;
  height: 16px;
}

.settings-hint{ display: block; margin-block-start: 6px; color: var(--muted); font-size: 14px; }

/* 桌面滚动条使用页面主题色和圆角，不影响网页与移动端的原生滚动。 */
:root[data-application-platform="windows"],
:root[data-application-platform="windows"] *{
  scrollbar-width: auto;
  scrollbar-color: auto;
}
:root[data-application-platform="windows"]::-webkit-scrollbar,
:root[data-application-platform="windows"] *::-webkit-scrollbar{ width: 10px; height: 10px; }
:root[data-application-platform="windows"]::-webkit-scrollbar-thumb,
:root[data-application-platform="windows"] *::-webkit-scrollbar-thumb{
  background: var(--theme-link);
  border: 3px solid var(--bg);
  border-radius: 10px;
}

@supports (color: color-mix(in srgb, #000, #fff)){
  :root[data-application-platform="windows"]::-webkit-scrollbar-thumb,
  :root[data-application-platform="windows"] *::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--theme-color) 42%, var(--muted) 58%);
  }
}
:root[data-application-platform="windows"]::-webkit-scrollbar-track,
:root[data-application-platform="windows"] *::-webkit-scrollbar-track{ background: var(--bg); }

/* 管理页面复用设置页主题、控件和抽屉箭头，字段按可用宽度重排。 */
.admin-panel h2, .admin-panel button, .admin-user > summary, .admin-delete > summary { display:flex; align-items:center; gap:8px; }
.admin-panel button { justify-content:center; }
.admin-panel button .settings-label-icon { color:inherit; }
.admin-panel input, .admin-panel select, .admin-panel textarea { min-inline-size:0; max-inline-size:100%; box-sizing:border-box; }
.admin-panel dd, .admin-panel time, .admin-panel bdi { overflow-wrap:anywhere; }
.admin-card, .admin-user { border:1px solid var(--border); border-radius:8px; background:var(--surface); overflow:hidden; }
.admin-field { display:grid; align-content:start; gap:8px; min-inline-size:0; color:var(--muted); font-size:14px; }
.admin-field input { font-size:16px; }
.admin-generate { display:grid; grid-template-columns:minmax(80px,0.4fr) minmax(220px,1fr) minmax(160px,1.4fr) auto; align-items:end; gap:16px; padding:18px 22px; background:var(--theme-soft); }
.admin-generate button { min-block-size:38px; }
.admin-empty { padding:22px; text-align:center; border-block-start:1px solid var(--border-soft); font-size:14px; }
.admin-unlock { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:18px 22px; background:var(--theme-soft); }
.admin-unlock .admin-field { display:flex; align-items:center; flex:1; }
.admin-unlock .admin-field > span { flex:none; margin-inline-end:12px; }
.admin-unlock input { max-inline-size:none; }
.admin-user { margin-block:12px; }
.admin-user > summary { cursor:pointer; padding:14px 22px; background:var(--theme-soft); list-style:none; }
.admin-user > summary::-webkit-details-marker, .admin-delete > summary::-webkit-details-marker { display:none; }
.admin-user > summary:hover, .admin-user > summary:focus-visible, .admin-delete > summary:hover { background:var(--theme-border); }
.admin-user > summary .dropdown-chevron { margin-inline-start:auto; flex:none; }
.admin-user > summary .admin-role + .dropdown-chevron { margin-inline-start:8px; }
.admin-user[open] > summary .dropdown-chevron, .admin-delete[open] > summary .dropdown-chevron { transform:rotate(225deg); }
.admin-role { margin-inline-start:auto; color:var(--muted); font-size:14px; }
.admin-user .settings-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-block-start:1px solid var(--border); border-radius:0; margin:0; }
.admin-user .settings-list > div { grid-template-columns:minmax(100px,120px) minmax(0,1fr); padding:14px 22px; }
.admin-user .settings-list > div > dd { margin:0; }
.admin-user .settings-list > .admin-actions-row { display:flex; grid-column:1 / -1; justify-content:flex-end; }
.admin-actions-row dt { display:none; }
.admin-delete { padding:14px 22px; border-block-start:1px solid var(--border); }
.admin-delete > summary { cursor:pointer; list-style:none; color:var(--muted); }
.admin-delete > summary .dropdown-chevron { margin-inline-start:auto; }
.admin-delete form { display:flex; align-items:end; gap:12px; margin-block-start:16px; }
.admin-delete label { display:grid; flex:1; gap:8px; }
.admin-invitations { display:grid; }
.admin-invitation { display:grid; grid-template-columns:minmax(120px,1fr) minmax(0,3fr) 80px; align-items:center; gap:20px; padding:16px 22px; border-block-start:1px solid var(--border-soft); }
.admin-invitation > div { display:grid; gap:4px; overflow-wrap:anywhere; }
.admin-invitation > div > span { color:var(--muted); font-size:14px; }
.admin-invitation dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.admin-invitation dl > div { display:grid; align-content:start; gap:4px; }
.admin-invitation dd { margin:0; font-size:14px; }
.admin-codes { display:grid; gap:8px; margin:0; padding:16px 22px; border-block-start:1px solid var(--border-soft); color:var(--muted); font-size:14px; }
.admin-codes textarea { inline-size:100%; color:var(--ink); background:var(--control-bg); border:1px solid var(--control-border); border-radius:6px; padding:10px; font:14px/1.5 monospace; resize:vertical; min-block-size:42px; }
.admin-panel input[type="checkbox"] { inline-size:auto; }
@media (max-width:1000px) {
  .admin-generate { grid-template-columns:minmax(80px,1fr) minmax(220px,2fr); }
  .admin-generate button { justify-self:end; }
  .admin-user .settings-list { grid-template-columns:1fr; }
  .admin-invitation { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .admin-invitation > div { display:flex; justify-content:space-between; grid-column:1; }
  .admin-invitation dl { grid-column:1; }
  .admin-invitation > form { grid-column:2; grid-row:1 / 3; }
}
@media (max-width:640px) {
  .admin-generate { grid-template-columns:1fr; padding:16px; gap:14px; }
  .admin-generate button { justify-self:stretch; }
  .admin-unlock { padding:16px; align-items:end; }
  .admin-unlock .admin-field { display:grid; flex-basis:100%; }
  .admin-unlock .admin-field > span { margin:0; }
  .admin-unlock input { max-inline-size:none; }
  .admin-unlock button { inline-size:100%; }
  .admin-user > summary, .admin-delete, .admin-invitation { padding:14px 16px; }
  .admin-panel .settings-list > div { grid-template-columns:1fr; padding:14px 16px; gap:8px; }
  .admin-panel .settings-list > div > dd { margin:0; }
  .admin-invitation dl { grid-template-columns:1fr; }
  .admin-invitation dl > div { display:flex; flex-wrap:wrap; gap:4px 12px; }
  .admin-delete form { flex-direction:column; align-items:stretch; }
  .admin-codes { padding:16px; }
}

/* 子页返回入口沿用主题边框与页面底色，保留键盘焦点轮廓。 */
.settings-back{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:34px; margin-top:10px; border:1px solid var(--theme-border); border-radius:8px; background:var(--bg); color:var(--muted); }
.settings-back svg{ width:22px; height:22px; }
.settings-back:hover{ background:var(--theme-soft); color:var(--theme-link); }
.settings-back:focus-visible{ outline:2px solid var(--theme-link); outline-offset:3px; }

/* 高级时段页仍使用主设置表单，隐藏主视图不会停用其保存字段。 */
body[data-settings-panel="polling"] .shell > :not(#settings-autosave-form):not(.form-actions){ display:none; }
body[data-settings-panel="polling"] #settings-autosave-form > :not([data-schedule-page]){ display:none; }
[data-schedule-page][hidden]{ display:none; }
[data-schedule-page] .page-heading{ justify-content:flex-start; gap:24px; }
[data-schedule-page] .page-heading h1{ margin:0; }
.schedule-list{ border:1px solid var(--border); border-radius:8px; background:var(--theme-soft); overflow:hidden; }
.schedule-row{ display:grid; grid-template-columns:32px minmax(210px,1.5fr) minmax(170px,1fr) minmax(85px,.6fr) minmax(140px,.8fr) 72px; gap:16px; padding:20px; border-bottom:1px solid var(--border-soft); align-items:center; position:relative; }
.schedule-row:last-child{ border-bottom:0; }
.schedule-field [aria-invalid="true"],.schedule-date-fields [aria-invalid="true"]{ border-color:#B42318; }
:root[data-color-mode="dark"] .schedule-field [aria-invalid="true"],:root[data-color-mode="dark"] .schedule-date-fields [aria-invalid="true"]{ border-color:#FFB4AB; }
.schedule-row.is-dragging{ opacity:.65; background:var(--theme-soft-strong); }
.schedule-field{ display:flex; flex-direction:column; gap:10px; min-width:0; color:var(--muted); font-size:14px; }
.schedule-field input,.schedule-field select{ width:100%; min-width:0; }
.schedule-field[hidden],.schedule-paused-summary[hidden]{ display:none; }
.schedule-paused-summary{ grid-column:3 / 6; justify-self:start; align-self:center; padding:12px 0; }
.schedule-field .poll-interval-control{ display:flex; gap:8px; }
.schedule-field .poll-interval-control input{ flex:1; width:60px; }
.schedule-field .poll-interval-control select{ width:76px; }
.schedule-range button{ width:100%; min-height:40px; color:var(--ink); border:1px solid var(--control-border); border-radius:6px; background:var(--control-bg); padding:8px 10px; font:inherit; text-align:start; direction:ltr; unicode-bidi:plaintext; }
.schedule-actions{ display:flex; gap:4px; align-items:center; }
.schedule-actions [hidden]{ display:none; }
.schedule-date-dialog{ width:min(92vw,460px); }
.schedule-date-fields{ display:grid; gap:20px; padding:20px; }
.schedule-date-fields label{ display:grid; gap:8px; }
.schedule-date-fields input{ width:100%; min-width:0; direction:ltr; }
[data-polling-section] .settings-list{ position:relative; }
.settings-list > .schedule-navigation-row{ position:relative; display:flex; padding:0; }
.schedule-navigation-row dt{ flex:1; }
.schedule-navigation-row .settings-navigation-link{ padding-inline-end:100px; }
.settings-list > .schedule-navigation-row > dd{ position:absolute; inset-inline-end:22px; top:50%; transform:translateY(-50%); margin:0; }
.settings-list > .polling-coverage-overlay{ position:absolute; inset-inline:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:24px; border:0; color:var(--muted-strong); font-weight:600; text-align:center; background:rgba(243,241,248,.8); }
.settings-list > .polling-coverage-overlay[hidden]{ display:none; }
:root[data-color-mode="dark"] .settings-list > .polling-coverage-overlay{ background:rgba(28,27,39,.8); }
@supports (background:color-mix(in srgb,white,transparent)){
  .settings-list > .polling-coverage-overlay,:root[data-color-mode="dark"] .settings-list > .polling-coverage-overlay{ background:color-mix(in srgb,var(--bg) 80%,transparent); }
}
@media(max-width:1000px){
  .schedule-paused-summary{ grid-column:2 / 4; grid-row:2; }
  .schedule-row{ grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 68px; gap:12px; padding:16px; }
  .schedule-range{ grid-column:2 / 4; }
  .schedule-row > .rule-drag-handle{ grid-column:1; grid-row:1 / 3; }
  .schedule-actions{ grid-column:4; grid-row:1 / 3; }
  .schedule-row > .schedule-field:nth-child(3){ grid-column:2 / 4; }
  .schedule-row > .schedule-field:nth-child(4){ grid-column:2; }
  .schedule-row > .schedule-field:nth-child(5){ grid-column:3; }
}
@media(max-width:540px){
  .schedule-paused-summary{ grid-column:1 / 5; grid-row:3; }
  .schedule-row{ grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 60px; padding:12px 10px; gap:10px; }
  .schedule-row > .schedule-field:nth-child(4),.schedule-row > .schedule-field:nth-child(5){ grid-column:2 / 5; }
  .schedule-range,.schedule-row > .schedule-field:nth-child(3){ grid-column:2 / 5; }
  /* 窄屏操作各占一行，图标在完整拖动区或等分的增减区域内居中。 */
  .schedule-row > button.rule-drag-handle{ grid-column:1 / -1; grid-row:1; width:100%; }
  .schedule-actions{ grid-column:1 / -1; grid-row:auto; gap:0; }
  .schedule-row .schedule-actions .icon-button{ flex:1 1 0; width:auto; min-width:0; }
  .schedule-range{ grid-row:2; grid-column:1 / 5; }
  .schedule-row > .schedule-field:nth-child(3),.schedule-row > .schedule-field:nth-child(4),.schedule-row > .schedule-field:nth-child(5){ grid-column:1 / 5; }
  [data-schedule-page] .page-heading{ gap:16px; flex-wrap:wrap; }
  [data-schedule-page] .page-heading h1{ font-size:26px; }
  .settings-list > .schedule-navigation-row > dd{ inset-inline-end:16px; }
}

/* 时段行操作沿用规则表图标按钮，保持窄屏末端空间。 */
.schedule-actions .icon-button,.schedule-row > .rule-drag-handle{ flex:0 0 30px; width:30px; min-width:30px; height:36px; padding:0; }
.schedule-actions .icon-button svg{ width:18px; height:18px; }
.schedule-field input,.schedule-field select,.schedule-range button{ font-size:16px; }
[data-schedule-page] .page-heading{ flex-direction:row; align-items:center; }
/* 日期端点直接选择可留空的年份、月日与时间，不增加重复周期模式。 */
.schedule-date-fields fieldset{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:10px; }
.schedule-date-fields legend{ padding:0; margin-bottom:8px; }
.schedule-calendar-fields{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.8fr); gap:8px; }
.schedule-calendar-fields select{ width:100%; min-width:0; padding-inline:8px; }
.schedule-date-fields [type="time"]{ min-height:42px; }
.schedule-calendar-options{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.schedule-date-fields select{ min-width:0; width:100%; }
.schedule-date-fields [hidden]{ display:none; }
.schedule-editable-select{ display:block; min-width:0; }
.schedule-editable-select > select{ display:none; }
.schedule-editable-select > input{ width:100%; min-width:0; }
.schedule-date-dialog{ max-height:90vh; overflow-y:auto; }
/* 旧 WebView 不支持逻辑定位时使用物理边界，RTL 同步镜像开关位置。 */
.settings-list > .polling-coverage-overlay{ left:0; right:0; }
.settings-list > .schedule-navigation-row > dd{ right:22px; left:auto; }
[dir="rtl"] .settings-list > .schedule-navigation-row > dd{ right:auto; left:22px; }
@media(max-width:540px){
  .settings-list > .schedule-navigation-row > dd{ right:16px; }
  [dir="rtl"] .settings-list > .schedule-navigation-row > dd{ right:auto; left:16px; }
}

/* 更新横幅独占底部一行，页面在剩余高度内滚动，不改变原生窗口大小。 */
:root.app-update-banner-visible{ overflow: hidden; }
.app-update-banner-visible body{ height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.app-update-content{ min-height: 0; overflow-y: auto; }
.app-update-banner{ display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 4px 12px; background: var(--theme-soft); border-top: 1px solid var(--theme-border); animation: app-update-rise 180ms ease-out; }
.app-update-banner button{ min-height: 30px; padding: 4px 12px; font-size: 13px; }
@keyframes app-update-rise{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .app-update-banner{ animation: none; } }