/* ============================================================
   NewsHub 信息情报订阅台 · 本地预览版 v0.2
   明暗主题自适应；无外部依赖（离线可用）
   设计关键词：圆形核心按钮 · 卡片工作台 · 克制的色彩点缀
   ============================================================ */

:root {
  --bg:            #f5f6f8;
  --bg-elev:       #ffffff;
  --bg-soft:       #f0f1f4;
  --border:        #e3e5ea;
  --border-strong: #d3d7e0;
  --text:          #1a1d24;
  --text-soft:     #5b6270;
  --text-mute:     #8b91a0;
  --accent:        #4f46e5;
  --accent-2:      #7c3aed;
  --accent-soft:   #eef0ff;
  --accent-text:   #ffffff;
  --ok:            #12a150;
  --ok-soft:       #e7f7ee;
  --warn:          #b45309;
  --warn-soft:     #fef3e2;
  --err:           #d92d20;
  --err-soft:      #fdecea;
  --shadow-sm:     0 1px 2px rgba(16, 24, 40, .06);
  --shadow:        0 4px 16px rgba(16, 24, 40, .08);
  --shadow-lg:     0 12px 32px rgba(16, 24, 40, .14);
  --radius:        14px;
  --radius-sm:     10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0f1116;
    --bg-elev:       #171a21;
    --bg-soft:       #1d2129;
    --border:        #272c37;
    --border-strong: #363c4a;
    --text:          #e9ecf2;
    --text-soft:     #a5adbe;
    --text-mute:     #737d90;
    --accent:        #7c78ff;
    --accent-2:      #a78bfa;
    --accent-soft:   #1e1f3d;
    --accent-text:   #ffffff;
    --ok:            #3ad07f;
    --ok-soft:       #12281c;
    --warn:          #f2b34c;
    --warn-soft:     #2b2213;
    --err:           #ff6b5e;
    --err-soft:      #2c1714;
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .5);
    --shadow:        0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg:     0 12px 32px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

/* display 值会覆盖 UA 的 [hidden]{display:none}，这里统一兜底 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
               "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------- 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
}
.brand {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none; }
.logo {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: linear-gradient(150deg, #4b43e6 0%, #7c78ff 100%);
  color: #fff; font-weight: 800; font-size: 19px;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.logo svg { width: 82%; height: 82%; display: block; }
.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .2px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.brand-text h1 span { font-size: 13px; font-weight: 500; color: var(--text-mute); }
.brand-text p {
  margin: 1px 0 0; font-size: 12.5px; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 状态点已移除（v0.12）：头部只留核心导航与账号 */

main.wrap { padding-bottom: 50px; }

/* ---------------------------------------------- 顶栏右侧：账号 */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.userbox {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 5px 3px 3px;
}
.ub-toggle { position: relative; }
.u-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
  overflow: hidden;
}
.u-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.u-avatar img[hidden] { display: none; }
/* 头像右上角未读小红点（不显数字）：定位在 26px 头像的右上角 */
.u-dot {
  position: absolute; top: -2px; left: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e5484d; border: 2px solid var(--bg-soft);
}
.u-dot[hidden] { display: none; }
.u-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ghost.tiny { padding: 3px 10px; font-size: 11.5px; border-radius: 999px; }

/* ============================================================
   登录 / 注册门页
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; align-content: center; padding: 22px;
  background:
    radial-gradient(circle at 50% 8%,
      color-mix(in srgb, var(--accent) 22%, transparent) 0%,
      transparent 58%),
    var(--bg);
  overflow: auto;
}
.gate[hidden] { display: none; }
/* 登录页页脚：卡片下方一行备案信息，跟着卡片一起垂直居中 */
.gate-foot {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 12px; color: var(--text-mute);
}
.gate-foot .gf-dot { opacity: .5; }
.gate-foot a { color: var(--text-mute); text-decoration: none; }
.gate-foot a:hover { color: var(--accent); text-decoration: underline; }
.gate-card {
  width: 100%; max-width: 400px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 26px 24px 20px;
  animation: modalIn .3s cubic-bezier(.2, .8, .3, 1);
}
.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.gate-brand h1 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: .2px; }
.gate-brand p { margin: 1px 0 0; font-size: 12.5px; color: var(--text-mute); }
.gate-tabs {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 18px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
}
.gate-tab {
  flex: 1; border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; padding: 7px 0; border-radius: 8px;
  transition: background .15s, color .15s;
}
.gate-tab.on { background: var(--bg-elev); color: var(--accent); box-shadow: var(--shadow-sm); }
.gate-form { display: flex; flex-direction: column; gap: 13px; }
.gate-msg {
  margin: 0; min-height: 18px; font-size: 12.5px; color: var(--err);
}
.gate-submit { justify-content: center; padding: 11px 19px; font-size: 14px; }
.gate-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-mute); line-height: 1.65;
}

/* ---------------------------------------------- 主导航 */
.nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 15px; border-radius: 999px;
  font-size: 13.5px; font-weight: 550; color: var(--text-soft);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-item:hover { color: var(--text); text-decoration: none; }
.nav-item.on {
  background: var(--bg-elev); color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.nav-badge {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  background: var(--border); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.nav-item.on .nav-badge { background: var(--accent-soft); color: var(--accent); }
.nav-badge.alert { background: var(--err); color: #fff; }
.nav-item.on .nav-badge.alert { background: var(--err); color: #fff; }

/* ---------------------------------------------- 视图 */
.view { animation: viewIn .26s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Hero：圆形核心抓取按钮
   —— 它是整个产品的核心动作，必须是页面一进来第一眼看到的东西
   ============================================================ */
.hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px 34px;
  text-align: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute; top: -110px; left: 50%;
  width: 660px; height: 660px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 24%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 10%, transparent) 38%,
    transparent 66%);
  filter: blur(6px);
  pointer-events: none;
  animation: glowPulse 6.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.09); }
}

.orb-wrap {
  position: relative;
  width: 208px; height: 208px;
  display: grid; place-items: center;
  z-index: 1;
}
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: ringPulse 3.4s cubic-bezier(.22,.68,.36,1) infinite;
  pointer-events: none;
}
.orb-ring.r2 { animation-delay: 1.7s;
  border-color: color-mix(in srgb, var(--accent-2) 38%, transparent); }
@keyframes ringPulse {
  0%   { transform: scale(.70); opacity: .9; }
  70%  { opacity: .12; }
  100% { transform: scale(1.22); opacity: 0; }
}

.orb {
  position: relative; z-index: 2;
  width: 172px; height: 172px; border-radius: 50%;
  border: none; padding: 0; color: #fff; cursor: pointer;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.45), transparent 48%),
    linear-gradient(142deg, var(--accent) 0%, var(--accent-2) 54%, #a855f7 100%);
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--accent) 46%, transparent),
    0 26px 64px color-mix(in srgb, var(--accent) 26%, transparent),
    inset 0 -7px 20px rgba(0, 0, 0, .22),
    inset 0 5px 14px rgba(255, 255, 255, .32);
  display: grid; place-items: center;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .24s, filter .18s;
  animation: orbBreath 4.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes orbBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.018); }
}

.orb:hover:not(:disabled) {
  animation-play-state: paused;
  transform: translateY(-5px) scale(1.05);
  filter: saturate(1.14) brightness(1.06);
  box-shadow:
    0 16px 38px color-mix(in srgb, var(--accent) 52%, transparent),
    0 34px 86px color-mix(in srgb, var(--accent) 34%, transparent),
    inset 0 -7px 20px rgba(0, 0, 0, .22),
    inset 0 5px 14px rgba(255, 255, 255, .34);
}
.orb:active:not(:disabled) {
  transform: translateY(1px) scale(.955);
  transition-duration: .07s;
}
.orb:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 6px; }
.orb:disabled { opacity: .45; cursor: not-allowed; animation: none; filter: grayscale(.3); }

/* 未订阅任何卡片：按钮置灰、去掉脉冲光环，明确「现在按不动」 */
.orb.idle {
  animation: none;
  background: linear-gradient(142deg, var(--border-strong), var(--border));
  box-shadow: inset 0 -6px 16px rgba(0, 0, 0, .12);
  opacity: .55;
  filter: grayscale(1);
}
.orb-wrap:has(.orb.idle) .orb-ring { display: none; }

