/* =========================================================================
   SI163 我的导航 · 最近使用  —  首页快捷条
   颜色全部走主题 CSS 变量（--theme-color / --main-bg-color / --main-radius），
   因此会自动跟随「美化大师」当前皮肤；变量缺失时用站点主色兜底。
   所有规则以 .smy-wrap 作用域包裹，停用插件即零残留。
   ========================================================================= */

.smy-wrap {
  margin: 0 0 18px;
}

.smy-card {
  --smy-accent: var(--theme-color, #4355b9);
  --smy-accent-rgb: var(--theme-color-rgb, 67, 85, 185);
  --smy-radius: 12px;
  --smy-text: var(--text-color, #1f2328);
  --smy-muted: var(--text-muted-color, #8a8f99);
  --smy-line: var(--muted-bg-a-color, rgba(128, 128, 128, .18));
  --smy-surface: var(--main-bg-color, #fff);

  position: relative;
  padding: 10px 14px 12px;
  background: var(--smy-surface);
  border: 1px solid var(--smy-line);
  border-radius: var(--smy-radius);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 34px -24px rgba(16, 24, 40, .28);
}

html.io-black-mode .smy-card {
  --smy-text: #e8eaed;
  --smy-muted: #9aa0a6;
  --smy-line: rgba(255, 255, 255, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -24px rgba(0, 0, 0, .6);
}

/* ---------------- 头部：Tab + 编辑 ---------------- */
.smy-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.smy-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

.smy-tab {
  position: relative;
  padding: 4px 8px 9px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--smy-muted);
  border-radius: 6px 6px 0 0;
  transition: color .18s ease;
}

.smy-tab:hover { color: var(--smy-accent); }

.smy-tab.is-active { color: var(--smy-accent); }

.smy-tab.is-active::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--smy-accent);
}

.smy-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.smy-edit {
  padding: 5px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  color: #fff;
  background: var(--smy-accent);
  box-shadow: 0 8px 18px -10px rgba(var(--smy-accent-rgb), .95);
  transition: filter .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.smy-edit:hover { filter: brightness(1.08); }

.smy-edit.is-on {
  color: var(--smy-accent);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ---------------- 胶囊列表 ---------------- */
.smy-body { min-height: 40px; }

.smy-panel { display: none; }
.smy-panel.is-active { display: block; }

.smy-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smy-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 7px 14px;
  background: var(--smy-surface);
  border: 1px solid var(--smy-line);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease;
}

.smy-pill:hover {
  border-color: rgba(var(--smy-accent-rgb), .45);
  box-shadow: 0 8px 20px -14px rgba(16, 24, 40, .5);
}

.smy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--smy-text) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  line-height: 1.4;
}

.smy-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 4px;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .16);
}

.smy-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- 热门推荐 ---------------- */
.smy-hot-note {
  font-size: 12px;
  color: var(--smy-muted);
  white-space: nowrap;
}

.smy-pill-hot { padding-left: 10px; }

/* 前三名：主色描边 + 淡主色底 */
.smy-pill-hot.is-top {
  border-color: rgba(var(--smy-accent-rgb), .38);
  background: rgba(var(--smy-accent-rgb), .05);
}

.smy-rank {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  color: #fff;
  background: var(--smy-accent);
  box-shadow: 0 3px 8px -3px rgba(var(--smy-accent-rgb), .9);
}
.smy-rank.r1 { background: linear-gradient(135deg, #f97316, #ea580c); box-shadow: 0 3px 8px -3px rgba(234, 88, 12, .95); }
.smy-rank.r2 { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 3px 8px -3px rgba(124, 58, 237, .95); }
.smy-rank.r3 { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 3px 8px -3px rgba(37, 99, 235, .95); }

.smy-views {
  flex: 0 0 auto;
  margin-left: 2px;
  padding-left: 6px;
  font-size: 11.5px;
  color: var(--smy-muted);
  border-left: 1px solid var(--smy-line);
}
.smy-pill-hot.is-top .smy-views {
  color: var(--smy-accent);
  font-weight: 600;
}

/* ---------------- 空状态 ---------------- */
.smy-empty {
  display: none;
  padding: 9px 2px 11px;
  font-size: 13px;
  color: var(--smy-muted);
}

.smy-pills:empty + .smy-empty { display: block; }

/* ---------------- 登录提示（未登录「我的导航」） ---------------- */
.smy-login {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 4px 0 8px;
  background: rgba(var(--smy-accent-rgb), .06);
  border: 1px dashed var(--smy-line);
  border-radius: 10px;
}

.smy-lock {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--smy-accent);
  opacity: .9;
}

.smy-login-text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  color: var(--smy-text);
}

/* ---------------- 编辑态 ---------------- */
.smy-editbar {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--smy-line);
}

.smy-wrap.is-editing .smy-editbar { display: flex; }

.smy-tip {
  flex: 1;
  font-size: 12px;
  color: var(--smy-muted);
}

.smy-btn-ghost,
.smy-btn-solid {
  padding: 4px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  transition: filter .18s ease, color .18s ease, background-color .18s ease;
}

.smy-btn-ghost {
  color: var(--smy-muted);
  background: transparent;
  border: 1px solid var(--smy-line);
}
.smy-btn-ghost:hover { color: #e5484d; border-color: rgba(229, 72, 77, .5); }

.smy-btn-solid {
  color: #fff;
  background: var(--smy-accent);
  border: 0;
}
.smy-btn-solid:hover { filter: brightness(1.08); }

.smy-x {
  display: none;
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: #e5484d;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* 仅「最近使用」支持编辑态（× 移除）；「我的导航」收藏由主题侧管理，不在此编辑 */
.smy-wrap.is-editing .smy-panel[data-panel="recent"] .smy-pill {
  background: rgba(var(--smy-accent-rgb), .06);
  border-style: dashed;
}
.smy-wrap.is-editing .smy-panel[data-panel="recent"] .smy-x { display: block; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 767px) {
  .smy-card { padding: 9px 11px 11px; }
  .smy-tab { font-size: 13.5px; padding: 4px 6px 9px; }
  .smy-hot-note { display: none; }
  .smy-pill { max-width: 100%; }
  .smy-empty { font-size: 12px; }
  .smy-login { padding: 10px 12px; gap: 9px; }
  .smy-login-text { flex-basis: auto; font-size: 12.5px; }
}