/* style.css —— 苹果扁平化 UI + 拾取器样式（自包含，无外部依赖，支持双主题） */
:root, [data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --input-bg: #ffffff;
  --line: #e3e3e8;
  --text: #1d1d1f;
  --sub: #6e6e73;
  --blue: #0071e3;
  --blue-d: #005bbd;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9f0a;
  --purple: #af52de;
  --teal: #0aa2c0;
  --topbar-bg: rgba(255,255,255,.8);
  --btn-sec: #e8e8ed;
  --btn-sec-h: #dcdce1;
  --code-bg: #1d1d1f;
  --code-fg: #e6e6e6;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}
[data-theme="dark"] {
  --bg: #1c1c1e;
  --panel: #2c2c2e;
  --panel-2: #242426;
  --input-bg: #1c1c1e;
  --line: #3a3a3c;
  --text: #f5f5f7;
  --sub: #9a9a9f;
  --blue: #0a84ff;
  --blue-d: #0060df;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --purple: #bf5af2;
  --teal: #40c8e0;
  --topbar-bg: rgba(28,28,30,.8);
  --btn-sec: #3a3a3c;
  --btn-sec-h: #48484a;
  --code-bg: #000000;
  --code-fg: #d7d7db;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px; line-height: 1.5;
}

/* 顶部栏 */
.env-warn {
  margin: 10px 14px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,59,48,.1);
  border: 1px solid rgba(255,59,48,.4);
  color: #c0392b;
  font-size: 13px; line-height: 1.65;
}
.env-warn code {
  background: rgba(255,59,48,.14); padding: 1px 6px; border-radius: 5px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #900;
}
[data-theme="dark"] .env-warn { background: rgba(255,59,48,.16); border-color: rgba(255,59,48,.5); color: #ff8278; }
[data-theme="dark"] .env-warn code { background: rgba(255,59,48,.24); color: #ffb0a8; }

.topbar {
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 12px 20px; position: sticky; top: 0; z-index: 50;
  display: flex; gap: 12px; align-items: center;
}
.topbar h1 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.url-input {
  flex: 1; max-width: 620px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; outline: none; background: var(--input-bg); color: var(--text);
}
.url-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,113,227,.15); }

/* 按钮 */
.btn {
  border: none; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer; background: var(--blue); color: #fff; transition: .15s; white-space: nowrap;
}
.btn:hover { background: var(--blue-d); }
.btn.secondary { background: var(--btn-sec); color: var(--text); }
.btn.secondary:hover { background: var(--btn-sec-h); }
.btn.ghost { background: transparent; color: var(--blue); padding: 6px 10px; }
.btn.ghost.small { font-size: 12px; padding: 4px 8px; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* 布局 */
.layout { display: grid; grid-template-columns: 1fr 380px; gap: 16px; padding: 16px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px;
}
.card h2 { font-size: 13px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; }
.card + .card { margin-top: 14px; }

/* 预览区 */
.preview-wrap { position: relative; }
#preview {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  min-height: 520px; max-height: 78vh; overflow: auto; padding: 8px;
}
#preview iframe {
  width: 100%; min-height: 520px; border: none; border-radius: 10px; background: var(--panel-2); display: block;
}
.preview-empty { color: var(--sub); padding: 40px; text-align: center; }

/* 拾取高亮：由 JS 注入 iframe 内生效 */