.orb-face {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  line-height: 1.1; pointer-events: none;
}
.orb-icon {
  font-size: 42px; line-height: 1;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .3));
}
.orb-label {
  font-size: 18px; font-weight: 800; letter-spacing: 1.4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .28);
  white-space: nowrap;
}
.orb-spinner {
  position: absolute; inset: 7px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.orb.loading .orb-spinner { opacity: 1; animation: spin .95s linear infinite; }
.orb.loading .orb-face { opacity: .5; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-title {
  margin: 20px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px;
  position: relative; z-index: 1;
}
.hero-title b { color: var(--accent); font-size: 24px; font-variant-numeric: tabular-nums; }
.hero-sub {
  margin: 6px 0 0; font-size: 13.5px; color: var(--text-soft);
  max-width: 520px; position: relative; z-index: 1;
}
.hero-stats {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; font-size: 13px; color: var(--text-mute);
  position: relative; z-index: 1;
}
.hero-stats .hstat b { color: var(--accent); font-size: 17px; font-variant-numeric: tabular-nums; }
.hero-stats .hstat-sep { color: var(--border-strong); }
.hero-stats .hstat.hint { font-size: 12.5px; color: var(--text-mute); }

/* 卡片详情里的小号圆形按钮 */
.orb-wrap.sm { width: 154px; height: 154px; }
.orb.orb-sm { width: 126px; height: 126px; }
.orb.orb-sm .orb-icon { font-size: 29px; }
.orb.orb-sm .orb-label { font-size: 13.5px; letter-spacing: .3px; }
.cd-orb {
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 20px 28px;
}
.cd-orb-hint {
  margin: 18px 0 0; font-size: 12.5px; color: var(--text-mute);
  text-align: center; max-width: 460px;
}

/* ---------------------------------------------- 页头 / 面包屑 */
.page-head { padding: 24px 2px 4px; }
.page-head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.page-sub {
  margin: 6px 0 0; font-size: 13.5px; color: var(--text-soft);
  line-height: 1.65; max-width: 760px;
}
.page-sub b { color: var(--accent); }
.inline-link { color: var(--accent); text-decoration: none; font-weight: 550; }
.inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.crumb {
  display: flex; align-items: center; gap: 9px;
  padding: 22px 2px 0; font-size: 13px; color: var(--text-mute);
}
.crumb a { color: var(--accent); text-decoration: none; font-weight: 550; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb-sep { color: var(--border-strong); }
.crumb-cur {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 60%; color: var(--text-soft);
}

.empty-btn {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none;
}
.empty-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.empty-btn.as-btn {
  border: 1px solid var(--accent); border-radius: 9px;
  padding: 7px 16px; background: transparent;
}
.empty-btn.as-btn:hover { background: var(--accent-soft); text-decoration: none; }

/* ---------------------------------------------- 面板 */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: 18px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.panel-head h2 {
  margin: 0; font-size: 15.5px; font-weight: 650;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------- 通道条 */
.channels { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.chan {
  flex: 1 1 240px; min-width: 200px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px;
  display: flex; align-items: flex-start; gap: 10px;
}
.chan .ic { font-size: 17px; line-height: 1.3; }
.chan .ct { min-width: 0; }
.chan .cn { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.chan .cd { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.tag {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  letter-spacing: .3px;
}
.tag.on  { background: var(--ok-soft); color: var(--ok); }
.tag.off { background: var(--bg-soft); color: var(--text-mute); }

/* ============================================================
   卡片墙
   ============================================================ */
.cards {
  padding: 16px 18px 20px;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
}
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px 16px 13px;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: transform .16s, border-color .16s, box-shadow .22s, background .16s;
}
.card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--c) 13%, transparent), transparent 58%);
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 50%, var(--border));
  box-shadow: var(--shadow);
}
.card:hover::before { opacity: 1; }
.card.sub {
  border-color: color-mix(in srgb, var(--c) 42%, var(--border));
  background: color-mix(in srgb, var(--c) 4%, var(--bg-elev));
}
.card.sub::before { opacity: .65; }
.card.off {
  opacity: .62;
  border-style: dashed;
  background: var(--bg-soft);
}
.card.off:hover { opacity: 1; }

/* 卡片右上角的订阅开关 */
.card-switch {
  position: absolute; top: 11px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
}
.switch-label { font-size: 11px; font-weight: 600; color: var(--text-mute); white-space: nowrap; }
.card.sub .switch-label { color: var(--c); }

.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 38px; height: 21px; border-radius: 999px; flex: 0 0 38px;
  background: var(--border-strong); position: relative;
  transition: background .18s;
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.switch input:checked + .track { background: var(--c, var(--accent)); }
.switch input:checked + .track .thumb { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:hover .track { filter: brightness(1.06); }
.switch input:disabled + .track { opacity: .5; cursor: wait; }

.card-top { display: flex; gap: 11px; align-items: flex-start; padding-right: 104px; }
.card-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px;
  font-size: 23px; line-height: 1;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  display: grid; place-items: center;
}
.card-head { min-width: 0; }
.card-name {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .1px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.preset {
  font-size: 10px; font-weight: 700; color: var(--text-mute);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px; letter-spacing: .3px;
}
.card-desc {
  margin: 4px 0 0; font-size: 12px; color: var(--text-mute); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-src { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.cs {
  font-size: 11px; color: var(--text-soft);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cs.more { color: var(--c); border-color: color-mix(in srgb, var(--c) 34%, transparent); font-weight: 600; }
.cs.empty { color: var(--text-mute); border-style: dashed; }

.card-foot {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-mute);
}
.card-new { color: var(--text-mute); font-weight: 500; white-space: nowrap; }
.card-new b { font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--c); }
.card-new:not(.zero) { color: var(--c); font-weight: 650; }
.card-time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-go { color: var(--accent); font-weight: 600; opacity: 0; transition: opacity .16s; white-space: nowrap; }
.card:hover .card-go { opacity: 1; }

/* ============================================================
   卡片详情
   ============================================================ */
.card-hero {
  display: flex; align-items: flex-start; gap: 15px;
  margin-top: 16px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--c) 13%, var(--bg-elev)), var(--bg-elev) 62%);
  box-shadow: var(--shadow-sm);
}
.ch-icon {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 16px;
  font-size: 30px; line-height: 1;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  display: grid; place-items: center;
}
.ch-main { flex: 1; min-width: 0; }
.ch-main h2 {
  margin: 0; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.ch-main p { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }
.ch-meta {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px;
  font-size: 12px; color: var(--text-mute);
}
.ch-meta .sep { color: var(--border-strong); }
.sub-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 8px; border-radius: 999px;
}
.sub-tag.on  { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.sub-tag.off { background: var(--bg-soft); color: var(--text-mute); border: 1px solid var(--border); }
.ch-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.src-chips { padding: 14px 18px 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.src-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 550;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
}
.src-chip em {
  font-style: normal; font-size: 10.5px; color: var(--text-mute);
  border-left: 1px solid var(--border); padding-left: 7px;
}

/* ============================================================
   通知中心 · 卡片看板
   ============================================================ */
.nboard { padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 10px; }
.ncard {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left; font: inherit; color: inherit;
  padding: 14px 16px;
  border: 1.5px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s;
}
.ncard:hover { border-color: var(--c); background: var(--bg-elev); transform: translateX(2px); }
.ncard.has-new {
  border-color: color-mix(in srgb, var(--c) 34%, var(--border));
  border-left-color: var(--c);
  background: color-mix(in srgb, var(--c) 5%, var(--bg-soft));
}
.nc-icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px;
  font-size: 21px; line-height: 1;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  display: grid; place-items: center;
}
.nc-main { flex: 1; min-width: 0; }
.nc-name { font-size: 14.5px; font-weight: 650; }
.nc-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.nc-last {
  font-size: 12px; color: var(--text-soft); margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-num { flex: 0 0 auto; text-align: right; min-width: 58px; }
.nc-num b {
  display: block; font-size: 24px; line-height: 1.1;
  color: var(--c); font-variant-numeric: tabular-nums;
}
.nc-num b.zero { color: var(--text-mute); font-size: 20px; }
.nc-num span { font-size: 11px; color: var(--text-mute); }
.nboard-foot {
  margin-top: 10px; padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-mute);
}
.nboard-foot b { color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums; }

/* 紧凑模式：一行 3 个磁贴（用户可切换，偏好存 localStorage）
   注意：minmax(0, 1fr) 而非 1fr —— 否则长标题（nowrap）会把网格轨道撑破，
   卡片被挤出面板右侧（用户反馈的「紧凑后卡片没了」）。 */
.nboard.dense {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.nboard.dense .ncard { padding: 11px 12px; gap: 10px; min-width: 0; overflow: hidden; }
.nboard.dense .nc-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.nboard.dense .nc-main { min-width: 0; }
.nboard.dense .nc-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nboard.dense .nc-sub, .nboard.dense .nc-last {
  font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nboard.dense .nc-num { min-width: 40px; }
.nboard.dense .nc-num b { font-size: 16px; }
@media (max-width: 980px) { .nboard.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nboard.dense { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------- 通知列表 */
.notif-list { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.notif {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-soft);
  cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
.notif:hover {
  border-color: var(--accent); background: var(--bg-elev);
  transform: translateX(2px);
}
.notif .n-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong); margin-top: 5px; align-self: flex-start;
}
/* 已读未读（v0.21）：未读 = 强调点 + 高亮；已读 = 灰化 */
.notif.is-unread { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: var(--bg-elev); }
.notif.is-unread .n-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.notif.is-read .n-dot { visibility: hidden; }
.notif.is-read .n-title { color: var(--text-mute); font-weight: 500; }
.notif .n-unread-tag, .cds-main .n-unread-tag {
  color: var(--accent); font-weight: 650; font-size: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 6px; border-radius: 999px;
}
.notif .n-main { flex: 1; min-width: 0; }
.notif .n-title {
  font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.notif .n-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--text-mute);
}
.notif .n-time { font-variant-numeric: tabular-nums; }
.notif .n-num { color: var(--accent); font-weight: 650; }
.notif .n-arrow { color: var(--text-mute); font-size: 12.5px; white-space: nowrap; }
.notif:hover .n-arrow { color: var(--accent); }
/* 行内「标已读」小按钮：点它只标这一条，点行本身只查看、不清未读 */
.notif .n-mark {
  flex: 0 0 auto; font-size: 11.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  background: var(--bg-elev);
}
.notif .n-mark:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); }

