.redbook-pull-login-modal {
  width: 820px;
  height: 640px;
}

.redbook-pull-login-modal .modal-content {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.redbook-pull-webview-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.redbook-pull-webview-container webview {
  width: 100%;
  height: 100%;
  border: none;
}

.redbook-pull-login-actions {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--background-modifier-border);
}

.redbook-pull-login-status {
  font-size: 13px;
  color: var(--text-muted);
}

.redbook-pull-sync-progress {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* ============================================================
   RedLink 设置页 —— 折叠面板 + 扁平化
   作用域：.redlink-settings（由 main.js 在 containerEl 上添加）
   结构由 main.js 的 c() 函数生成：标题行(可点) + 内容区(默认隐藏)
   只影响本插件设置页
   ============================================================ */

/* --- 1. 设置行：去边框 + 强制垂直居中 --- */
.redlink-settings .setting-item {
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- 1b. 左侧信息区：允许收缩，文字基线统一 --- */
.redlink-settings .setting-item-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* --- 1c. 右侧控制区：垂直居中，不与左侧高低错落 --- */
.redlink-settings .setting-item-control {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

/* --- 2. 项与项之间细分隔线 --- */
.redlink-settings .setting-item + .setting-item {
  border-top: 1px solid var(--background-modifier-border);
}

/* --- 3. 去主题可能加的伪元素装饰 --- */
.redlink-settings .setting-item::before,
.redlink-settings .setting-item::after {
  display: none;
}

/* --- 4. 说明文字弱化 --- */
.redlink-settings .setting-item-description {
  color: var(--text-muted);
}

/* --- 5. 按钮：去填充，改细边框 --- */
.redlink-settings button {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-normal);
  font-weight: 400;
}
.redlink-settings button:hover {
  background: var(--background-modifier-hover);
  box-shadow: none;
}

/* --- 6. 主按钮：只靠边框色 + 文字色 --- */
.redlink-settings button.mod-cta {
  background: transparent;
  background-image: none;
  border-color: var(--interactive-accent);
  color: var(--interactive-accent);
  box-shadow: none;
}
.redlink-settings button.mod-cta:hover {
  background: transparent;
  border-color: var(--interactive-accent-hover);
  color: var(--interactive-accent-hover);
}

/* --- 7. 警告按钮：红描边 + 红字 --- */
.redlink-settings button.mod-warning {
  background: transparent;
  background-image: none;
  border-color: var(--text-error);
  color: var(--text-error);
  box-shadow: none;
}
.redlink-settings button.mod-warning:hover {
  background: transparent;
  opacity: 0.75;
}

/* --- 8. 文本输入：去边框，只留底线 --- */
.redlink-settings input[type="text"],
.redlink-settings input[type="password"],
.redlink-settings input[type="number"],
.redlink-settings textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--background-modifier-border);
  border-radius: 0;
  box-shadow: none;
  /* 去边框后补回等效内边距，保持与左侧标签同高，避免视觉错位 */
  padding: 4px 0;
  line-height: 1.4;
  height: auto;
  min-height: unset;
}
.redlink-settings input[type="text"]:focus,
.redlink-settings input[type="password"]:focus,
.redlink-settings input[type="number"]:focus,
.redlink-settings textarea:focus {
  border-bottom-color: var(--interactive-accent);
  box-shadow: none;
  outline: none;
}

/* --- 9. Toggle：去填充色块，改描边圆点 --- */
.redlink-settings .checkbox-container {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  box-shadow: none;
}
.redlink-settings .checkbox-container.is-enabled {
  background: transparent;
  border-color: var(--interactive-accent);
}
.redlink-settings .checkbox-container::after {
  background: var(--text-muted);
  box-shadow: none;
}
.redlink-settings .checkbox-container.is-enabled::after {
  background: var(--interactive-accent);
}

/* ============================================================
   按钮配色（由 main.js 在 display() 末尾按文字打上 rlb-* 类）
   红 #ff2442 / 绿 #4caf82 / 橙 #f4973b
   ============================================================ */
.redlink-settings button.rlb-red {
  border-color: #ff2442;
  color: #ff2442;
  background: transparent;
  background-image: none;
}
.redlink-settings button.rlb-red:hover {
  border-color: #ff2442;
  color: #ffffff;
  background: #ff2442;
}

.redlink-settings button.rlb-green {
  border-color: #4caf82;
  color: #4caf82;
  background: transparent;
  background-image: none;
}
.redlink-settings button.rlb-green:hover {
  border-color: #4caf82;
  color: #ffffff;
  background: #4caf82;
}

.redlink-settings button.rlb-orange {
  border-color: #f4973b;
  color: #f4973b;
  background: transparent;
  background-image: none;
}
.redlink-settings button.rlb-orange:hover {
  border-color: #f4973b;
  color: #ffffff;
  background: #f4973b;
}

/* ============================================================
   Toggle 开关：开 = 绿 #4caf82 / 关 = 灰（不用红，太扎眼）
   ============================================================ */
.redlink-settings .checkbox-container {
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  box-shadow: none;
}
.redlink-settings .checkbox-container::after {
  background: var(--text-faint);
  box-shadow: none;
}
.redlink-settings .checkbox-container.is-enabled {
  background: transparent;
  border-color: #4caf82;
}
.redlink-settings .checkbox-container.is-enabled::after {
  background: #4caf82;
}