/* 悬浮路径提示 */
.path-tip {
  position: fixed; z-index: 999; pointer-events: none;
  background: rgba(0,0,0,.82); color: #fff; font-size: 12px;
  padding: 4px 8px; border-radius: 6px; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 拾取弹窗 */
.popover {
  position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 8px; display: none;
}
.popover .pop-title { font-size: 12px; color: var(--sub); padding: 2px 6px 6px; }
.popover .pop-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.popover button { border: none; border-radius: 8px; padding: 7px 10px; font-size: 13px; cursor: pointer; color: #fff; }
.pop-cancel { grid-column: 1 / -1; background: var(--btn-sec); color: var(--text) !important; }

/* 字段按钮组 */
.field-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.field-btns .fb {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; background: var(--panel-2); font-size: 13px; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.field-btns .fb.active { border-color: var(--blue); background: rgba(0,113,227,.08); color: var(--blue); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.title { background: var(--red); } .dot.link { background: var(--green); }
.dot.content { background: var(--orange); } .dot.date { background: var(--purple); }
.dot.author { background: var(--teal); }

/* 选择器列表 */
.sel-row { display: grid; grid-template-columns: 84px 1fr 28px; gap: 6px; align-items: center; margin-bottom: 6px; }
.sel-row label { font-size: 12px; color: var(--sub); }
.sel-row input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; outline: none; background: var(--input-bg); color: var(--text); }
.sel-row input:focus { border-color: var(--blue); }
.sel-row .del { border: none; background: transparent; color: var(--red); cursor: pointer; font-size: 16px; }
.sel-row.two { grid-template-columns: 84px 1fr; }

/* 卡片头部与标签页 */
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.tabs { display: flex; gap: 4px; }
.tab { border: 1px solid var(--line); background: var(--panel-2); color: var(--sub); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tab.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* 折叠面板 */
.collapsible .ch-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.collapsible .chev { transition: transform .2s; font-size: 12px; }
.collapsible.collapsed .ch-body { display: none; }
.collapsible.collapsed .chev { transform: rotate(-90deg); }

/* 开关 */
.switch { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sub); margin: 6px 0; cursor: pointer; }
.switch input { width: 15px; height: 15px; accent-color: var(--blue); }

/* 一键订阅栏 */
.subscribe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.sub-link { font-size: 12px; color: var(--blue); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.sub-link:hover { border-color: var(--blue); background: rgba(0,113,227,.08); }

/* RSS 输出 */
#xmlOut {
  background: var(--code-bg); color: var(--code-fg); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5;
  max-height: 340px; overflow: auto; white-space: pre; margin: 0;
}
.preview-items { list-style: none; margin: 8px 0 0; padding: 0; }
.preview-items li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.preview-items li a { color: var(--blue); text-decoration: none; font-weight: 500; }
.preview-items .pi-meta { display: flex; gap: 10px; margin-top: 2px; }
.preview-items .pi-date, .preview-items .pi-author { color: var(--sub); font-size: 12px; }
.preview-items .pi-content { color: var(--sub); font-size: 12px; margin-top: 4px; max-height: 60px; overflow: hidden; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.muted { color: var(--sub); font-size: 12px; }
.rules-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; }
.rule-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.rule-item:hover { border-color: var(--blue); }
.rule-item .ri-main { flex: 1; cursor: pointer; min-width: 0; }
.rule-item .ri-title { font-weight: 500; }
.rule-item .ri-url { color: var(--sub); font-size: 11px; word-break: break-all; }
.rule-item .ri-del { border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .6; }
.rule-item .ri-del:hover { opacity: 1; }
.status { font-size: 12px; padding: 6px 0; min-height: 18px; }
.status.err { color: var(--red); }
.status.ok { color: var(--green); }
.badge { display:inline-block; background:var(--btn-sec); border-radius:6px; padding:1px 7px; font-size:11px; color:var(--sub); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 10px;
  font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 2000; max-width: 80vw;
}
.toast.show { opacity: .96; transform: translateX(-50%) translateY(0); }

/* 头部操作组（卡片右上） */
.head-actions { display: flex; gap: 6px; align-items: center; }
.card-head .btn.ghost.small { text-decoration: none; }
.div { border: none; border-top: 1px dashed var(--line); margin: 8px 0; }

/* SPA 提示 */
.spa-hint {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6;
  background: rgba(255,159,10,.12); color: var(--orange); border: 1px solid rgba(255,159,10,.35);
}
.spa-hint strong { display: block; margin-bottom: 4px; }

/* 页面自带 RSS 提示 */
.rss-alt-hint {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  background: rgba(0,122,255,.08); color: var(--blue); border: 1px solid rgba(0,122,255,.25);
  display: none;
}
.rss-alt-hint a { color: var(--blue); text-decoration: underline; word-break: break-all; }

/* 列表项缩略图 */
.preview-items li { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pi-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.preview-items li a { flex: 1; min-width: 180px; }

/* 模态层 */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;
  z-index: 1500; padding: 20px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; width: 100%; max-width: 460px; max-height: 80vh; overflow: auto;
}
.modal-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.modal-box .actions { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }

/* 智能推荐列表 */
.suggest-list { display: flex; flex-direction: column; gap: 10px; }
.suggest-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel-2); }
.si-head { font-weight: 600; margin-bottom: 6px; }
.si-row { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: baseline; font-size: 12px; margin-bottom: 3px; }
.si-row span { color: var(--sub); }
.si-row code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; color: var(--blue); }
.si-apply { margin-top: 6px; width: 100%; }

/* 健康看板 */
.health-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 240px; overflow: auto; }
.health-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; }
.h-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.h-ok { background: rgba(52,199,89,.15); color: var(--green); }
.h-err { background: rgba(255,59,48,.15); color: var(--red); }
.h-unknown { background: var(--btn-sec); color: var(--sub); }
.h-main { flex: 1; min-width: 0; }
.h-title { font-weight: 500; font-size: 13px; }
.h-meta { font-size: 11px; color: var(--sub); word-break: break-all; }

/* 顶部用户栏 */
.user-bar { display: flex; align-items: center; gap: 8px; }
.user-name { font-size: 13px; color: var(--sub); }
.topbar .spacer { flex: 1; }

/* 订阅行操作 */
.rule-item { flex-wrap: wrap; }
.ri-meta { margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ri-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.ri-btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--blue);
  border-radius: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.ri-btn:hover { border-color: var(--blue); background: rgba(0,113,227,.08); }
.ri-btn.ri-del { color: var(--red); }
.ri-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 表格内的刷新间隔下拉 */
.ri-select {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; font-size: 12px;
  background: var(--input-bg); color: var(--text); outline: none; cursor: pointer; max-width: 130px;
}
.ri-select:focus { border-color: var(--blue); }
.ri-select:disabled { opacity: .5; cursor: not-allowed; }

/* 下拉框 */
.sel-row select {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px;
  background: var(--input-bg); color: var(--text); outline: none;
}
.sel-row select:focus { border-color: var(--blue); }

/* 后台管理表格 */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { color: var(--sub); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.admin-table tr:hover { background: rgba(0,113,227,.04); }
.admin-table .at-title { font-weight: 500; }
.admin-table .at-url { color: var(--sub); font-size: 11px; word-break: break-all; max-width: 260px; }
.admin-table .at-actions { white-space: nowrap; }
.admin-table .at-link { color: var(--blue); text-decoration: none; margin-right: 6px; }
.admin-table .at-link:hover { text-decoration: underline; }
.admin-table .at-feed { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; color: var(--blue); }
.at-kv { color: var(--sub); font-size: 11px; }
.lock-panel { max-width: 440px; margin: 64px auto; text-align: center; }
.lock-panel .lock-icon { font-size: 40px; }
.empty-hint { text-align: center; color: var(--sub); padding: 28px 0; }