/* ---------------------------------------------- 推送卡片（新闻展示） */
#news-area { padding-top: 14px; }
.news-foot { margin-top: 16px; display: flex; gap: 10px; }
.ghost.as-link { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 15px; }
.notes-panel { margin-top: 14px; }

.pushcard {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-elev);
  box-shadow: var(--shadow);
  animation: cardIn .45s cubic-bezier(.2, .8, .3, 1);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.pushcard-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 13px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-soft)), var(--bg-soft));
  border-bottom: 1px solid var(--border);
}
.pushcard-title {
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.pushcard-title .owner {
  font-size: 11.5px; font-weight: 650; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border-radius: 999px; padding: 2px 9px;
}
.pushcard-title .badge {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.pushcard-meta { font-size: 11.5px; color: var(--text-mute); display: flex; gap: 10px; flex-wrap: wrap; }

.items { list-style: none; margin: 0; padding: 0; }
.items > li {
  padding: 14px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 12px;
}
.items > li:first-child { border-top: none; }
.items .idx {
  flex: 0 0 22px; height: 22px; border-radius: 7px;
  background: var(--bg-soft); color: var(--text-soft);
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
.items .body { min-width: 0; flex: 1; }
.items .t { font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 0; word-break: break-word; }
.items .t a { color: inherit; text-decoration: none; }
.items .t a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.items .sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--text-mute);
}
.items .sum {
  margin: 8px 0 0; font-size: 13px; color: var(--text-soft); line-height: 1.62;
  background: var(--bg-soft); border-left: 2.5px solid var(--accent);
  padding: 8px 11px; border-radius: 0 8px 8px 0; word-break: break-word;
}
.items .go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.items .go:hover { text-decoration: underline; text-underline-offset: 3px; }
.items .src-tag { color: var(--accent); font-weight: 600; }
.imp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mute); }
.imp .bar {
  width: 34px; height: 4px; border-radius: 999px; background: var(--border);
  overflow: hidden; display: inline-block;
}
.imp .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.hidden-note {
  padding: 10px 16px; font-size: 12px; color: var(--text-mute);
  background: var(--bg-soft); border-top: 1px solid var(--border);
}

.chip {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-elev); color: var(--text-mute);
  border: 1px solid var(--border); white-space: nowrap;
}

/* 源抓取结果 */
.src-notes { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.note .nm { font-weight: 600; }
.note.ok  { border-color: color-mix(in srgb, var(--ok) 26%, transparent);  background: var(--ok-soft); }
.note.err { border-color: color-mix(in srgb, var(--err) 26%, transparent); background: var(--err-soft); }
.note .detail { color: var(--text-mute); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   弹窗（卡片增删改）
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 14, 20, .48);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 22px;
  animation: maskIn .18s ease;
}
.modal-mask[hidden] { display: none; }
@keyframes maskIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%; max-width: 620px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: modalIn .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; padding: 0;
  border: 1px solid var(--border); background: var(--bg-soft);
  color: var(--text-soft); font-size: 12px;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--bg-elev); color: var(--text); }

.modal-body {
  padding: 16px 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 15px;
}
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-top: 1px solid var(--border);
}
.grow { flex: 1; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.field .req { color: var(--err); }
.field-row { display: flex; gap: 12px; }
.icon-field { flex: 0 0 84px; }

.input {
  font: inherit; font-size: 13.5px; width: 100%;
  padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft); color: var(--text);
  outline: none; transition: border-color .15s, background .15s;
}
.input:focus { border-color: var(--accent); background: var(--bg-elev); }
.icon-input { text-align: center; font-size: 20px; padding: 6px 4px; }
.hint { margin: 0; font-size: 11.5px; color: var(--text-mute); }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.sw {
  width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: var(--c); border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  transition: transform .12s, box-shadow .15s;
}
.sw:hover { transform: scale(1.13); }
.sw.on { box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--c); transform: scale(1.08); }

.seg {
  display: inline-flex; align-self: flex-start; gap: 3px; padding: 3px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
}
.seg-item {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 12.5px; font-weight: 550; padding: 6px 14px; border-radius: 7px;
  transition: background .15s, color .15s;
}
.seg-item.on { background: var(--bg-elev); color: var(--accent); box-shadow: var(--shadow-sm); }

.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.picker-tools { display: flex; gap: 8px; align-items: center; }
.picker-tools .input { flex: 1; }
.picker {
  max-height: 286px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft); padding: 6px;
}
.pick-group { padding: 4px 2px 8px; }
.pick-group:last-child { padding-bottom: 2px; }
.pick-gtitle {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--text-mute);
  padding: 6px 8px 5px; letter-spacing: .3px;
}
.pick-gtitle::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pick-gtitle span { font-weight: 600; }
.pick {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  transition: background .14s;
}
.pick:hover { background: var(--bg-elev); }
.pick.on { background: var(--accent-soft); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .box {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--bg-elev);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.pick .box::after {
  content: ""; width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); margin-top: -2px;
  transition: transform .14s;
}
.pick.on .box { background: var(--accent); border-color: var(--accent); }
.pick.on .box::after { transform: rotate(-45deg) scale(1); }
.pick .nm { font-size: 13px; font-weight: 550; white-space: nowrap; }
.pick .ds {
  font-size: 11.5px; color: var(--text-mute);
  margin-left: auto; padding-left: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* ---------------------------------------------- 按钮 */
button { font: inherit; cursor: pointer; }

.primary {
  position: relative;
  background: var(--accent); color: var(--accent-text);
  border: none; border-radius: var(--radius-sm);
  padding: 9px 19px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: filter .15s, transform .1s, opacity .15s;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.primary:hover:not(:disabled) { filter: brightness(1.08); }
.primary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.ghost {
  background: var(--bg-elev); color: var(--text-soft);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--text-mute); }
.ghost:disabled { opacity: .4; cursor: not-allowed; }
.ghost.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 34%, transparent); }
.ghost.danger:hover:not(:disabled) { background: var(--err-soft); color: var(--err); border-color: var(--err); }

.muted { color: var(--text-mute); font-size: 12.5px; font-weight: 400; }

/* ---------------------------------------------- 空态 / 骨架 */
.empty { text-align: center; padding: 34px 20px; color: var(--text-mute); }
.empty-icon { font-size: 30px; opacity: .8; }
.empty-title { margin: 8px 0 2px; font-size: 14.5px; font-weight: 600; color: var(--text-soft); }
.empty-sub { margin: 0; font-size: 12.5px; }

.skeleton-row {
  height: 88px; border-radius: var(--radius-sm); margin: 14px 18px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--border) 37%, var(--bg-soft) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------------------------------------- Toast */
.toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 11px 15px; max-width: 340px;
  animation: toastIn .32s cubic-bezier(.2, .8, .3, 1);
}
.toast.ok  { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast .tt { font-size: 13.5px; font-weight: 650; }
.toast .td { font-size: 12px; color: var(--text-soft); margin-top: 2px; line-height: 1.5; }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------- 页脚 */
/* ---------------------------------------------- 全站页脚 */
/* 让页脚永远压到视口底部：shell 撑满高度，main 吃掉剩余空间 */
#guest-shell:not([hidden]),
#app-shell:not([hidden]) { display: flex; flex-direction: column; min-height: 100vh; }
#guest-shell > main,
#app-shell > main { flex: 1 0 auto; width: 100%; }

.site-foot {
  flex: 0 0 auto;
  margin-top: auto;                 /* 内容不足一屏时自动贴到底部 */
  padding-top: 40px;                /* 内容超长时与正文留出间距 */
  border-top: 1px solid var(--border);
  background: var(--bg-elev);       /* 实色，避免半透明露出 body 底边 */
  font-size: 12.5px;
  color: var(--text-mute);
}
.sf-inner { max-width: 1100px; margin: 0 auto; padding: 22px 20px 18px; }
.sf-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.sf-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.sf-brand .logo { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; font-size: 15px; }
.sf-brand-txt { display: flex; flex-direction: column; line-height: 1.4; }
.sf-brand-txt b { font-size: 13.5px; color: var(--text-soft); }
.sf-brand-txt span { font-size: 12px; color: var(--text-mute); }
.sf-links { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.sf-links a { color: var(--text-mute); text-decoration: none; transition: color .15s; }
.sf-links a:hover { color: var(--text); }
.sf-bottom {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-mute);
}
.sf-icp { color: var(--text-mute); text-decoration: none; transition: color .15s; }
.sf-icp:hover { color: var(--text-soft); }

@media (max-width: 720px) {
  .sf-top { flex-direction: column; gap: 14px; }
  .sf-inner { padding: 18px 14px 16px; }
}

/* ---------------------------------------------- 响应式 */
@media (max-width: 860px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav { order: 3; width: 100%; justify-content: space-between; }
  .nav-item { flex: 1; justify-content: center; }
  .topbar-right { order: 2; margin-left: auto; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 13px; }
  .topbar-inner { padding: 11px 13px; }
  .brand-text p { display: none; }
  .brand-text h1 span { display: none; }
  .hero { padding: 26px 12px 26px; }
  .orb-wrap { width: 176px; height: 176px; }
  .orb { width: 148px; height: 148px; }
  .orb-icon { font-size: 36px; }
  .orb-label { font-size: 16px; }
  .hero-stats { font-size: 12.5px; }
  .cards { grid-template-columns: 1fr; padding: 14px; }
  .card-top { padding-right: 96px; }
  .panel-head { align-items: flex-start; }
  .tools { width: 100%; }
  .card-hero { flex-direction: column; }
  .ch-actions { width: 100%; }
  .notif { padding: 12px; }
  .notif .n-arrow { display: none; }
  .crumb-cur { max-width: 50%; }
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
  .gate-card { padding: 22px 18px 18px; }
}

/* ============================================================
   v0.4 新增：试玩落地区 + 手机验证码登录 + 双栈标识
   ============================================================ */

/* ---------------------------------------------- 登录页改版 */

.gate-x { margin-left: auto; }
.gate-head { margin-bottom: 18px; }
.gate-head h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; letter-spacing: -.1px; }
.gate-head p { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.6; }
.gate-head b { color: var(--accent); }

.input-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg-soft); padding: 0 10px;
  transition: border-color .15s, background .15s;
}
.input-row:focus-within { border-color: var(--accent); background: var(--bg-elev); }
.input-row .prefix {
  font-size: 13px; font-weight: 600; color: var(--text-mute);
  padding-right: 8px; border-right: 1px solid var(--border);
}
.input-row .input {
  border: none; background: transparent; padding: 9px 0;
  font-variant-numeric: tabular-nums; letter-spacing: .5px;
}
.input-row .input:focus { background: transparent; }
.code-btn {
  flex: 0 0 auto; white-space: nowrap;
  padding: 5px 12px; font-size: 12px; border-radius: 999px;
}
.code-btn:disabled { opacity: .55; cursor: not-allowed; }

.devcode {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: var(--warn-soft); border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  font-size: 12.5px; color: var(--warn);
  transition: transform .12s;
}
.devcode:hover { transform: translateY(-1px); }
.devcode b { font-size: 16px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.dc-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}

.gate-msg.ok  { color: var(--ok); }
.gate-msg.err { color: var(--err); }
.gate-msg.warn { color: var(--warn); }

.gate-alt { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.linklike {
  border: none; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-mute);
  text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.linklike:hover { color: var(--accent); }
.dev-login { display: flex; flex-direction: column; gap: 8px; }
.dev-login .ghost { justify-content: center; }

/* ---------------------------------------------- 试玩落地区 */

.guest-badge {
  font-size: 11.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  white-space: nowrap;
}

#guest-shell .ape { display: none; }
/* 页脚需贴到视口底部，shell 不再额外留底部内边距 */
#guest-shell { padding-bottom: 0; }

.guest-panel { margin-bottom: 18px; }
.guest-src { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 18px; }
.g-src {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 12.5px;
}
.g-src b { font-weight: 600; }
.g-src em {
  font-style: normal; font-size: 10.5px; color: var(--text-mute);
  padding-left: 7px; border-left: 1px solid var(--border-strong);
}

.guest-result-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 20px 2px 8px;
}
.guest-result-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.guest-result-head .badge {
  margin-left: 8px; font-size: 11px; font-weight: 650;
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}

.upsell {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 9%, var(--bg-elev)) 0%,
    var(--bg-elev) 62%);
  box-shadow: var(--shadow-sm);
}
.upsell .up-icon { font-size: 30px; line-height: 1; }
.upsell .up-text { flex: 1 1 260px; min-width: 0; }
.upsell h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.upsell p { margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.65; }

/* 圆钮副标题里的冷却态 */
.orb-wrap:has(.orb.idle) .orb-ring { display: none; }

@media (max-width: 720px) {
  #guest-shell .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
  .guest-badge { display: none; }
  .topbar-right { margin-left: auto; }
  .upsell { padding: 16px; }
  .upsell .primary { width: 100%; justify-content: center; }
}

/* ============================================================
   v0.5 · 图标网格 / 公开卡片 / 源库视图 / 排行榜
   ============================================================ */

/* ---------- 图标网格（弹窗） ---------- */
.icon-grid {
  display: grid; grid-template-columns: repeat(4, 34px); gap: 6px;
  margin-bottom: 8px;
}
.ig {
  width: 34px; height: 34px; padding: 0;
  border: 1.5px solid var(--border); border-radius: 9px;
  background: var(--bg-soft); font-size: 17px; line-height: 1;
  cursor: pointer; transition: border-color .14s, background .14s, transform .1s;
}
.ig:hover { border-color: var(--accent); transform: translateY(-1px); }
.ig.on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ---------- 公开开关 ---------- */
.check-line {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; color: var(--text-soft); line-height: 1.55; cursor: pointer;
}
.check-line input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.preset.pub {
  color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  background: var(--ok-soft);
}

/* ---------- 社区公开卡片 ---------- */
.card.pub { cursor: default; }
.card.pub .card-foot { justify-content: flex-start; }
.clone-btn { white-space: nowrap; }

/* ---------- 源库布局 ---------- */
.src-layout {
  display: grid; grid-template-columns: 198px 1fr; gap: 16px;
  align-items: start; padding-top: 14px;
}
/* 左列：目录 + 热门排行（两个独立卡片，中间留间距） */
.src-aside {
  position: sticky; top: 78px;
  display: flex; flex-direction: column; gap: 10px;
  align-self: start;
}
.src-side {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.side-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  border: none; background: transparent; text-align: left;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 550; color: var(--text-soft);
  transition: background .13s, color .13s;
}
.side-item > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-item em {
  font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text-mute); background: var(--bg-soft);
  border-radius: 999px; padding: 1px 7px; margin-left: auto;
}
.side-item:hover { background: var(--bg-soft); }
.side-item.on { background: var(--accent-soft); color: var(--accent); }
.side-item.on em { background: transparent; color: var(--accent); }
.src-tools { margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.src-tools .input { flex: 1; min-width: 0; }

/* ---------- 源行 ---------- */
.src-cat-panel { margin-bottom: 12px; }
.src-rows { display: flex; flex-direction: column; }
.src-row {
  padding: 12px 18px; border-top: 1px solid var(--border);
  transition: background .13s;
}
.src-row:first-child { border-top: none; }
.src-row:hover { background: var(--bg-soft); }
.sr-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sr-name {
  font-size: 13.5px; font-weight: 650; color: var(--text);
  text-decoration: none;
}
.sr-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tier {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1.5px 8px;
}
.tier.t-hot   { color: var(--err);  background: var(--err-soft); }
.tier.t-normal{ color: var(--accent); background: var(--accent-soft); }
.tier.t-low   { color: var(--text-mute); background: var(--bg-soft); border: 1px solid var(--border); }
.sr-health { font-size: 11.5px; color: var(--text-mute); }
.sr-desc { margin-top: 4px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.sr-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--text-mute);
}
.sr-dm {
  color: var(--accent); text-decoration: none; font-weight: 550;
}
.sr-dm:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 排行榜 ---------- */
.rank-panel { margin-bottom: 14px; }
.rank-list { padding: 6px 18px 14px; display: flex; flex-direction: column; gap: 7px; }
.rank-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.rk-no {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg-soft); color: var(--text-mute);
  border: 1px solid var(--border);
}
.rk-no.top1 { background: #fef3e2; color: #b45309; border-color: #f2d9ac; }
.rk-no.top2 { background: #e8f0fe; color: #1a56db; border-color: #c3d7f8; }
.rk-no.top3 { background: #fdeeea; color: #c2410c; border-color: #f5cdb8; }
.rk-name { font-weight: 650; color: var(--text); min-width: 108px; }
.rk-cat { font-size: 11px; color: var(--text-mute); min-width: 88px; }
.rk-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--bg-soft);
  overflow: hidden; min-width: 60px;
}
.rk-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.rk-n { font-variant-numeric: tabular-nums; color: var(--accent); min-width: 20px; text-align: right; }
.rk-unit { font-size: 11px; color: var(--text-mute); }

/* ---------- 弹窗里的域名小字 ---------- */
.pick .dm {
  font-style: normal; margin-left: 7px; font-size: 10.5px;
  color: var(--text-mute); opacity: .8;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
  .src-layout { grid-template-columns: 1fr; }
  .src-aside { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .src-side { flex-direction: row; flex-wrap: wrap; flex: 1 1 320px; }
  .side-item { width: auto; }
  .side-item > span { max-width: 120px; }
  .rank-side { flex: 1 1 220px; }
  .rk-cat { display: none; }
}

/* ============================================================
   v0.6 · 卡片详情源行增强 / 最近动态 / 源管理后台
   ============================================================ */

/* ---------- 卡片详情：源行 ---------- */
.cd-srcs { display: flex; flex-direction: column; }
.cd-src { padding: 13px 18px; border-top: 1px solid var(--border); transition: background .13s; }
.cd-src:first-child { border-top: none; }
.cd-src:hover { background: var(--bg-soft); }
.cds-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cds-name { font-size: 13.5px; font-weight: 650; color: var(--text); text-decoration: none; }
.cds-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cds-desc { margin-top: 3px; font-size: 12px; color: var(--text-soft); }
.cds-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--text-mute);
}
.cds-meta b { color: var(--accent); font-variant-numeric: tabular-nums; }
.cds-views {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.cds-views:hover { text-decoration: underline; text-underline-offset: 3px; }
.alive { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1.5px 8px; }
.alive.ok  { color: var(--ok);  background: var(--ok-soft); }
.alive.bad { color: var(--err); background: var(--err-soft); }
.alive.na  { color: var(--text-mute); background: var(--bg-soft); border: 1px solid var(--border); }

/* ---------- 最近动态 ---------- */
.ri-list { display: flex; flex-direction: column; }
.ri-row { padding: 11px 18px; border-top: 1px solid var(--border); }
.ri-row:first-child { border-top: none; }
.ri-row:hover { background: var(--bg-soft); }
.ri-main a {
  font-size: 13px; font-weight: 550; color: var(--text);
  text-decoration: none; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ri-main a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ri-sub {
  display: flex; align-items: center; gap: 7px;
  margin-top: 4px; font-size: 11.5px; color: var(--text-mute);
}

/* ---------- 源管理后台 ---------- */
.admin-list { display: flex; flex-direction: column; }
.adm-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.adm-row:first-child { border-top: none; }
.adm-row:hover { background: var(--bg-soft); }
.adm-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 220px; }
.adm-name { font-size: 13.5px; font-weight: 650; }
.adm-url {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; flex: 1 1 200px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-desc {
  flex: 1 1 220px; min-width: 0; font-size: 12px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adm-stats { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-mute); flex-wrap: wrap; }
.adm-stats b { color: var(--accent); font-variant-numeric: tabular-nums; }
.adm-ops { display: flex; gap: 6px; }
button.armed, .adm-del.armed { background: var(--err-soft); color: var(--err); border-color: var(--err); }

/* ---------- 桌面通知开关（顶栏） ---------- */
.notify-btn { font-size: 15px; line-height: 1.4; padding: 3px 9px; }
.notify-btn.on { color: var(--accent); border-color: #c7c9f4; background: #eef0ff; }

/* ---------- 系统通知自测面板 ---------- */
.ntest-panel { margin-bottom: 14px; }
.ntest { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ntest-res { font-size: 12.5px; color: var(--text-mute); }
.ntest-res.system { color: #067647; }
.ntest-res.fallback { color: #b45309; }

/* ---------------------------------------------- 卡片弹窗 · 推送方式（v0.21） */
.push-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.push-seg .pseg {
  font: inherit; font-size: 13px; padding: 7px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.push-seg .pseg:hover { border-color: var(--accent); }
.push-seg .pseg.on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600;
}
.push-custom { margin-top: 10px; }
.push-custom .pc-hint { font-size: 12px; margin: 0 0 8px; }
.pc-list {
  max-height: 200px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-soft); padding: 4px;
}
.pc-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; cursor: pointer; border-radius: 6px; font-size: 13px;
}
.pc-row:hover { background: var(--bg-elev); }
.pc-row input { display: none; }
.pc-row .box {
  flex: 0 0 15px; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--border-strong); background: var(--bg); position: relative;
}
.pc-row input:checked + .box { background: var(--accent); border-color: var(--accent); }
.pc-row input:checked + .box::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.pc-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-row .pc-mode { font-size: 11.5px; white-space: nowrap; }
.pc-row .pc-mode.sys { color: var(--accent); font-weight: 600; }
.pc-row .pc-mode.inbox { color: var(--text-mute); }

/* ---------- 页面内模拟系统通知（非 HTTPS 兜底，位置贴合系统习惯） ---------- */
.nf-host { position: fixed; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.nf-host.at-right-bottom { right: 18px; bottom: 18px; align-items: flex-end; }
.nf-host.at-right-top { right: 18px; top: 18px; align-items: flex-end; }
.nf-card {
  pointer-events: auto; width: 340px; max-width: calc(100vw - 36px);
  background: #fff; border-radius: 14px; padding: 13px 12px 13px 14px;
  box-shadow: 0 12px 34px rgba(20, 20, 40, .18), 0 1px 3px rgba(20, 20, 40, .1);
  border: 1px solid rgba(20, 20, 40, .07);
  display: flex; gap: 11px; align-items: flex-start;
  animation: nfIn .32s cubic-bezier(.22, .8, .36, 1) both;
}
.nf-card.out { animation: nfOut .22s ease-in both; }
@keyframes nfIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nfOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.nf-ic {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.nf-main { flex: 1; min-width: 0; }
.nf-title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.nf-body { font-size: 12.5px; color: var(--text-mute); margin-top: 3px; word-break: break-word; }
.nf-meta { font-size: 11px; color: var(--text-mute); opacity: .75; margin-top: 7px; }
.nf-x {
  background: none; border: 0; cursor: pointer; color: var(--text-mute);
  font-size: 16px; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.nf-x:hover { color: var(--text); }

/* ---------- 通知开启指引弹窗 ---------- */
.guide-modal { max-width: 680px; }
.guide-status { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px 0; }
.gchip {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-soft);
}
.gchip.ok { color: #067647; border-color: #abefc6; background: #ecfdf3; }
.gchip.warn { color: #b45309; border-color: #fde3b0; background: #fffaeb; }

.guide-tabs { display: flex; gap: 4px; padding: 12px 18px 0; border-bottom: 1px solid var(--border); }
.guide-tab {
  border: 0; background: none; cursor: pointer;
  padding: 8px 14px 9px; font-size: 13px; color: var(--text-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.guide-tab:hover { color: var(--text); }
.guide-tab.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.gstep { display: flex; gap: 12px; }
.gnum {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center; margin-top: 1px;
}
.gstep-main { flex: 1; min-width: 0; }
.gstep-main h4 { margin: 0 0 5px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.gstep-main p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-mute); }
.gph { width: 100%; max-width: 380px; margin-top: 9px; display: block; border-radius: 8px; }

/* ============================================================
   v0.9 · 我的（权益 / 激活码）
   ============================================================ */

/* 顶栏权益小标 */
.nav-badge.ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.nav-item.on .nav-badge.ok { background: var(--ok-soft); color: var(--ok); }

.plan-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plan-badge {
  width: 76px; height: 76px; border-radius: 20px; flex: 0 0 auto;
  display: grid; place-items: center; text-align: center; padding: 0 6px;
  font-size: 13px; font-weight: 700; line-height: 1.25;
  color: var(--text-mute); background: var(--bg-soft); border: 1px solid var(--border);
}
.plan-badge.ok {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent);
}
.plan-main { min-width: 0; }
.plan-main h3 { margin: 0 0 5px; font-size: 17px; font-weight: 650; }
.plan-main p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.plan-usage { margin-left: auto; text-align: right; }
.pu-num { font-size: 24px; font-weight: 700; line-height: 1.1; }
.pu-num span { font-size: 13px; font-weight: 500; color: var(--text-mute); }
.pu-label { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }

.plan-perks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; margin-top: 16px;
}
.perk {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-soft);
}
.perk.off { opacity: .6; }
.perk-ic {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--bg-elev); color: var(--text-mute); border: 1px solid var(--border);
}
.perk.on .perk-ic { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.perk-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perk-main b { font-size: 12.8px; font-weight: 650; }
.perk-main em { font-style: normal; font-size: 11.8px; color: var(--text-mute); line-height: 1.55; }

/* 激活码兑换 */
.redeem { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.redeem .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6px; text-transform: uppercase; }
.redeem-msg { margin: 10px 0 0; font-size: 12.5px; min-height: 18px; color: var(--text-mute); }
.redeem-msg.ok { color: var(--ok); }
.redeem-msg.err { color: var(--err); }

/* 激活码管理（管理员） */
.codes-new {
  margin-bottom: 12px; padding: 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong); background: var(--bg-soft);
}
.cn-head { font-size: 12.5px; color: var(--text-soft); margin-bottom: 8px; }
.cn-area {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.7; color: var(--text); background: var(--bg-elev); resize: vertical;
}
.ct-row {
  display: grid; grid-template-columns: 1.6fr .9fr .8fr 1fr 1fr .5fr;
  gap: 8px; align-items: center; padding: 9px 4px;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.ct-head { font-size: 11.5px; color: var(--text-mute); border-bottom-color: var(--border-strong); }
.ct-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.cchip {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft);
}
.cchip.ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cchip.off { opacity: .65; }
.ct-void { color: var(--err); background: none; border: 0; cursor: pointer; font-size: 12.5px; padding: 0; }
.ct-void:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .ct-row { grid-template-columns: 1.5fr .8fr .7fr; row-gap: 4px; }
  .ct-row > :nth-child(4), .ct-row > :nth-child(5) { display: none; }
  .plan-usage { margin-left: 0; text-align: left; }
}

/* ============================================================
   v0.10 · 顶栏瘦身 / 价格表 / 自定义源
   ============================================================ */

/* 用户名旁权益小标（未激活也显示） */
.u-plan {
  font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-mute);
  white-space: nowrap;
}
.u-plan.ok {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* 退出按钮：hover 用户盒才出现 */
.u-logout { opacity: 0; transition: opacity .15s ease; }
.userbox:hover .u-logout, .userbox:focus-within .u-logout { opacity: 1; }

/* 价格表 */
.price-wrap { overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 12.8px; min-width: 640px; }
.price-table th, .price-table td {
  padding: 10px 10px; text-align: center; border-bottom: 1px solid var(--border);
}
.price-table thead th { vertical-align: bottom; padding-top: 14px; }
.price-table .pt-func { text-align: left; color: var(--text-soft); font-weight: 550; white-space: nowrap; }
.price-table thead .pt-func { color: var(--text-mute); font-weight: 500; font-size: 11.5px; }
.price-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.price-table thead th b { display: block; font-size: 13.5px; margin-top: 4px; }
.price-table thead th.hot { position: relative; }
.price-table thead th.cur { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pt-hot {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--accent); color: #fff; margin-bottom: 3px;
}
.pt-orig { display: block; font-size: 11px; color: var(--text-mute); text-decoration: line-through; }
.pt-price { display: block; font-size: 19px; font-weight: 750; color: var(--text); line-height: 1.3; }
.pt-price i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-mute); }
.pt-price.free { color: var(--ok); font-size: 15px; padding-top: 12px; }
.pt-badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; margin-top: 4px;
  color: #b45309; background: #fff7ed; border: 1px solid #fed7aa;
}
html[data-theme='dark'] .pt-badge, .pt-badge { }
.pt-cur {
  display: block; font-size: 10.5px; color: var(--accent); font-weight: 600; margin-top: 3px;
}
.pt-soon {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  border: 1px dashed var(--border-strong); color: var(--text-mute); margin-left: 4px;
}
.pk { font-weight: 700; }
.pk.yes { color: var(--ok); }
.pk.no { color: var(--text-mute); opacity: .5; }
.pt-buy td { padding-top: 12px; padding-bottom: 14px; }
.pt-btn { font-size: 12px; padding: 7px 14px; white-space: nowrap; }

/* 自定义源 */
.tier.t-custom {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.sr-del {
  border: 0; background: none; cursor: pointer; font-size: 11.5px;
  color: var(--err); opacity: 0; padding: 0 2px;
}
.src-row:hover .sr-del { opacity: .85; }
.sr-del:hover { text-decoration: underline; }

/* ============================================================
   v0.12 · 用户下拉菜单（hover 展开 / 过渡动画）/ 站内信
   ============================================================ */

/* 用户盒：可点区域 + 下拉菜单 */
.ub-toggle {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 3px 4px; border-radius: 10px;
  color: inherit; font: inherit;
}
.ub-toggle:hover { background: var(--bg-soft); }
.ub-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 190px; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(10, 12, 24, .28);
  display: flex; flex-direction: column; gap: 2px;
  /* v0.12：丝滑过渡 —— hover 展开、移开收回 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-7px) scale(.98);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1.1),
              visibility 0s linear .18s;
}
.ub-menu.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2, .8, .3, 1.1);
}
.userbox { position: relative; }
.ub-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border-radius: 9px; border: 0; background: none;
  color: var(--text); font-size: 13px; cursor: pointer; text-align: left;
  text-decoration: none;
}
.ub-item:hover { background: var(--bg-soft); }
.ub-item.danger { color: var(--err); }
.ub-sep { height: 1px; background: var(--border); margin: 4px 6px; }
/* 菜单项右侧未读小红点 */
.ub-dot {
  margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: #e5484d; flex: 0 0 auto;
}
.ub-dot[hidden] { display: none; }

/* 站内信列表 */
.notice-row {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 12px 10px; border: 0; border-bottom: 1px solid var(--border);
  background: none; cursor: pointer; text-align: left; font: inherit;
  color: var(--text);   /* button 默认字色是黑的，必须显式继承 */
  border-radius: 8px;
}
.notice-row:hover { background: var(--bg-soft); }
.notice-row .n-k {
  flex: 0 0 auto; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-mute);
}
.notice-row .chip-rv { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.notice-row .chip-act { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.notice-row.read { opacity: .68; }
.nr-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nr-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.notice-row.read .nr-title { font-weight: 500; }
.nr-body { font-size: 12.3px; color: var(--text-mute); line-height: 1.6; word-break: break-word; }
.nr-time { flex: 0 0 auto; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.nr-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-top: 6px; }

/* 审批状态 / 用户分类 chip */
.tier.t-priv { color: var(--text-mute); }
.tier.t-pending { color: #b45309; background: #fff7ed; border-color: #fed7aa; }
.tier.t-approved { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.tier.t-rejected { color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.tier.t-ucat { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* 源库：自定义源分区 */
.csrc-panel { margin-bottom: 14px; }
.csrc-upsell { margin-bottom: 14px; padding: 16px 18px; }
.cu-main { display: flex; gap: 13px; align-items: flex-start; }
.cu-ic {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 19px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cu-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cu-text b { font-size: 14px; }
.cu-text em { font-style: normal; font-size: 12.5px; line-height: 1.7; color: var(--text-mute); }
.cu-actions { display: flex; gap: 10px; margin-top: 12px; padding-left: 53px; }
.csrc-rows { display: flex; flex-direction: column; }
.csrc-row { padding: 11px 4px; border-bottom: 1px solid var(--border); }
.csrc-row:last-child { border-bottom: 0; }
.cr-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-meta { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-mute); margin-top: 5px; }
.cr-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cr-actions .danger { color: var(--err); }

/* ============================================================
   v0.11.1 · 给站长留言（个人中心）
   ============================================================ */
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form textarea.input {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
  font-size: 13.5px; line-height: 1.7; font-family: inherit; resize: vertical; outline: none;
}
.fb-form textarea.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.fb-row .input { flex: 1 1 160px; min-width: 140px; }
.fb-row button { flex: 0 0 auto; }
.fb-msg { font-size: 12.5px; color: var(--text-mute); min-height: 18px; }
.fb-msg.ok { color: var(--ok); }
.fb-msg.err { color: var(--err); }

/* ============================================================
   v0.12.1 · 站内信详情弹窗
   ============================================================ */
.notice-modal { max-width: 480px; }
.nm-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nm-meta .n-k { flex: 0 0 auto; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-mute); }
.nm-meta .chip-rv { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.nm-time { font-size: 12px; color: var(--text-mute); }
.nm-body {
  font-size: 13.5px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}

/* ============================================================
   v0.13 · 个人中心精简（GitHub 式列表行）+ 弹窗化 + 全局信封
   ============================================================ */
.acct-panel { padding: 0; overflow: hidden; }
.acct-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.acct-row:last-child { border-bottom: 0; }
.acct-row:hover { background: var(--bg-soft); }
.acct-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acct-main b { font-size: 13.5px; font-weight: 600; }
.acct-main .muted { font-size: 12.3px; }

.plan-head { gap: 14px; }
.plan-head #btn-plan-upgrade { margin-left: 12px; flex: 0 0 auto; }

.pricing-modal { max-width: 900px; width: calc(100vw - 40px); }
.pricing-modal .modal-body { max-height: 72vh; overflow: auto; }
.redeem-modal, .feedback-modal { max-width: 460px; }

.fab-mail {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text);
  font-size: 19px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(8, 10, 20, .35);
  display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab-mail:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8, 10, 20, .45); }
.fab-mail[hidden] { display: none; }

/* ============================================================
   v0.15 · 个人中心重做 / 源库滚动联动 / 源管理下线
   ============================================================ */

/* ---------- 源库：顶部工具条（搜索 + 新建源） ---------- */
.src-tools { display: flex; gap: 10px; align-items: center; }
.src-tools .input { flex: 1; min-width: 0; }
.src-add-btn { flex: 0 0 auto; white-space: nowrap; }
.src-add-btn.locked {
  color: var(--text-mute); border-style: dashed;
  background: var(--bg-soft); cursor: pointer;
}
.src-add-btn.locked:hover {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
}

/* ---------- 源库：滚动联动（吸顶标题 + 回到顶部） ---------- */
/* overflow: clip 不产生滚动容器，sticky 才能生效（hidden 会吞掉吸顶） */
.src-cat-panel { overflow: clip; }
.src-cat-head {
  position: sticky; top: 66px; z-index: 6;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(10px);
}
.src-cat-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--border);
}
.fab-top {
  position: fixed; right: 22px; bottom: 80px; z-index: 80;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text);
  font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(8, 10, 20, .35);
  display: grid; place-items: center;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.fab-top:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8, 10, 20, .45); color: var(--accent); }
.fab-top[hidden] { display: none; }

/* ---------- 个人中心 ---------- */
.me-wrap {
  max-width: 880px; margin: 0 auto;
  padding: 22px 4px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.me-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}
.me-profile-card {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.me-avatar-wrap { position: relative; flex: 0 0 auto; }
.me-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 30px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.me-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-avatar img[hidden] { display: none; }
.me-avatar-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  font-size: 12px; display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.me-id-main { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.me-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me-name-row b { font-size: 21px; font-weight: 750; letter-spacing: -.2px; }
.me-edit-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--accent); font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.me-edit-btn:hover { background: var(--accent-soft); }
.me-meta-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.8px; color: var(--text-soft);
}
.me-meta-k { color: var(--text-mute); font-size: 11.5px; }
.me-plan-box {
  margin-left: auto; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  padding-left: 18px; border-left: 1px solid var(--border);
}
.mpb-label { font-size: 11px; color: var(--text-mute); letter-spacing: .4px; }
.mpb-title { font-size: 16px; font-weight: 700; color: var(--accent); }
.mpb-sub { font-size: 11.8px; color: var(--text-soft); max-width: 300px; }
.me-plan-box .primary { margin-top: 4px; }

.me-sec-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.me-sec-head b { font-size: 15px; font-weight: 700; }
.me-sec-head .muted { font-size: 12px; }

.me-actions { padding: 0; overflow: hidden; }
.me-actions .acct-row { border-bottom: 1px solid var(--border); }
.me-actions .acct-row:last-child { border-bottom: 0; }

/* 个人中心小弹窗 */
.me-modal { max-width: 400px; }
@media (max-width: 720px) {
  .me-profile-card { align-items: flex-start; }
  .me-plan-box {
    margin-left: 0; text-align: left; border-left: none;
    padding-left: 0; width: 100%;
    align-items: flex-start;
  }
  .src-cat-head { top: 62px; }
}

/* ---------- 留言弹窗（v0.15 精简：自动带身份） ---------- */
.fb-hint { margin: 2px 0 0; font-size: 11.8px; color: var(--text-mute); }
.fb-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ============================================================
   v0.17 · 源库侧栏排行榜（紧凑版）+ 留言弹窗留白收敛
   ============================================================ */
/* ---------- v0.18：热门排行独立卡片 + 热度分 + 点击定位 ---------- */
.rank-side {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 8px 8px;
}
.rank-mini { display: flex; flex-direction: column; }
.rm-title {
  font-size: 11.5px; font-weight: 700; color: var(--text-soft);
  padding: 0 7px 7px; letter-spacing: .02em;
}
.rm-row {
  display: flex; align-items: center; gap: 7px;
  width: 100%; border: none; background: transparent; text-align: left;
  padding: 4.5px 7px; border-radius: 8px; font-size: 12px; cursor: pointer;
}
.rm-row:hover { background: var(--bg-soft); }
.rm-row:hover .rm-name { color: var(--accent); }
.rm-name {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text);
}
.rm-n { color: #e8531f; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; letter-spacing: -.3px; }
.rank-mini .rk-no { width: 18px; height: 18px; font-size: 10.5px; flex: 0 0 18px; }

/* 排行点击定位：源行短暂高亮 */
@keyframes locFlash {
  0% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  70% { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  100% { background: transparent; }
}
.loc-flash { animation: locFlash 2s ease forwards; }

/* 推送与通知：与常用操作一致的行式风格 */
.me-push { padding: 0; overflow: hidden; }
.me-push .acct-row { border-bottom: 1px solid var(--border); }
.me-push > .acct-row:last-child { border-bottom: 0; }
.acct-ops { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- v0.19 · 个人中心细化 ---------- */
/* 低调开关（桌面通知 / 邮箱通知） */
.switch {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg-soft);
  cursor: pointer; position: relative; padding: 0;
  transition: background .18s, border-color .18s;
}
.switch i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .18s ease;
}
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on i { left: 18px; }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* 说明行内的低调文字链 */
.mini-links {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  font-size: 11.5px;
}
.mini-link {
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--text-mute);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: color .13s, text-decoration-color .13s;
}
.mini-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.mini-dot { color: var(--border-strong); }

/* 邮箱地址展示 */
.me-email-addr { font-size: 12.5px; font-weight: 550; color: var(--text-soft); margin-left: 6px; }

/* 注销警告 */
.del-warn {
  margin: 0 0 8px; font-weight: 700; font-size: 13px;
  color: var(--err); background: var(--err-soft);
  border-radius: 8px; padding: 8px 12px;
}
.danger.solid {
  background: var(--err); color: #fff; border: 1px solid var(--err);
  border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.danger.solid:hover { filter: brightness(1.08); }

/* 下拉菜单：头（昵称 + 邮箱）与当前页高亮 */
.ub-head {
  padding: 9px 12px 7px; display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.ub-head b { font-size: 13.5px; font-weight: 650; }
.ub-mail {
  font-size: 11.5px; color: var(--text-mute);
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ub-item.current {
  background: var(--accent-soft); color: var(--accent);
  pointer-events: none; font-weight: 650;
}

/* 留言弹窗：收紧底部，空提示不再占位 */
.feedback-modal .modal-body { padding-bottom: 14px; gap: 9px; }
.feedback-modal .fb-msg:empty { display: none; margin: 0; }

/* 自定义源面板（纯展示） */
.csrc-empty { padding: 12px 6px 6px; }

/* ============================================================
   下载视图（v0.20）：桌面客户端安装包
   复用 hero-glow / panel / card / primary 的设计语言
   ============================================================ */
.dl-hero { padding-bottom: 12px; }
.dl-hero h1 {
  position: relative; z-index: 1;
  margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 30px); letter-spacing: .3px;
}
.dl-sub {
  position: relative; z-index: 1;
  margin: 0 auto; max-width: 620px;
  color: var(--text-soft); font-size: 14.5px; line-height: 1.9;
}

/* 下载卡片：卡片墙语言 + 平台主题色（--c 由 JS 传入） */
.dl-card { cursor: default; }
.dl-card-head { display: flex; align-items: center; gap: 13px; }
.dl-card-icon {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: 25px;
  background: color-mix(in srgb, var(--c) 14%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--c) 34%, var(--border));
}
.dl-card-name { font-size: 16px; font-weight: 700; }
.dl-card-meta { color: var(--text-mute); font-size: 12px; margin-top: 2px; }

.dl-facts { display: flex; flex-wrap: wrap; gap: 7px; }
.dl-facts .fact {
  font-size: 11.5px; color: var(--text-soft);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
  word-break: break-all;
}

.dl-steps {
  margin: 2px 0 4px; padding-left: 19px;
  color: var(--text-soft); font-size: 13px; line-height: 1.9;
}
.dl-steps b { color: var(--text); }
.dl-steps code {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 11.5px; color: var(--accent);
}

.dl-btn {
  display: flex; align-items: center; justify-content: center;
  height: 42px; border-radius: var(--radius-sm);
  text-decoration: none; font-size: 14px; font-weight: 650;
  transition: filter .15s, transform .06s;
}
.dl-btn:hover { filter: brightness(1.07); }
.dl-btn:active { transform: translateY(1px); }

.dl-sha {
  margin: 2px 0 0; color: var(--text-mute); font-size: 11px; line-height: 1.7;
  word-break: break-all; -webkit-user-select: text; user-select: text;
}
.dl-sha b {
  display: block; color: var(--text-soft); font-weight: 600;
  font-size: 10.5px; letter-spacing: .4px;
}

/* FAQ：panel 内的 details 折叠条 */
.dl-faq { padding: 6px 18px 14px; }
.dl-faq details {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 15px; margin-top: 10px;
}
.dl-faq details[open] { background: var(--bg-elev); }
.dl-faq summary { cursor: pointer; font-size: 13.5px; font-weight: 600; }
.dl-faq p {
  margin: 10px 0 2px; color: var(--text-soft); font-size: 13px; line-height: 1.85;
}
.dl-faq code {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 11.5px; color: var(--accent);
}

/* 备用格式（更小的 7z）链接 */
.dl-alt {
  display: block; margin-top: 8px; text-align: center;
  font-size: 11.5px; color: var(--text-mute); text-decoration: none;
  border-bottom: 1px dashed transparent; line-height: 1.6;
}
.dl-alt:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ============================================================
   v0.21 源消息列表 + 收藏打标
   ============================================================ */
.si-list { display: flex; flex-direction: column; padding: 4px 0 12px; }
.si-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.si-row:first-child { border-top: none; }
.si-row:hover { background: var(--bg-soft); }
.si-main { flex: 1; min-width: 0; }
.si-title {
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.si-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.si-sub {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 3px; font-size: 11.5px; color: var(--text-mute);
}
/* 弱化展示：这条消息什么时候推送来的 */
.si-push { color: var(--text-mute); opacity: .82; }
.si-sum {
  margin: 5px 0 0; font-size: 12px; color: var(--text-soft); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.si-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }

/* 打标按钮 + 浮层菜单 */
.tag-btn {
  flex: 0 0 auto; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  background: var(--bg-elev); transition: color .13s, border-color .13s;
}
.tag-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tag-btn.has { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-elev)); }
.tag-menu {
  position: fixed; z-index: 300; min-width: 160px; max-width: 230px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px;
}
.tm-title { font-size: 11px; color: var(--text-mute); padding: 2px 6px 6px; }
.tm-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; color: var(--text); text-align: left;
  background: none; border: none; border-radius: 7px; padding: 7px 8px; cursor: pointer;
}
.tm-row:hover { background: var(--bg-soft); }
.tm-row i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.tm-row.on { color: var(--accent); font-weight: 650; }
.tm-new { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
.tm-new .input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12.5px; }
.tm-hint { font-size: 11.5px; color: var(--text-mute); padding: 8px 6px 2px; border-top: 1px solid var(--border); margin-top: 6px; }

/* 个人中心 · 收藏 */
.fav-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px;
  background: var(--bg-soft); cursor: pointer;
}
.fav-chip i { width: 9px; height: 9px; border-radius: 50%; }
.fav-chip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-soft)); }
.fav-list { display: flex; flex-direction: column; }
.fav-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 2px; border-top: 1px solid var(--border);
}
.fav-row:first-child { border-top: none; }
.fav-x {
  flex: 0 0 auto; cursor: pointer; color: var(--text-mute); font-size: 12px;
  border-radius: 6px; padding: 2px 6px; margin-top: 2px;
}
.fav-x:hover { color: var(--err); background: var(--err-soft); }

/* ============================================================
   v0.21.2 红色未读 / 列表密度切换 / 单条消息详情页
   ============================================================ */
/* 未读 = 醒目红色 */
.notif.is-unread {
  border-color: color-mix(in srgb, var(--err) 38%, var(--border));
  background: color-mix(in srgb, var(--err) 4%, var(--bg-elev));
}
.notif.is-unread .n-dot {
  background: var(--err);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent);
}
.notif .n-unread-tag, .cds-main .n-unread-tag, .si-sub .n-unread-tag {
  color: #fff; background: var(--err); font-weight: 700;
}

/* 源消息列表：红点（未读）+ 已读灰化 */
.si-row .n-dot {
  flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--err); margin-top: 7px; align-self: flex-start;
}
.si-row.is-read .n-dot { visibility: hidden; }
.si-row { cursor: pointer; }
.si-row.is-read .si-title { color: var(--text-mute); font-weight: 550; }

/* 列表密度切换（紧凑 = 一行 3 个） */
.notif-list.dense, .si-list.dense {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding: 14px 18px 18px;
}
.notif-list.dense .notif { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 13px; min-width: 0; overflow: hidden; }
.notif-list.dense .notif .n-dot, .si-list.dense .si-row .n-dot { display: none; }
.notif-list.dense .n-arrow { display: none; }
.notif-list.dense .n-title { font-size: 13px; -webkit-line-clamp: 1; }
.notif-list.dense .n-meta { font-size: 11px; }
.si-list.dense .si-row {
  flex-direction: column; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  border-top: 1px solid var(--border); padding: 12px 13px; min-width: 0; overflow: hidden;
}
.si-list.dense .si-row .tag-btn { align-self: flex-start; }
@media (max-width: 980px) {
  .notif-list.dense, .si-list.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .notif-list.dense, .si-list.dense { grid-template-columns: minmax(0, 1fr); }
}

/* 单条消息详情页 */
.item-body { padding: 18px 22px 22px; border-top: 1px solid var(--border); }
.item-body h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-mute); letter-spacing: .05em; }
.item-summary {
  margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--text);
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px 16px;
}
.item-tags { margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap; }
.item-go { text-decoration: none; }

/* ============================================================
   v0.21.3 源列表卡片重设计（稀松=横排 / 紧凑=一行 3 个竖卡）
   ============================================================ */
.src-list { display: flex; flex-direction: column; gap: 9px; padding: 14px 18px 18px; }
.srcard {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.srcard:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.srcard.has-unread {
  border-color: color-mix(in srgb, var(--err) 42%, var(--border));
  background: color-mix(in srgb, var(--err) 3%, var(--bg-elev));
}
/* v0.22 头像与标题同行：.sc-head 横排行（头像+名字），副信息单独一行 */
.sc-head { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; }
.sc-avatar {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  background: var(--bg-soft); border: 1px solid var(--border);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--text-soft);
}
.srcard.has-unread .sc-avatar {
  background: color-mix(in srgb, var(--err) 10%, var(--bg-soft));
  color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, var(--border));
}
.sc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-name {
  font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 6px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-name .tier { font-style: normal; flex: 0 0 auto; }
.sc-sub {
  font-size: 11.5px; color: var(--text-mute);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-go { flex: 0 0 auto; font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.srcard:hover .sc-go { color: var(--accent); }
/* 手动排序：稀松=与「查看消息」同行的一对 ↑↓；紧凑=右下角 */
.sc-sort { display: flex; gap: 4px; flex: 0 0 auto; opacity: .5; transition: opacity .15s; }
.srcard:hover .sc-sort { opacity: 1; }
.ss-btn {
  width: 21px; height: 19px; display: grid; place-items: center;
  font-size: 11px; line-height: 1; user-select: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elev); color: var(--text-soft);
}
.ss-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.ss-btn.dis { opacity: .3; pointer-events: none; }
.sc-unread {
  position: absolute; top: -8px; right: -6px; z-index: 1;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  background: var(--err); color: #fff; font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--err) 38%, transparent);
  font-variant-numeric: tabular-nums;
}
/* 紧凑：一行 3 个竖卡片，未读数挂在右上角 */
.src-list.dense { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 20px; }
.src-list.dense .srcard { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 14px 26px; min-width: 0; overflow: visible; }
.src-list.dense .sc-head { gap: 9px; }
.src-list.dense .sc-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.src-list.dense .sc-name { font-size: 13px; white-space: nowrap; overflow: hidden; }
.src-list.dense .sc-sub { white-space: normal; flex-wrap: wrap; }
.src-list.dense .sc-go { font-size: 11.5px; }
.src-list.dense .sc-sort { position: absolute; right: 10px; bottom: 7px; }
.src-list.dense .sc-unread { top: -8px; right: -5px; }
@media (max-width: 980px) { .src-list.dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .src-list.dense { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   v0.23 卡片表单精简：图标/配色下拉 + 已选源开关 + 二级筛选器
   ============================================================ */
.trio-row { display: flex; gap: 12px; align-items: flex-end; }
.trio-row .icon-field, .trio-row .color-field { flex: 0 0 64px; }
.trio-row .grow { flex: 1; }

.pick-wrap { position: relative; }
.pick-trigger {
  width: 52px; height: 38px; border-radius: 9px; cursor: pointer; padding: 0;
  border: 1px solid var(--border-strong); background: var(--bg-soft);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
}
.pick-trigger:hover { border-color: var(--accent); }
.sw-trigger::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.pick-drop {
  position: absolute; z-index: 95; top: calc(100% + 6px); left: 0;
  min-width: 236px; padding: 10px;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
.pick-drop .icon-input { margin-bottom: 8px; }
.pick-drop .icon-grid { max-height: 208px; overflow-y: auto; }
#color-drop { min-width: 212px; }
.custom-color { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.custom-color input[type="color"] {
  width: 36px; height: 32px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-soft);
}
.cc-hint { margin: 8px 0 0; font-size: 11.5px; }

.src-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--text-mute); }
.picked-list { display: flex; flex-direction: column; gap: 7px; max-height: 240px; overflow-y: auto; }
.pl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft);
}
.pl-ic { flex: 0 0 auto; font-size: 16px; }
.pl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ds { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-ds .dm { font-style: normal; margin-left: 6px; }
.pl-mode { flex: 0 0 auto; font-size: 11.5px; white-space: nowrap; }
.pl-mode.sys { color: var(--accent); font-weight: 600; }
.pl-mode.inbox { color: var(--text-mute); }
.pl-x {
  flex: 0 0 auto; border: none; background: transparent; color: var(--text-mute);
  cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius: 6px;
}
.pl-x:hover { color: var(--err); background: var(--bg-elev); }

.picker-modal .picker { max-height: 46vh; }
#picker-modal { z-index: 120; }   /* 二级筛选器盖在卡片弹窗（z-index 90）之上 */

/* v0.23.1 卡片详情页：逐源推送开关（与表单已选源列表同款） */
.cds-push { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* v0.23.2 网页版系统推送一次性提示 */
.spwarn-modal { max-width: 470px; }
.spwarn-modal .modal-body p { font-size: 13px; line-height: 1.7; color: var(--text-soft); }
.spwarn-modal a { color: var(--accent); font-weight: 600; text-decoration: none; }
.spwarn-modal a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   v0.24 消息卡打标钮右上角 / 未读红点 / 详情页拖拽排序 / 密度图标
   ============================================================ */
/* ⑥ 打标按钮悬浮卡片右上角，不占文字区 */
.si-row { position: relative; }
.si-row .tag-btn { position: absolute; top: 10px; right: 12px; margin: 0; }
.si-row .si-main { padding-right: 52px; }
.si-list.dense .si-row .tag-btn { align-self: auto; position: absolute; top: 10px; right: 12px; }
/* 未读红点：稀松=行首；紧凑（原被隐藏）改为卡片左上角悬浮 */
.si-list.dense .si-row .n-dot {
  display: block; position: absolute; top: 13px; left: 12px; margin: 0;
}
.si-list.dense .si-row .si-main { padding-left: 16px; }

/* ⑦ 消息详情页打标按钮：尺寸对齐返回链接，不再挤压变形 */
.news-foot { align-items: center; }
.news-foot .tag-btn {
  font-size: 12.5px; padding: 6px 14px; border-radius: 999px; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 5px; align-self: center;
}

/* ⑤ 详情页拖拽排序把手 */
.drag-grip {
  flex: 0 0 auto; cursor: grab; color: var(--text-mute);
  font-size: 15px; line-height: 1; padding: 2px 1px; user-select: none;
}
.drag-grip:active { cursor: grabbing; }
.drag-grip:hover { color: var(--accent); }
.cd-src.dragging { opacity: .4; }

/* ④ 密度切换按钮：图标化（☰ 稀松 / ▦ 紧凑） */
.btn-density { min-width: 34px; text-align: center; font-size: 14px; }