/* ============ 基础变量与主�? ============ */
/* 关键修复：强�? [hidden] 属性在所有浏览器（含手机）生效，
   否则 .modal-mask �? display:flex 会盖�? hidden，导致弹窗关不掉 */
[hidden] { display: none !important; }

:root {
  /* 品牌蓝 #2563eb：与 logo 图标同色（品牌色=界面主色），白字对比 5.2:1 过 WCAG AA；
     深色模式单独覆写为更亮的 #3b82f6（暗底上对比更优，见下方 dark 块） */
  --primary: #2563eb;
  --primary-2: #60a5fa;
  --bg: #f4f5fb;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #dbeafe 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 10%, #e6f0ff 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --text: #1b1d29;
  --text-soft: #6b7080;
  --text-muted: #9aa3b2;
  --border: #e8eaf2;
  --shadow: 0 6px 22px rgba(40, 44, 80, .08);
  --shadow-hover: 0 12px 30px rgba(37, 99, 235, .18);
  --radius: 16px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-sm: 11px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  /* v2 辅助色三�? + 中性强调：让主色成为「色彩系统的一员」而非唯一强调�? */
  --accent-amber: #f59e0b;    /* 强调橙：大日期数�? / 节日倒计�? / 热搜 Top3 */
  --accent-sky: #0ea5e9;      /* 静谧蓝：天气温度 / URL 直达 */
  --accent-red: #ef4444;      /* 温暖红：热搜图标 / 危险�? */
  --accent-emerald: #10b981;  /* 翡翠青：笔记 / 完成�? */
  --accent-mist: #c7d2fe;     /* 薄雾蓝：弱强调，与电光蓝同色�? */
  /* 数字专用等宽字体：让日期 / 温度这类「数据」有仪表盘质感，且数字等宽不跳动 */
  --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  /* 深色下主色提亮一档（暗底对比：#3b82f6≈4.6:1 优于 #2563eb≈3.3:1），保持原有深色观感 */
  --primary: #3b82f6;
  --primary-2: #60a5fa;
  --bg: #0e1016;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, #13284a 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 10%, #142033 0%, transparent 55%);
  --surface: #1a1d27;
  --surface-2: #16192240;
  --text: #eef0f6;
  --text-soft: #9aa0b4;
  --text-muted: #777e90;
  --border: #2a2e3a;
  --shadow: 0 6px 22px rgba(0, 0, 0, .35);
  --shadow-hover: 0 12px 30px rgba(59, 130, 246, .35);
  /* 深色模式辅助色提亮，保证暗底对比�? */
  --accent-amber: #fbbf24;
  --accent-sky: #38bdf8;
  --accent-red: #f87171;
  --accent-emerald: #34d399;
  --accent-mist: #3f4a6b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ============ 顶部�? ============ */
.topbar {
  /* 随页面一起滚动（不再 fixed）：顶部与网址区是一体的，滚动时整页一起走，
     可视内容区更大，也避免 fixed 顶栏遮挡子页面（天气/日历/热搜）内容。 */
  position: relative;
  z-index: 100;
  /* banner 底色用页面灰底 --bg（而非卡片白 --surface），与下方网址块形成明确区分 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.topbar-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* 品牌区两行制（hao123 顶部条实测结构：logo 居左跨两行，右上操作钮、右下功能速览，左下日期天气） */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 9px 16px 10px;
}
.brand-tagline {
  grid-area: 1 / 2 / 2 / 3;
  margin: 0; font-size: 13px; line-height: 1.4; letter-spacing: .2px;
  color: var(--text-soft); white-space: nowrap; user-select: none;
}
.brand-tagline .bt-accent { color: var(--text); font-weight: 700; }
/* 品牌状态条：slogan 空位（顶部第一行中列），承接「多端在线」——已登录显示同步状态；免登录宗旨，未登录仅作中性品牌说明，不引导注册 */
.brand-status {
  grid-area: 2 / 2 / 3 / 3;
  display: flex; align-items: center; gap: 8px; min-width: 0;
  min-height: 20px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-soft);
  white-space: nowrap; overflow: hidden;
}
/* 轮播提示：未登录态定时渐显飞出（位移+透明），尊重 prefers-reduced-motion */
.brand-status .bs-tip { color: var(--text-soft); display: inline-block; }
.bs-tip.bs-tip-enter { animation: bsTipEnter .45s ease both; }
.bs-tip.bs-tip-leave { animation: bsTipLeave .26s ease both; }
@keyframes bsTipEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bsTipLeave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .bs-tip.bs-tip-enter, .bs-tip.bs-tip-leave { animation: none; }
}
.bs-avatar {
  width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
  transition: filter .14s;
}
.bs-avatar:hover { filter: brightness(1.05); }
.bs-avatar:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }
.bs-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.bs-name { color: var(--text); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.bs-time { color: var(--text-soft); }
.bs-time::before { content: '·'; margin: 0 7px; color: var(--border); opacity: .75; }

/* 第二行：左天气、右功能速览，横跨 tagline 列与操作钮列 */
.topbar-sub {
  grid-area: 2 / 3 / 3 / 4;
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.topbar-inner > .home-date-weather.topbar-dw {
  grid-area: 1 / 2 / 2 / 3;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  min-height: 20px;
  justify-content: flex-start;
  text-align: left;
}
/* 顶栏内日期/天气链接去掉 pill 反显，避免左内边距影响对齐 */
.topbar-inner > .home-date-weather.topbar-dw .hdw-link {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
.topbar-inner > .home-date-weather.topbar-dw .hdw-link:hover {
  color: var(--primary);
}
/* 功能速览：藏在「更多」菜单里的高频动作提为顶部文字链；比操作钮弱一级（500/无图标） */
.top-quick-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tql-link {
  border: none; background: transparent; color: var(--text-soft);
  font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.5;
  padding: 3px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap;
  transition: color .14s, background .14s;
}
.tql-link:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.tql-link:active { transform: scale(.97); }
.tql-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; }
/* 平板档：第二行收起（天气+功能链让位），保留 logo + tagline + 操作钮单行 */
@media (min-width: 721px) and (max-width: 991px) { .topbar-sub { display: none; } }
/* PC 搜索独立一�? */
/* search module: domain switch above-left, fused with the search box below
   B2：与顶栏/分类导航统一 1200px 对齐线（原 800px 造成三段宽度不一） */
.topbar-search {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  /* slogan 行已并入 logo 区（brand-tagline），搜索框上方只留 4px 呼吸 */
  padding: 4px 16px 10px;
}
/* 历史规则：slogan 行 DOM 已删（并入 .brand-tagline），下列规则保留以兼容旧缓存页面 */
.home-hero { text-align: center; padding: 2px 16px 8px; animation: heroIn .5s ease-out; }
.home-hero-title { display: none; }
.home-hero-sub { margin: 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--text-soft) 78%, var(--text)); letter-spacing: .2px; text-wrap: balance; }
.home-hero-sub .hh-accent { font-weight: 700; }
/* 首页门面条：日期 + 天气（借鉴笔点 bidianer，挂在搜索框下强化门户氛围） */
.home-date-weather {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-soft);
}
/* 日期天气：品牌区第二行左侧信息位（hao123 同款左下位），靠左排列 */
.home-date-weather.topbar-dw {
  margin-top: 0; justify-content: flex-start;
  font-size: 13px; color: var(--text-soft); cursor: default;
}
.topbar-inner .home-date-weather.topbar-dw .hdw-date,
.topbar-inner .home-date-weather.topbar-dw .hdw-weather { white-space: nowrap; }
.hdw-date { font-weight: 600; color: var(--text); }
.hdw-sep { opacity: .5; }
.hdw-weather { display: inline-flex; align-items: center; gap: 4px; }
.hdw-wx-ic { font-size: 14px; line-height: 1; }
.hdw-loading { opacity: .7; }
.hdw-set {
  border: 1px dashed var(--border); background: transparent; color: var(--text-soft);
  padding: 3px 11px; border-radius: 999px; font-size: 12px; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.hdw-set:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
@media (max-width: 640px) { .home-date-weather { font-size: 12px; margin-top: 10px; } }
/* 顶栏内日期天气：窄屏隐藏，避免与 logo / 操作按钮争夺横向空间（与移动端 top-actions 规则对齐） */
@media (max-width: 720px) { .home-date-weather.topbar-dw { display: none; } .brand-status { display: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-hero { animation: none; } }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none; grid-area: 1 / 1 / 3 / 2; align-self: center; border-radius: 10px; transition: filter .15s ease, transform .1s ease; }
.brand:hover { filter: brightness(1.07); }
/* 键盘可达底线：Tab 聚焦必须有可见焦点环（WCAG 2.4.7） */
.brand:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 3px; }
.brand:active { transform: scale(.98); }
/* 统一内联 SVG 图标（stroke 风格，替代系统 emoji：跨平台渲染一致、无色差豆腐块） */
.svg-ic { width: 15px; height: 15px; flex-shrink: 0; display: block; }
/* 主题双图标（moon/sun）按 [data-theme] 显隐 */
.ic-sun { display: none; }
[data-theme="dark"] .ic-sun { display: block; }
[data-theme="dark"] .ic-moon { display: none; }
/* PC 主体 logo：一体锁版 SVG（左图标 + 右上 deskzx 字标 / 右下「桌面在线」），
   60px 高（两行制下整体放大，单张图保证三个元素永远对齐）；深色切浅字版 */
.brand-lockup { display: block; height: 55px; width: auto; }
.brand-lockup.logo-dark { display: none; }
[data-theme="dark"] .brand-lockup.logo-light { display: none; }
[data-theme="dark"] .brand-lockup.logo-dark { display: block; }
/* 一体横版锁版 PC 不再使用（让给两行锁版），保留给移动端 26px 小图；
   深色切换规则放在移动端媒体查询内，避免 PC 深色误显示旧横版 */
.brand-logo-img { display: none; height: 52px; width: auto; }
/* 移动端默认隐藏锁版，仅显示图标 */
.brand-icon-img { display: none; height: 26px; width: 26px; }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: transparent; color: var(--text-soft);
  font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 9px;
  cursor: pointer; transition: color .15s, background .15s; white-space: nowrap;
}
.top-nav-btn:hover { color: var(--text); background: var(--surface-2); }
.top-nav-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.top-nav-btn.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
/* 顶部「我的」角标（收藏网址数）—�? 右上角角�? */
.top-my { position: relative; }
.nav-badge {
  position: absolute;
  top: -7px; right: -9px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--primary); color: #fff;
  border: 2px solid var(--surface);
  font-size: 11px; font-weight: 700; line-height: 1;
  pointer-events: none;
}

/* 搜索 */
.search-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  /* 搜索框是输入容器不是按钮：全圆胶囊在宽屏上偏玩具感；
     12px 与站内卡片（8px）形成「略圆一点」的层级，不再各说各话 */
  border-radius: 12px;
  padding: 8px 8px 8px 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .06);
  min-width: 260px;
  max-width: 800px;
  margin: 0 auto;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.search-box:hover {
  box-shadow: 0 18px 46px rgba(15, 23, 42, .12), 0 6px 14px rgba(15, 23, 42, .07);
  transform: translateY(-1px);
}
.search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
              0 16px 44px rgba(15, 23, 42, .12);
}
/* 站内/站外切换 */
.search-scope {
  display: flex; align-items: center; flex-shrink: 0;
  height: 40px;
  background: var(--surface-2); border-radius: 10px; padding: 3px;
}
.scope-btn {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 8px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; height: 100%;
}
.scope-btn { box-shadow: 0 1px 3px transparent; }
.scope-btn.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}
/* 原「站外」按钮位置 → 搜索大类下拉（常用/搜索/社区/图片/站长/生活/网盘） */
.cat-wrap { position: relative; display: inline-flex; align-items: center; }
.cat-trigger {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; padding: 0 11px; border-radius: 8px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; height: 100%;
}
.cat-trigger:hover { color: var(--text); }
.cat-trigger.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}
/* 展开态保持选中色（蓝底白字）——「当前生效」的语义不因菜单开合而丢，开合反馈交给箭头旋转 */
.cat-trigger.open {
  background: var(--primary); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 32%, transparent);
}
/* 下拉箭头：CSS 绘制（替代 Unicode ⌄ —— 跨平台渲染一致、线宽统一，可随开合旋转反馈）
   几何补偿：V 形笔画视觉中心比盒子中心低 k≈1.9px（5.5px 盒子），
   收起(朝下)需上移 -k，展开(朝上)视觉中心反转为偏上 +k 需下移 —— 两态各自补偿才能都贴文字中线 */
.my-cat-trigger { display: inline-flex; align-items: center; }
.cat-trigger::after, .my-cat-trigger::after {
  content: ''; flex-shrink: 0;
  width: 5.5px; height: 5.5px; margin-left: 5px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-1.9px) rotate(45deg);
  opacity: .72; transition: transform .2s ease, opacity .2s;
}
.cat-trigger:hover::after, .my-cat-trigger:hover::after { opacity: .95; }
/* 蓝底选中态：白字白箭头需实色（当前色已是 #fff，虚线感来自 opacity，故提至 1） */
.cat-trigger.active::after, .cat-trigger.open::after,
.my-cat-trigger.active::after, .my-cat-trigger.open::after { opacity: 1; }
.cat-trigger.open::after, .my-cat-trigger.open::after { transform: translateY(1.9px) rotate(225deg); }
.cat-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 140;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 6px; box-shadow: var(--shadow-hover); min-width: 156px;
  max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.cat-dropdown::-webkit-scrollbar { width: 6px; }
.cat-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ===== 方案A：搜索大类「双列联动面板」 =====
   左列 7 个大类（含站点数）｜右列实时预览该大类站点网格；
   悬停/聚焦仅预览不提交，点击大类提交并保开，点击站点即选即收。 */
.cat-dropdown.cat-dual { min-width: 472px; padding: 8px; }
.cp-wrap { display: flex; align-items: stretch; gap: 8px; }
.cp-cats {
  flex: 0 0 128px; display: flex; flex-direction: column; gap: 1px;
  padding-right: 8px; border-right: 1px solid var(--border);
}
.cp-cat {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: transparent; color: var(--text);
  padding: 7px 9px; border-radius: 8px; font-size: 13px; cursor: pointer; text-align: left;
  transition: background .12s;
}
.cp-cat:hover { background: var(--surface-2); }
/* 预览是「状态」而非指针反馈：右列正展示该大类站点，需一眼可辨——
   用主色 7% 淡底；与 active 同行为初始态，active 规则在后胜出（10% 深底+蓝字） */
.cp-cat.preview { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.cp-cat.active { color: var(--primary); font-weight: 700; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cp-cat .eng-ic-cat { font-size: 15px; line-height: 1; width: 19px; text-align: center; flex-shrink: 0; }
.cp-cat .eng-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-cat .eng-cat-n { font-size: 11px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cp-cat.active .eng-cat-n { color: var(--primary); opacity: .82; }
.cp-sites { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-sites-head {
  display: flex; align-items: baseline; gap: 7px; padding: 3px 10px 8px;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.cp-sites-head .cp-head-n { font-size: 11px; font-weight: 600; color: var(--text-soft); }
.cp-sites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; align-content: start; }
.cp-site {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: none; background: transparent; color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; text-align: left;
  transition: background .12s;
}
.cp-site:hover { background: var(--surface-2); }
.cp-site.active { color: var(--primary); font-weight: 700; background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cp-site > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-site .eng-ic { font-size: 11px; min-width: 18px; height: 18px; flex-shrink: 0; }
.cp-site .eng-ic-img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
/* 移动端降级：单列——大类横排可滑 + 站点两列网格 */
@media (max-width: 720px) {
  .cat-dropdown.cat-dual { min-width: 0; width: min(92vw, 400px); }
  .cp-wrap { flex-direction: column; gap: 6px; }
  .cp-cats {
    flex: none; flex-direction: row; overflow-x: auto; gap: 4px;
    padding: 0 0 6px; border-right: none; border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .cp-cats::-webkit-scrollbar { display: none; }
  .cp-cat { width: auto; white-space: nowrap; padding: 6px 10px; }
  .cp-cat .eng-cat-n { display: none; }
  .cp-sites-grid { grid-template-columns: repeat(2, 1fr); }
}
.search-icon { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 18px; color: var(--text-soft); opacity: .72; margin-left: 2px; }
.search-icon .svg-ic { width: 18px; height: 18px; }
.search-input {
  flex: 1; border: none; background: transparent; color: var(--text);
  font-size: 16px; padding: 13px 6px 13px 10px; outline: none; min-width: 0; cursor: text;
}
.search-input::placeholder { color: var(--text-soft); opacity: .85; }
/* 搜索引擎触发器（站外模式显示）—— ghost 化：不是「按钮」而是「可点的前置条件」，
   全框只有一个实色块（搜索按钮）；与左侧 cat-trigger 同一套语言 */
.engine-trigger {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 6px 0 8px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: background .15s, box-shadow .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
/* 下拉小箭头，提示“可切换引擎�? */
.engine-trigger::after {
  content: "";
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--text-soft);
  transition: transform .15s, border-top-color .15s;
}
.engine-trigger:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.engine-trigger:hover::after { border-top-color: var(--primary); }
.engine-trigger:active { transform: translateY(1px); }
/* 展开状态：同 hover 的淡主色底，不再描边（ghost 语言保持一致） */
.engine-trigger.open {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.engine-trigger.open::after { transform: rotate(180deg); border-top-color: var(--primary); }
.engine-trigger[hidden] { display: none; }
/* 引擎名：让「用哪个引擎搜」一眼可见，而不是一个看不懂的色块 */
.engine-trigger .eng-name {
  font-size: 12.5px; font-weight: 600; color: var(--text-soft); line-height: 1;
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.engine-trigger:hover .eng-name, .engine-trigger.open .eng-name { color: var(--primary); }
/* 触发按钮 + 下拉框的定位容器：下拉框以其为锚点（right:0 对齐按钮右缘�? */
.engine-wrap { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; }
/* 分组竖线：把「换引擎（前置条件）」与「搜索（主动作）」视觉分组，取代裸间隙 */
.engine-wrap::after {
  content: ''; width: 1px; height: 22px; flex-shrink: 0; align-self: center;
  margin-left: 8px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
}
/* 站内模式引擎钮隐藏时，连容器带分隔线一起收掉（否则残留一条孤线） */
.engine-wrap:has(> .engine-trigger[hidden]) { display: none; }
/* 自定义搜索引擎下�? */
.engine-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; margin-top: 2px; z-index: 130;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 6px; box-shadow: var(--shadow-hover); min-width: 168px;
  /* 7 个大类，列表不长；仍保留滚动上限，避免小屏撑破视口 */
  max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.engine-dropdown::-webkit-scrollbar { width: 6px; }
.engine-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.engine-dropdown .eng-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: transparent; color: var(--text);
  padding: 9px 12px; border-radius: 9px; font-size: 14px; cursor: pointer; text-align: left;
  transition: background .12s;
}
.engine-dropdown .eng-item:hover { background: var(--surface-2); }
.engine-dropdown .eng-item.active { color: var(--primary); font-weight: 600; }
.engine-dropdown .eng-item .eng-ic { font-size: 11.5px; }
.engine-dropdown .eng-item .eng-ic-img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
/* 大类项：emoji 图标 + 名称 + 右侧站点数 */
.engine-dropdown .eng-item .eng-ic-cat,
.engine-trigger .eng-ic-cat { font-size: 17px; line-height: 1; width: 22px; text-align: center; flex-shrink: 0; }
.engine-dropdown .eng-item .eng-cat-n {
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.engine-dropdown .eng-item.eng-back {
  color: var(--text-soft); font-size: 13px; font-weight: 600;
  margin-bottom: 2px; border-bottom: 1px solid var(--border); border-radius: 9px 9px 0 0;
}
.engine-trigger .eng-ic-img { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; display: block; }
.search-btn {
  border: none; cursor: pointer; color: #fff; font-weight: 700; font-size: 15px;
  padding: 0 24px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  transition: transform .15s, opacity .15s;
}
.search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 36%, transparent); }

/* 搜索站点磁吸条（参考 openi.cn 的两级结构）：
   顶部下拉选「大类」，这里横向平铺该大类的具体站点；随固定顶栏常驻，
   站点多时横向滚动而非换行，避免把搜索区撑高、破坏布局 */
.search-tabs {
  display: flex; align-items: center; gap: 4px;
  max-width: 800px; margin: 0 auto;
  /* 上方 8px 内边距是留给「选中箭头」的：overflow-x 的裁剪边界是 padding box，
     箭头画在 padding 内才不会被滚动容器裁掉；margin 归零让箭头紧贴搜索框下边线 */
  padding: 8px 0 2px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tabs[hidden] { display: none; }
/* 大类小标签：点击唤起大类下拉 */
.st-kind-chip {
  flex-shrink: 0; border: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 800; color: var(--text-soft);
  padding: 3px 9px; margin-right: 4px; border-radius: 999px;
  background: var(--surface-2); transition: color .15s, background .15s;
}
.st-kind-chip:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.st-tab {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--text-soft); font-size: 13px; font-weight: 500;
  padding: 5px 9px; border-radius: 8px;
  transition: color .15s, background .15s, transform .1s;
}
.st-tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.st-tab:active { transform: scale(.97); }
.st-tab .eng-ic-img { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
/* 选中站点：主色文字 + 浅底，上方一个箭头指向搜索框下边线（参考 openi.cn） */
.st-tab.active {
  color: var(--primary); font-weight: 700;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  position: relative;
}
.st-tab.active::before {
  content: ""; position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 6px solid var(--primary);
}
/* 我的首页：宽度与搜索框一致（920px 居中），磁吸条与搜索框左缘对齐，且箭头贴边 */
.my-search-tabs { max-width: 920px; margin: 0 auto; justify-content: flex-start; }
/* B2：磁吸条内嵌搜索下拉面板 —— 面板内不再需要外部间距/居中/等宽约束 */
.search-drop .sd-block-tabs { padding: 2px 2px 8px; margin-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.search-drop .search-tabs { max-width: none; margin: 0; padding: 6px 0 0; }
.search-btn:active { transform: translateY(0); }

/* domain switch: refined glassmorphic segmented control above-left of the search box
   - track: frosted glass matching the topbar; subtle inner highlight for depth
   - active: gradient fill with dual shadow (outer glow + inner top highlight)
   - micro-interactions: hover background, press scale, icon opacity transition */
.domain-switch {
  position: static; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.45);
}
.domain-seg {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.domain-seg .seg-ic {
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .85; transition: opacity .2s ease, transform .2s ease;
}
.domain-seg:hover { color: var(--text); }
.domain-seg:hover .seg-ic { opacity: 1; }
.domain-seg:active { transform: scale(.97); }
.domain-seg.active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:
    0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.domain-seg.active .seg-ic { opacity: 1; }
.domain-seg.active:hover { background: linear-gradient(135deg, var(--primary), var(--primary-2)); }

/* 搜索区顶行（原内容域开关 + 快捷入口）已移除：开关并入「为您推荐」按钮，快捷入口并入副标题行 */
.top-quick-add {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 6px 13px; border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary);
  font-size: 12.5px; font-weight: 800; cursor: pointer; line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, box-shadow .15s, transform .12s;
}
.top-quick-add:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 20%, transparent); transform: translateY(-1px); }
.top-quick-add:active { transform: scale(.96); }

/* 操作按钮 */
.top-actions { display: flex; gap: 6px; flex-wrap: wrap; grid-area: 1 / 3 / 2 / 4; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 5px 9px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.icon-btn .svg-ic { width: 14px; height: 14px; }
.icon-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.icon-btn.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

/* 更多菜单（自定义卡片式，不再原生堆叠�? */
.more-menu {
  position: absolute; top: 56px; right: 16px; z-index: 130;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  min-width: 172px;
  animation: menuIn .16s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.more-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  border: none; background: transparent; color: var(--text);
  text-align: left; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.more-menu .menu-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

/* ============ 分类导航 ============ */
.cat-nav {
  /* 分类条吸顶：顶栏随页面滚走后，这条 ~45px 高的分类导航常驻在视口顶部，
     既能随时切分类，又不会像原来那样占掉 310px 的可视高度。 */
  position: sticky; top: 0; z-index: 99;
  margin: 16px auto 0; padding: 4px 14px;
  max-width: 1200px;
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  flex-wrap: nowrap;
  /* 横滑手势：允许横向，交给浏览器原生滚动（不再强制 GPU 层，避免 fixed+合成层死锁） */
  touch-action: pan-x; -ms-touch-action: pan-x;
  /* 边缘滚动链：横滑到底不冒泡给页面，避免“卡住”的错觉 */
  overscroll-behavior-x: contain;
  /* 防止子元素拖拽手势拦截横�? */
  user-select: none; -webkit-user-select: none;
  /* 不透明背景：固定导航条盖住下方内容，避免点�?/滑动穿透到内容�? */
  /* �? topbar 同一层毛玻璃，视觉上不形成独立的背景条：透明�? + 模糊 + 细描�? */
  /* banner 第二行与 topbar 同为灰底毛玻璃，形成一条完整 banner（不再透明到露出卡片） */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  /* 极淡下边界：吸顶时把条与下方内容分开（完全取消会让白卡片“黏”在条下沿） */
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.cat-nav::-webkit-scrollbar { display: none; }
/* 右缘渐隐：横向还有内容时提示“可以继续滑”，滚到最右自动淡出 */
.cat-nav-fade {
  position: sticky; right: 0; flex: 0 0 auto;
  width: 44px; margin-left: -44px; align-self: stretch;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 92%, transparent));
  pointer-events: none; transition: opacity .2s;
}
.cat-nav:not(.has-overflow) .cat-nav-fade,
.cat-nav.at-end .cat-nav-fade { opacity: 0; }
/* 维度固定区：为您推荐/最新/热门 + 内容域总开关（热门网站/热门AI）整体吸在导航条左端，
   分类横滑时不被带走，始终可见 */
.cat-fixed {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  position: sticky; left: 0; z-index: 2;
  padding-right: 6px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
/* 主视图入口标签：仅移动端在导航条显示（桌面端用顶部按钮），避免重�? */
@media (min-width: 641px) { .cat-nav .nav-view-tab { display: none; } }
.cat-tab {
  /* 平时是纯文字：十几个胶囊并排时，每个都描边会让整条噪音很重。
     边框/底色仅在 hover 时浮出，扫描更快，重心留给「当前在哪个分类」 */
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  border-radius: 999px; padding: 7px 15px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .3px;
  cursor: pointer; white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .12s;
  display: flex; align-items: center; gap: 5px;
  flex: 0 0 auto;
  position: relative;
}
/* 名字宽度按 600 字重撑开：选中/取消选中切换字重时 tab 宽度不变（整排不再平移） */
.cat-tab-txt { display: inline-block; }
.cat-tab-txt::after {
  content: attr(data-txt); display: block; font-weight: 600;
  height: 0; visibility: hidden; overflow: hidden; pointer-events: none;
}
/* 指向时才浮出淡胶囊：保留「可点」的暗示，又不让整条变成一排按钮 */
.cat-tab:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 18%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.cat-tab:active { transform: scale(.97); }
/* 选中态：底色与边框保持原样，只换字色 + 胶囊下方一条 2px 主色短线。
   之前改底又改边又改字重，切换时整条重心在跳；现在只有颜色在变 */
.cat-tab.active {
  color: var(--primary);
  font-weight: 600;
  box-shadow: none;
}
.cat-tab.active::after {
  content: ''; position: absolute; left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: calc(100% - 24px); height: 2px;
  background: var(--primary); border-radius: 2px;
  pointer-events: none;
}
/* 一级（全部）入口：用主色字 + 700 与二级分类区分层级（不再靠描边） */
.cat-tab-all { color: var(--primary); font-weight: 700; }
.cat-tab-all:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cat-tab-all.active { color: var(--primary); font-weight: 600; box-shadow: none; }

/* ---- 首页发现流入口（为您推荐 / 最�? / 热门）：与分�? tab 同形态，用主色描边强调是「维度」而非分类 ---- */
.feed-tab { color: var(--text); }
.feed-tab:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.feed-tab.active { color: var(--primary); font-weight: 600; box-shadow: none; }
/* keep gradient + white text when an active feed tab is hovered (avoid white-on-near-white) */
.feed-tab.active:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
/* 发现流与分类 tab 之间一道细分隔，视觉上区分「维度」与「分类�? */
.cat-nav .feed-tab + .nav-view-tab,
.cat-nav .feed-tab + .cat-drag-wrap { position: relative; margin-left: 12px; }
.cat-nav .feed-tab + .nav-view-tab::before,
.cat-nav .feed-tab + .cat-drag-wrap::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--border);
}
/* 高级分段控件：浅色轨道 + 圆角 + 细边框 + 柔和阴影；激活项下有一枚主色滑块平滑滑动 */
.domain-switch {
  position: relative; display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 999px; padding: 4px;
  box-shadow: 0 2px 10px rgba(20, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* 滑动指示器：覆盖当前激活段，切换时平移 */
.domain-switch .ds-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 38%, transparent);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.domain-switch[data-active="ai"] .ds-indicator { transform: translateX(100%); }
.domain-switch .domain-seg {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 112px;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .3px;
  color: var(--text-soft);
  transition: color .25s;
}
.domain-switch .domain-seg .svg-ic { width: 16px; height: 16px; }
.domain-switch .domain-seg.active { color: #fff; }
.domain-switch .domain-seg:not(.active):hover { color: var(--primary); }
/* 首页「发现」控件：一个整体，非三个元素平行排布
   主按钮 = 「✦发现」(左) + 域徽标「🌐网站 ⇄」(右) 二者同处一个胶囊内；域徽标做成内嵌的深色小胶囊 */
.cat-fixed { gap: 10px; }
/* 域切换：分段控件（网站 | AI 两段常驻 + 滑块指示当前）。
   原来是「单胶囊点击形变」——另一个选项平时看不见、只能靠 ⇄ 猜，还叠了 ✦/🌐/⇄ 三个符号 */
.domain-toggle {
  position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
  height: 36px; padding: 4px; margin-right: 4px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, #fff) 0%, color-mix(in srgb, var(--surface) 75%, #000) 100%);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.03);
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
  -webkit-tap-highlight-color: transparent;
}
/* 选中段：iOS 风格低饱和主色 pill + 白字，切换关系最清晰 */
.domain-toggle .dt-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 78%, #fff) 0%, color-mix(in srgb, var(--primary) 72%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 55%, #fff);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .36s cubic-bezier(.34, 1.48, .5, 1);
  z-index: 0;
}
.domain-toggle[data-active="ai"] .dt-indicator { transform: translateX(100%); }
.domain-toggle .dt-seg {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 64px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 28px; padding: 0 14px; border: 0; border-radius: 9px;
  background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .3px;
  transition: color .18s;
  -webkit-tap-highlight-color: transparent;
}
.domain-toggle .dt-seg .dt-ico { display: none; }
.domain-toggle .dt-seg:hover { color: var(--primary); }
.domain-toggle .dt-seg.on { color: #fff; font-weight: 600; }
.domain-toggle .dt-seg:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.domain-toggle .dt-ico { font-size: 12px; line-height: 1; }
.domain-toggle.pulse { animation: dtPulse .9s ease-out; }
@keyframes dtPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); } 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 0%, transparent); } }
/* 流内次级排序：单控件双触发区 —— 左「文字」点击循环切换，右「箭头」点击展开下拉 */
.cat-sort { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 2px; }
.cat-sort::before { content: ''; width: 1px; height: 14px; background: var(--border); margin: 0 6px 0 2px; }
.sort-trigger {
  display: inline-flex; align-items: stretch; flex: 0 0 auto;
  height: 30px; border-radius: 999px;
  /* ghost：无边框无底色，只留文字与箭头——排序是次级维度，不该和域切换一样重 */
  border: 1px solid transparent; background: transparent;
  color: var(--text-soft); font-size: 12.5px; font-weight: 600;
  transition: color .18s, background .18s;
  -webkit-tap-highlight-color: transparent;
}
.sort-trigger:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.sort-trigger:active { transform: scale(.98); }
.sort-trigger.open { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* 左区：循环切换 */
.st-cycle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 6px 0 11px; border: 0; background: transparent; cursor: pointer;
  color: inherit; font: inherit; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.st-cycle:focus-visible { outline: none; }
.sort-trigger:has(.st-cycle:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-ico { font-size: 13px; line-height: 1; display: inline-block; }
.sort-trigger.spin .st-ico { animation: stSpin .42s cubic-bezier(.34, 1.3, .5, 1); }
@keyframes stSpin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(190deg) scale(.72); } 100% { transform: rotate(360deg) scale(1); } }
/* 右区：展开下拉，与左区之间一道细分割线 */
.st-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; border: 0; border-left: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent; cursor: pointer; color: inherit; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.st-caret::before {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; opacity: .7; transition: transform .2s;
}
.st-caret:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.st-caret:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sort-trigger.open .st-caret::before { transform: rotate(180deg); }
/* 下拉菜单：position:fixed（脱离 cat-nav 的 overflow 裁切，由 JS 定位到触发器下方） */
.sort-menu {
  position: fixed; z-index: 2000;
  min-width: 220px; padding: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 18%, transparent);
  animation: sortMenuIn .16s ease-out;
}
@keyframes sortMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sort-item {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text); font-size: 13px; font-weight: 600; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.sort-item .si-ico { font-size: 14px; text-align: center; }
.sort-item .si-sub { font-size: 11px; font-weight: 500; color: var(--text-soft); white-space: nowrap; }
.sort-item:hover, .sort-item:focus-visible { background: color-mix(in srgb, var(--primary) 10%, transparent); outline: none; }
.sort-item.on { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.sort-item.on::after { content: '✓'; font-size: 12px; }
.sort-item.on { grid-template-columns: 22px 1fr auto 14px; }
@media (prefers-reduced-motion: reduce) { .domain-toggle .dt-indicator, .domain-toggle .dt-seg { transition: none; } .domain-toggle.pulse { animation: none; } }
@media (max-width: 560px) {
  .domain-toggle { height: 30px; padding: 4px; margin-right: 0; }
  .domain-toggle .dt-seg { min-width: 54px; height: 24px; padding: 0 8px; font-size: 12px; }
  .domain-toggle .dt-seg { min-width: 54px; height: 24px; padding: 0 8px; font-size: 12px; }
  .sort-trigger { height: 28px; font-size: 12px; }
  .st-cycle { padding: 0 5px 0 9px; }
  .st-caret { width: 21px; }
  .sort-menu { min-width: 190px; }
  .sort-item .si-sub { display: none; }
}
/* 固定维度区与二级分类之间一道细分隔，区分「维度/域」与「分类」 */
.cat-nav .cat-fixed + .cat-drag-wrap { position: relative; margin-left: 12px; }
.cat-nav .cat-fixed + .cat-drag-wrap::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--border);
}

/* ============ 内容�? ============ */
/* 顶栏已随页面滚动，这里不再用 --topbar-height 顶开一大截（原来高达 360px） */
.content { position: relative; max-width: 1200px; margin: 0 auto; padding: 14px 16px 40px; }
.search-tip {
  /* 分类条已吸顶，这里不再 sticky，避免两条叠在一起 */
  margin: 4px 0 8px; padding: 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--text-soft); font-size: 13px; text-align: center;
  border: 1px solid var(--border); backdrop-filter: blur(6px);
}
/* 即搜即达：筛选时高亮命中的卡�? */
.content.filtering .site-card { box-shadow: 0 0 0 2px var(--primary) inset, var(--shadow); }
.content.filtering .cat-section { margin-top: 18px; }

.cat-section { margin-top: 14px; scroll-margin-top: calc(var(--catnav-h, 0px) + 12px); }
.cat-section-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.cat-section-title { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.cat-section-count { color: var(--text-soft); font-size: 13px; font-weight: 600; }
.cat-section-actions { margin-left: auto; display: flex; gap: 8px; }
.mini-btn {
  border: 1px dashed var(--border); background: transparent; color: var(--text-soft);
  border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.mini-btn:hover { color: var(--primary); border-color: var(--primary); }

/* 卡片网格：PC 一行四列，移动端单列 */
.grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 640px)  { .grid { grid-template-columns: 1fr; gap: 10px; } }

.site-card {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 9px 11px; text-decoration: none; color: var(--text);
  cursor: pointer; -webkit-touch-callout: none; -webkit-user-drag: none; touch-action: manipulation;
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.site-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.site-card:active { transform: translateY(0); }

.site-main { flex: 1 1 auto; min-width: 0; }
.site-name { font-weight: 700; font-size: 15px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-desc { font-size: 12px; color: var(--text-soft); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  min-height: 2.8em; overflow: hidden; word-break: break-all; }

.site-icon {
  width: 36px; height: 36px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 15px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.site-icon-link { flex: 0 0 auto; display: inline-flex; }
/* 渐变只留给“字母占位”，favicon 图落在中性底上，不再透出渐变背景 */
.site-icon .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; }
.site-icon .fav-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ===== 广告样式 ===== */
.ad-banner-wrap { margin: 0 0 14px; }
/* ȫվ����/�ײ�ͨ�����λ�����ȫ�������� */
.site-ad-bar {
  max-width: var(--content-max, 1200px); margin: 0 auto; padding: 0 16px;
}
.site-ad-bar.has-ad { padding: 12px 16px 0; }
.site-ad-bar:not(.has-ad) { display: none; }
/* ����ͨ��λ�� fixed ������topbar+���ർ�������·����� --topbar-height Ԥ��ƫ�ƣ����ⱻ�����ڵ� */
/* 顶部通栏已移至 <main> 之后（B1），自然远离 fixed 顶栏；此处保留合理呼吸间距即可，不再用 --topbar-height 强行推开 */
#topAdBar.has-ad { margin-top: 24px; }
/* 历史规则保留但已无触发路径：顶部通栏移到 main 之后后，.content 不再加 has-top-ad；保留此规则仅为防御文档意图 */
.content.has-top-ad { padding-top: 16px; }
.my-home-view.has-top-ad { padding-top: 16px; }
.site-bar {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 40px 12px 14px; overflow: hidden;
  text-decoration: none; color: var(--text); box-shadow: none;
  width: 100%; box-sizing: border-box;
}
.site-bar:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.site-bar-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.site-bar-body { flex: 1 1 auto; min-width: 0; }
.site-bar-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.site-bar-title .ad-label { margin-left: auto; flex-shrink: 0; }
.site-bar-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site-bar.site-bar-code { background: none; border: 1px solid var(--border); box-shadow: none; padding: 10px; }
.site-bar-code .ad-code-inner { width: 100%; }
.ad-banner {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 40px 12px 14px; overflow: hidden;
  text-decoration: none; color: var(--text); box-shadow: none;
}
.ad-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.ad-banner .ad-img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.ad-banner .ad-body { flex: 1 1 auto; min-width: 0; }
.ad-banner .ad-title-row { display: flex; align-items: center; gap: 8px; }
.ad-banner .ad-name { font-weight: 700; font-size: 15px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-banner .ad-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-label {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: none; border-radius: 999px; padding: 3px 7px;
}
.ad-close {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft);
  font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ad-close:hover { color: var(--text); border-color: var(--primary); }
/* 卡片广告（feed/sidebar）复�? .site-card，加左侧强调条区�? */
.ad-card {
  border-color: var(--border);
  background: var(--surface-2);
}
.ad-card .ad-label { margin-left: auto; flex-shrink: 0; }
.ad-card .site-name { display: flex; align-items: center; gap: 6px; }
.ad-card .site-desc { color: var(--text-soft); }
@media (max-width: 640px) {
  .ad-banner { padding-right: 38px; }
  .ad-banner .ad-img { width: 48px; height: 48px; }
}
/* ���˴������棺ȥ��Ĭ�Ϻ����ɫ/�ڱ߾࣬��Ƕ��������Ȼչʾ */
.ad-banner.ad-banner-code { background: none; border: 1px solid var(--border); box-shadow: none; padding: 10px; }
.ad-banner-code .ad-code-inner { width: 100%; }
.ad-card.ad-card-code { background: var(--surface); align-items: stretch; }
.ad-card-code .ad-code-inner { width: 100%; }
.ad-code-inner { line-height: 0; }
.ad-code-inner > * { line-height: normal; }

/* 热度徽章 �? BimiSeek 风格 */
.heat-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0;
}
.heat-badge .flame { font-size: 9px; }
/* 图标卡角标：推荐 / 外网(VPN)；VPN 与推荐共存时优先显示 VPN（外网提示更关键） */
.icon-card.is-recommended:not(.is-external)::after { content: '荐'; position: absolute; top: -4px; right: calc(50% - 26px); font-size: 9px; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 999px; color: #fff; background: var(--primary); pointer-events: none; }
.icon-card.is-external::after { content: 'VPN'; position: absolute; top: -4px; right: calc(50% - 30px); font-size: 9px; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 999px; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; pointer-events: none; }

/* ============ BimiSeek /my 风格图标网格（我的常�? / 我的首页�? ============ */
.icon-grid {
  display: grid; gap: 20px 28px;
  grid-template-columns: repeat(8, 1fr);
  padding: 8px 0 16px;
}
.icon-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: var(--text);
  transition: transform .16s;
}
.icon-card:hover { transform: translateY(-3px); }
.icon-card:active { transform: translateY(0); }
.icon-card-icon {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 24px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
/* 渐变只留给“字母占位”，favicon 落在中性底，不再透出渐变背景 */
.icon-card-icon .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; }
.icon-card-icon .fav-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.icon-card-name {
  font-size: 12.5px; font-weight: 500; line-height: 1.3; text-align: center;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 失效占位卡：pinnedIds 里存在、目录中已查不到（存量数据）。与文件夹弹层「已失效」成员同一套语义：
   图标降级为虚线灰底 + 「?」，整卡降透明度，hover 不上浮，明确表达「不可点击」。 */
.icon-card.is-missing { opacity: .55; }
.icon-card.is-missing:hover { transform: none; }
.icon-card.is-missing .icon-card-link { cursor: default; }
.icon-card.is-missing .icon-card-icon {
  background:
    repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--border) 60%, transparent) 5px 10px),
    var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--text-soft) 55%, transparent);
  box-shadow: none;
  color: var(--text-soft);
}
.icon-card.is-missing .icon-card-name { color: var(--text-soft); font-weight: 600; }
/* 仅编辑态露出「移出」角标，平常保持干净 */
.icon-card.is-missing .icon-card-acts { opacity: 0; }
.icon-grid.is-edit .icon-card.is-missing .icon-card-acts,
.my-unified-grid.is-edit .icon-card.is-missing .icon-card-acts,
.my-cat-unified-grid.is-edit .icon-card.is-missing .icon-card-acts { opacity: 1; pointer-events: auto; }
.icon-card-add {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; border: none; cursor: pointer; color: var(--text-soft);
  padding: 0;
}
.add-icon {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 300; color: var(--text-soft);
  border: 1.5px dashed var(--text-soft);
  transition: all .16s;
}
.icon-card-add:hover .add-icon { border-color: var(--primary); color: var(--primary); transform: scale(1.04); }
.add-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--text-soft); }

/* �ҵ���ҳ����Ƭ����ͣ��ʾ �ղ�/�༭/ɾ�� ������ */
.icon-card { position: relative; }
.icon-card-link { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--text); cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; touch-action: manipulation; }
/* �������������ڡ�ͼ�����Ͻǵ���ࡹ(������ͼ�����ء�������ͼ�궥����ѹͼ�걾��)
   ��/������ģʽֻ�� opacity ���뵭��������λ��/���ű任 */
.icon-card-acts { position: absolute; top: 0; right: calc(50% - 44px); display: flex; flex-direction: row; align-items: center; gap: 4px; opacity: 0; transition: opacity .14s; pointer-events: none; z-index: 5; }
/* �������Գ�����
   �� ������ַ�� �� ��Ƭƽʱ�ɾ����㡸? �������������ģʽ(.is-edit)�Ÿ������������Ƴ�/�༭/ɾ���������ײ���������Ƴ�ͻ
   �� ��ҳ������ �� ���߲�������δ������ҳ�Ŀ������Ͻdz�פ������(�� .ic-pin-add) һ������ */
.ic-act { width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: border-color .12s, color .12s, transform .08s; }
.ic-act:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.ic-act.danger:hover { border-color: #d23b53; color: #d23b53; }
/* ������ַ���������ӣ��Ƴ�����ť����ɫ��ʾ��ǰ״̬��ȥ�� pinPop �������ο� linglu ��̬�У� */
.icon-card-acts .pin-btn.pinned {
  color: #fff; border-color: var(--primary); background: var(--primary); border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent);
}
/* ������ַ�����ţ��Ƴ�����ť��������ɫʵ��Բ�����ü��ű���Ƴ���ҳ������ */
.icon-card-acts .pin-btn.pinned.remove-mode { font-size: 16px; padding-bottom: 1px; }
/* ������ַ�������롸����ģʽ��(.is-edit) �� opacity ��������������Ƭƽʱ�ɾ����� hover/��������������������Ƴ�ͻ�� */
.icon-grid.is-edit .icon-card-acts,
.my-unified-grid.is-edit .icon-card-acts,
.my-cat-unified-grid.is-edit .icon-card-acts { opacity: 1; pointer-events: auto; }
/* bimiseek ͬ��༭���£�����Բ�� ? Ǧ�ʣ�������ͼ�����Ͻ� */
.icon-card-acts .ic-edit-badge, .icon-card-acts .ic-remove-badge { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; border: none; background: var(--surface); color: var(--muted, #6b7280); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.icon-card-acts .ic-edit-badge svg, .icon-card-acts .ic-remove-badge svg { width: 10px; height: 10px; }
.icon-card-acts .ic-edit-badge:hover { color: var(--primary); transform: scale(1.1); }
/* 官方网址徽章即「−」一步移出（操作仅一项，不再弹面板）：红色语义，悬停红底白字 */
.icon-card-acts .ic-remove-badge { color: #d23b53; }
.icon-card-acts .ic-remove-badge svg { width: 11px; height: 11px; }
.icon-card-acts .ic-remove-badge:hover { color: #fff; background: #d23b53; transform: scale(1.1); }
.icon-card-acts .ic-remove-badge:active { transform: scale(.94); }
/* 编辑态：操作徽章轻微摇动（iOS 编辑态同款提示「这些可点」）；悬停/聚焦时停摆归位便于点按 */
@keyframes icBadgeWiggle {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}
.icon-grid.is-edit .icon-card-acts .ic-act,
.my-unified-grid.is-edit .icon-card-acts .ic-act,
.my-cat-unified-grid.is-edit .icon-card-acts .ic-act {
  animation: icBadgeWiggle 1.05s ease-in-out infinite;
  transform-origin: 50% 62%;
}
.icon-grid.is-edit .icon-card-acts .ic-act:hover,
.my-unified-grid.is-edit .icon-card-acts .ic-act:hover,
.my-cat-unified-grid.is-edit .icon-card-acts .ic-act:hover,
.my-unified-grid.is-edit .icon-card-acts .ic-act:focus-visible,
.my-cat-unified-grid.is-edit .icon-card-acts .ic-act:focus-visible {
  animation-play-state: paused; transform: scale(1.1) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .icon-grid.is-edit .icon-card-acts .ic-act,
  .my-unified-grid.is-edit .icon-card-acts .ic-act,
  .my-cat-unified-grid.is-edit .icon-card-acts .ic-act { animation: none; }
}
/* bimiseek �༭��嶥������ʾ�İ� + ��ɰ�ť */
.bookmark-layout-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent); font-size: 13px; color: var(--text); animation: blhIn .18s ease-out; }
.bookmark-layout-hint .blh-text { flex: 1; min-width: 0; line-height: 1.5; color: var(--muted, #6b7280); }
.bookmark-layout-hint .blh-done { flex-shrink: 0; padding: 6px 14px; border: none; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: filter .12s; }
.bookmark-layout-hint .blh-done:hover { filter: brightness(1.08); }
/* 管理态 hint 条内「新建文件夹」入口（头部精简后收编于此） */
.bookmark-layout-hint .blh-newfolder { flex-shrink: 0; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, transform .08s; }
.bookmark-layout-hint .blh-newfolder:hover { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.bookmark-layout-hint .blh-newfolder:active { transform: scale(.97); }
@keyframes blhIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* mobile long-press drag: suppress native callout/selection and lock scrolling
   only while in edit (dragging) mode, so normal browsing still scrolls */
#myLinksGrid .icon-card, #myLinksGrid .icon-card-link, #myLinksGrid .folder-link,
#myLinksGrid .icon-grid.is-edit, #myLinksGrid .icon-grid.is-edit .icon-card {
  -webkit-touch-callout: none;
}
.icon-grid.is-edit { touch-action: none; -webkit-user-select: none; user-select: none; }
body.lp-dragging { overflow: hidden; touch-action: none; }
/* drag ghost clone sits outside #myLinksGrid: kill native menu/selection so finger on ghost never triggers link preview */
.drag-ghost { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: none; }

/* ===== iOS / Android ����ϵͳ�˵�ȫ������ ===== */
/* ���� .icon-card-link ���� -webkit-touch-callout: none���� iOS Safari / Android Chrome ���̳и���Ԫ�أ�
   ���������ڲ� <img> / <div> ʱ�Դ���������ͼƬ / ����ͼƬ / ���� / AIʶͼ��������ϵͳ�˵���
   ������ÿ�����ܱ��������е���Ԫ�أ�ͼƬ��ͼ����������ĸ���ļ���Сͼ�ꡢ��������ť����ʽ������ */
.icon-card-icon,
.icon-card-icon .fav-img,
.icon-card-icon .fav-letter,
.icon-card .fav-img,
.icon-card .fav-letter,
.icon-card .icon-card-name,
.site-icon,
.site-icon .fav-img,
.site-icon .fav-letter,
.folder-imgs,
.folder-imgs .fav-img,
.folder-mini,
.folder-mini .fav-img,
.folder-count,
.folder-icon,
.ic-act,
.ic-pin-add,
.icon-card-add,
.icon-card-add .icon-card-add-plus,
.icon-card-add .icon-card-add-text {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
/* �ؼ���ͼƬ / ��ĸ / ͼ������ pointer-events:none���ó����¼���͸�� .icon-card-link ������
   ���� -webkit-touch-callout:none ������Ч �� ������ֹ iOS / Android ϵͳͼƬ/���Ӳ˵���
   �̰� / click ������ .icon-card-link�����ӱ������� pointer-events:none����������ת����Ӱ�졣 */
.icon-card-icon,
.icon-card .fav-img,
.icon-card .fav-letter,
.site-icon,
.site-icon .fav-img,
.site-icon .fav-letter,
.folder-imgs,
.folder-imgs .fav-img,
.folder-imgs .fav-letter,
.folder-mini,
.folder-mini .fav-img,
.folder-mini .fav-letter,
.folder-icon,
.folder-count {
  pointer-events: none !important;
}
/* ������ַ�������롸����ģʽ����������΢��������ʾ���ڿɱ༭̬���ο� linglu / iOS �༭̬������
   ������С������ת+λ�ƣ����������/�ղذ�ť�IJ��ֳ�ͻ�������ӳ������ڿ�Ƭ��ͬ��������Ȼ */
@keyframes myCardShake {
  0%   { transform: rotate(0deg)    translate(0, 0); }
  20%  { transform: rotate(-0.8deg) translate(-0.4px,  0.3px); }
  40%  { transform: rotate(0.8deg)  translate( 0.4px, -0.3px); }
  60%  { transform: rotate(-0.8deg) translate(-0.3px,  0.2px); }
  80%  { transform: rotate(0.8deg)  translate( 0.3px, -0.2px); }
  100% { transform: rotate(0deg)    translate(0, 0); }
}
/* bimiseek �༭ģʽ����Ƭ��̬������������ʾ�� + ? ���±���༭̬�� */
.icon-grid.is-edit .icon-card { animation: none; }
/* ��ҳ��������δ������ҳ�Ŀ������Ͻdz�פ������һ��������ҳ�������ӵı��ָɾ�����ʾ
   dzɫ�� + ��ɫ �����ο� linglu �ĸɾ����У���������ͼ�����Ͻ���� */
.ic-pin-add {
  position: absolute; top: 0; right: calc(50% - 44px); z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--primary) 33%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; pointer-events: auto;
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.ic-pin-add:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: scale(1.08); }
/* 加号换成描边 SVG：文字「＋」在不同字体下粗细/重心不一致，描边图标更干净统一 */
.ic-pin-add svg { width: 13px; height: 13px; display: block; }
/* 首页分类区：一屏几十个网址，常驻的「＋」会连成一片加号墙，把图标网格淹没。
   改成悬停 / 键盘聚焦到该网址才淡入 —— 功能保留（一键加入常用），平时整块干净。
   触摸设备没有 hover，隐藏就等于功能消失，因此在那里保持常驻可见。 */
/* 默认隐藏：悬停 / 键盘聚焦到该网址才淡入 */
.my-home-cat-panel .ic-pin-add {
  opacity: 0; transform: scale(.82);
  transition: opacity .16s, transform .16s, background .14s, color .14s, border-color .14s;
}
.my-home-cat-panel .icon-card:hover .ic-pin-add,
.my-home-cat-panel .icon-card:focus-within .ic-pin-add,
.my-home-cat-panel .ic-pin-add:focus-visible { opacity: 1; transform: scale(1); }
.my-home-cat-panel .icon-card:hover .ic-pin-add:hover { transform: scale(1.1); }
/* 无悬停能力的设备（触屏）：没有 hover 可触发，就必须常驻，否则等于功能消失 */
@media (hover: none), (pointer: coarse) {
  .my-home-cat-panel .ic-pin-add { opacity: 1; transform: none; }
}
/* ������ͼ��Ϊ 48px����ʵ�ʰ��ê������ �� ������ͼ�����Ͻ���� */
.my-home-cat-panel .ic-pin-add { right: calc(50% - 46px); }
/* �����ӶԺŵ��붯�� */
@keyframes pinPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 1280px) { .icon-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px)  { .icon-grid { grid-template-columns: repeat(5, 1fr); gap: 20px 12px; } }
@media (max-width: 640px)  { .icon-grid { grid-template-columns: repeat(4, 1fr); gap: 18px 10px; } }

/* ============ 首页“我的常用”横向快速访问条（专家级视觉�? ============ */
.quick-row {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 14px;
  /* 原生横滑：去掉强�? GPU 合成层，避免�? fixed 导航/动态内容死�? */
  overscroll-behavior-x: contain; touch-action: pan-x; -ms-touch-action: pan-x;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.quick-row::-webkit-scrollbar { height: 6px; }
.quick-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.quick-row::-webkit-scrollbar-track { background: transparent; }
.quick-card {
  flex: 0 0 auto; width: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 8px 11px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.quick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.quick-card:active { transform: translateY(-1px); }
.quick-icon {
  width: 50px; height: 50px; border-radius: 15px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 20px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.quick-icon .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; }
.quick-icon .fav-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.quick-name {
  font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .quick-card { width: 80px; padding: 14px 6px 10px; }
  .quick-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 18px; }
  .quick-name { font-size: 12.5px; }
}

/* 编辑态操�? */
/* 卡片右侧操作区：热度 + 收藏（最右侧，始终可见） */
.card-actions {
  margin-left: auto; align-self: center; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 10px;
}
/* 编辑 / 删除仅在编辑态显�? */
.card-actions .edit, .card-actions .del { display: none; }
.editing .card-actions .edit, .editing .card-actions .del { display: inline-flex; }
.card-actions button {
  width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--surface-2); font-size: 13px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); flex-shrink: 0;
}
.card-actions .del:hover { background: #ff5a5a; color: #fff; }
.card-actions .edit:hover { background: var(--primary); color: #fff; }
/* 收藏（pin）按�? */
.card-actions .pin-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border); cursor: pointer;
  background: var(--surface-2); font-size: 15px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.10); color: var(--text-soft); flex-shrink: 0; transition: all .2s; }
.card-actions .pin-btn.pinned { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 40%, transparent); animation: pinPop .26s cubic-bezier(.34,1.56,.64,1); }
.card-actions .pin-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* 空状�? */
.empty {
  grid-column: 1 / -1; text-align: center; color: var(--text-soft);
  padding: 30px; border: 1.5px dashed var(--border); border-radius: var(--radius); font-size: 14px;
}
/* �ҵ���ҳ��״̬����ʾ + ���Ӱ�ť */
.my-empty-msg { display: block; margin-bottom: 14px; }
.my-empty-add { display: inline-block; }
/* �б��Ϳ�״̬������/�ʼǿ�Ƭʽ���У� */
.empty.list-empty {
  grid-column: auto; padding: 50px 20px; border-style: dashed; border-width: 1.5px;
  background: color-mix(in srgb, var(--primary) 2%, var(--surface));
}
.empty.list-empty .empty-ico { display: block; margin-bottom: 10px; opacity: .55; color: var(--text-soft); }
.empty.list-empty .empty-ico .svg-ic { width: 38px; height: 38px; }
.empty.list-empty .empty-tip { font-size: 13px; opacity: .8; margin-top: 4px; }

/* 首屏问候条 —�? 淡色固定背景（柔和、不刺眼�? */
/* 空状态引导 */
.empty.guide {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-style: dashed; line-height: 1.6;
}
.empty.guide .mini-btn { margin-top: 4px; }

/* 个人首页�?#/my 独立视图�? */
.my-home-view { max-width: 1200px; margin: 0 auto; padding: calc(var(--topbar-height, 120px) + 12px) 16px 40px; }
/* �ҵ���ҳ�ղ�������Ϊ�鼶�������ڲ� .icon-grid ���о������У����ⱻ��� .grid ���ɵ��� */
.my-home-grid { display: block; }
.my-home-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 20px; }
.my-home-title { font-size: 19px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.my-home-title span { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.my-home-head .icon-btn:last-child { margin-left: auto; }
.my-home-view .card-actions { display: flex; }

/* ============ 全站通用底部 ============ */
.site-footer {
  position: relative; margin-top: 28px;
  color: var(--text-soft); font-size: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme, var(--primary)) 2.5%, var(--surface)) 0%, var(--surface) 38%, var(--surface) 100%);
}
/* 顶部主题色渐隐分隔线，弱化与主内容的割裂感 */
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme, var(--primary)) 22%, transparent) 22%, color-mix(in srgb, var(--theme, var(--primary)) 22%, transparent) 78%, transparent);
  opacity: .38;
}
.site-footer[hidden] { display: none; }
.sf-inner { max-width: var(--content-max, 1200px); margin: 0 auto; padding: 34px 20px 26px; }
.sf-ad { margin: 0 0 22px; }
.sf-ad:empty { display: none; }
.sf-ad .site-bar { margin: 0; }

/* 主区：品牌 + 多组导航 */
.sf-body { display: block; }
.sf-main {
  display: grid; grid-template-columns: minmax(240px, 1.35fr) minmax(0, 2.65fr);
  gap: 30px 40px; align-items: start;
}
/* 品牌区 */
.sf-brand { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-brand-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sf-logo {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; object-fit: cover;
  background: var(--surface); box-shadow: 0 3px 10px color-mix(in srgb, var(--theme, var(--primary)) 22%, transparent);
}
.sf-brand-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-name-row {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.sf-name {
  font-size: 22px; font-weight: 900; letter-spacing: -0.4px;
  color: var(--text); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.sf-tag {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; color: #fff;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent);
  letter-spacing: .3px;
}
.sf-slogan {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  max-width: 300px;
}
/* 品牌区下方站点分享条 */
.sf-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sf-share-btns {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.sf-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: var(--surface); cursor: pointer;
  padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-soft);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  border: 1px solid var(--border);
  transition: background .14s, color .14s, transform .12s, border-color .14s;
}
.sf-share-btn:hover { transform: translateY(-1px); }
.sf-share-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sf-weixin { color: #07c160; }
.sf-weixin:hover { background: rgba(7,193,96,.1); border-color: rgba(7,193,96,.25); }
.sf-weibo { color: #e6162d; }
.sf-weibo:hover { background: rgba(230,22,45,.1); border-color: rgba(230,22,45,.25); }
.sf-qq { color: #12b7f5; }
.sf-qq:hover { background: rgba(18,183,245,.1); border-color: rgba(18,183,245,.25); }
.sf-qzone { color: #f5a623; }
.sf-qzone:hover { background: rgba(245,166,35,.1); border-color: rgba(245,166,35,.28); }
.sf-copy { color: var(--text-soft); }
.sf-copy:hover { background: var(--surface-2); color: var(--text); }
.sf-more { color: var(--primary); }
.sf-more:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
/* 移动端原生分享：作为主分享入口，用品牌色突出 */
.sf-native { color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-color: transparent; font-weight: 700; }
.sf-native:hover { filter: brightness(1.04); transform: translateY(-1px); }
.sf-native svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* 导航组 */
.sf-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px; min-width: 0; align-items: start;
}
.sf-col {
  min-width: 0; background: transparent; border: none;
  border-radius: 0; padding: 0;
}
.sf-col:hover { transform: none; box-shadow: none; }
.sf-col-title {
  position: relative; margin: 0 0 12px; padding-bottom: 8px;
  font-size: 13px; font-weight: 800; color: var(--text); letter-spacing: .2px;
  border-bottom: 1px solid var(--border);
}
.sf-col-title::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 22px; height: 2px; border-radius: 2px;
  background: var(--theme, var(--primary)); opacity: .85;
}
.sf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-link {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 0;
  color: var(--text-muted); text-decoration: none; font-size: 12.5px; line-height: 1.45;
  transition: color .14s, transform .14s;
}
.sf-link:hover { color: var(--theme, var(--primary)); transform: translateX(2px); }
.sf-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-link .sf-link-ic {
  font-size: 12px; line-height: 1; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--theme, var(--primary)) 10%, transparent);
}

/* 底部版权条 */
.sf-bottom {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
}
.sf-copy { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; min-width: 0; }
.sf-copy a { color: var(--text-soft); text-decoration: none; }
.sf-copy a:hover { color: var(--theme, var(--primary)); text-decoration: underline; }
.sf-legal {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
}
.sf-legal a { color: var(--text-muted); text-decoration: none; transition: color .14s; }
.sf-legal a:hover { color: var(--theme, var(--primary)); }
.sf-tip { display: inline-flex; align-items: center; gap: 5px; }
.sf-tip svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .75; }

/* 响应式：窄屏品牌区居中、导航 2 列、版权条堆叠 */
@media (max-width: 860px) {
  .sf-main { grid-template-columns: 1fr; gap: 26px; }
  .sf-brand { align-items: center; text-align: center; }
  .sf-brand-top { flex-direction: column; gap: 8px; }
  .sf-name-row { justify-content: center; flex-wrap: wrap; }
  .sf-name { white-space: normal; }
  .sf-slogan { max-width: none; }
  .sf-share-row { justify-content: center; }
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .sf-col { padding: 0; }
  .sf-col-title { text-align: center; }
  .sf-col-title::after { left: 50%; transform: translateX(-50%); }
  .sf-links { align-items: center; }
  .sf-link:hover { transform: none; }
  .sf-bottom { justify-content: center; text-align: center; }
  .sf-legal { justify-content: center; }
}
@media (max-width: 480px) {
  .site-footer { margin-top: 20px; }
  .sf-inner { padding: 26px 16px 22px; }
  .sf-cols { gap: 18px 12px; }
}
/* 我的首页（#/my）不展示全站底部 */
body.route-my .site-footer { display: none !important; }

/* ============ ������ť��FAB�� ============ */
.fab, .fab-todo, .fab-note {
  position: fixed; right: 22px; z-index: 95;
  display: none; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: none; color: #fff; font: inherit;
  -webkit-tap-highlight-color: transparent; outline: none;
}
/* ���� / �����ҵ���ҳ��Բ������ť */
.fab {
  bottom: 24px; width: 54px; height: 54px; border-radius: 18px; font-size: 26px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 10px 24px rgba(20,30,60,.28), inset 0 0 0 1px rgba(255,255,255,.14);
}
/* ���� / �ʼǣ�PC ��Բ��ͼ�갴ť����ͣչ��Ϊ����ǩ�Ľ��� */
.fab-todo, .fab-note {
  z-index: 96; width: 50px; height: 50px; padding: 0; border-radius: 16px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 24px rgba(20,30,60,.26), inset 0 0 0 1px rgba(255,255,255,.16);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, filter .2s ease,
              width .28s cubic-bezier(.2,.8,.3,1), padding .28s cubic-bezier(.2,.8,.3,1);
}
.fab-todo { bottom: 84px; background: linear-gradient(135deg, #5b8def, #7aa0f5); }
.fab-note { bottom: 24px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.fab-ic { width: 22px; height: 22px; display: block; flex-shrink: 0; }
.fab-todo .fab-ic, .fab-note .fab-ic { stroke-width: 2; }
.fab-todo span, .fab-note span {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; line-height: 1;
  transition: max-width .28s cubic-bezier(.2,.8,.3,1), opacity .22s ease, margin .28s;
}
/* fabAdd ͼ����·���л�����ҳ=�ؼң�����=�Ӻ� */
.fab-ic-home { display: none; }
.fab.is-home .fab-ic-plus { display: none; }
.fab.is-home .fab-ic-home { display: block; }
/* ������JS �л� .visible������ + ���������볡 */
.fab.visible, .fab-todo.visible, .fab-note.visible {
  display: flex;
  animation: fabIn .34s cubic-bezier(.2,.8,.3,1);
}
@keyframes fabIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
/* PC ����ͣ���ϸ� + �Թ⣬����/�ʼ�չ����ǩ */
@media (min-width: 721px) {
  .fab:hover, .fab-todo:hover, .fab-note:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(20,30,60,.34), inset 0 0 0 1px rgba(255,255,255,.2);
    filter: saturate(1.08);
  }
  .fab:active, .fab-todo:active, .fab-note:active { transform: translateY(-1px) scale(.96); }
  .fab-todo:hover, .fab-note:hover { width: auto; padding: 0 16px; }
  .fab-todo:hover span, .fab-note:hover span { max-width: 80px; opacity: 1; margin-left: 2px; }
}


/* ============ 模态框 ============ */
.modal-mask {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 20, .5); backdrop-filter: blur(4px); padding: 16px;
}
.modal {
  width: min(94vw, 1040px); background: var(--surface); color: var(--text);
  border-radius: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 1px color-mix(in srgb, var(--primary) 6%, transparent); overflow: hidden;
  /* ���ݳ���ʱ�������������ڣ�header/footer �̶���body �ڲ���������֤�رհ�ť��Զ�ɼ� */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
  animation: modalSlideUp .24s cubic-bezier(.2,.7,.3,1);
}
@keyframes modalSlideUp { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 20px 26px 16px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; color: var(--text); }
.modal-header h3::before { content: ''; width: 6px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--primary), var(--primary-2)); flex-shrink: 0; box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.modal-close {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 18px; cursor: pointer;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .2s ease;
}
.modal-close:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); transform: rotate(90deg); } /* 44px 最小触摸区域（手机端友好） */
/* ===== 添加网址弹窗（v2）：去掉标题栏后，以「分段控件」为视觉锚点重做层次 ===== */
/* 语义化隐藏（读屏可见、视觉不可见）—— 保留无障碍标题但去掉视觉标题栏 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.modal-site {
  position: relative;
  /* 比通用 modal 收窄：内容不需要 1040px 那么宽，收窄后卡片密度更舒适 */
  width: min(94vw, 880px);
  border-radius: 26px;
}
/* 顶部一条主色渐隐细光带：替代标题栏，给弹窗一个明确的「起点」 */
.modal-site::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--primary) 22%, var(--primary-2) 50%, var(--primary) 78%, transparent);
  opacity: .85; pointer-events: none;
}
.modal-site .modal-header { display: none; }
.modal-site .modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 12;
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border-radius: 50%; font-size: 15px;
  background: color-mix(in srgb, var(--text-soft) 10%, transparent);
  color: var(--text-soft);
  backdrop-filter: blur(6px);
}
.modal-site .modal-close:hover { background: var(--primary); color: #fff; transform: rotate(90deg); }
.modal-site .modal-body { padding: 26px 30px; }

/* 分段控件：居中胶囊底槽 + 选中白药丸主色投影 */
.modal-site .modal-tabs {
  align-self: center;
  padding: 5px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--text-soft) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.05) inset;
}
.modal-site .mtab { padding: 9px 26px; font-size: 14.5px; font-weight: 650; }

/* 搜索框：更宽更圆润，聚焦主色光环明确 */
.modal-site .pick-search-wrap { width: min(600px, 100%); }
.modal-site .pick-search {
  padding: 13px 18px 13px 46px;
  font-size: 14.5px;
  background: var(--surface-2);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.modal-site .pick-search:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.modal-site .pick-search:focus { background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 15%, transparent); }
.modal-site .pick-search-ic { left: 17px; font-size: 15px; }

/* 分类导航：加大间距与触摸面积，选中药丸更饱满 */
.modal-site .pick-cat-bar { margin-top: 18px; gap: 8px; }
.modal-site .pick-cat { padding: 7px 16px; font-size: 13.5px; }
.modal-site .pick-cat.active { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); }

/* 结果区：卡片更透气、列更宽 */
.modal-site .pick-results { padding: 18px 4px 4px 2px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.modal-site .pick-card { padding: 14px; border-radius: 16px; gap: 9px; }
.modal-site .pick-card:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 14%, transparent); }
.modal-site .pick-ic { width: 42px; height: 42px; min-width: 42px; border-radius: 12px; }
.modal-site .pick-name { font-size: 14px; }
.modal-site .pick-desc { font-size: 12px; }
/* 移动端：收窄内边距，卡片两列更舒展 */
@media (max-width: 720px) {
  .modal-site { width: 100%; border-radius: 22px; }
  .modal-site .modal-body { padding: 22px 16px 18px; }
  .modal-site .modal-close { top: 10px; right: 10px; }
  .modal-site .mtab { padding: 8px 15px; font-size: 13.5px; }
  .modal-site .pick-results { grid-template-columns: 1fr 1fr; gap: 10px; padding-right: 2px; }
}
/* ===== 登录态头像 + 账号中心 ===== */
.login-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .5px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent), 0 2px 8px rgba(0,0,0,.18);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.menu-item.is-logged { padding: 7px 9px; }
.menu-item.is-logged:hover .login-avatar { transform: scale(1.12) rotate(-4deg); }
/* 头像内的图片（自定义 / Gravatar）填满圆形，保持圆角 */
.login-avatar.has-img img, .ac-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* 我的首页顶栏：登录态把 #myTbLogin 渲染为圆形头像按钮（覆盖胶囊图标样式） */
#myTbLogin.is-logged { padding: 0; width: 34px; height: 34px; justify-content: center; border-radius: 50%; }
#myTbLogin.is-logged .login-avatar { width: 30px; height: 30px; font-size: 12px; }
/* 账号中心头像：可编辑 + 弹出菜单 */
.ac-avatar-wrap { position: relative; flex-shrink: 0; }
.ac-avatar-edit {
  position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); transition: transform .15s, background .15s;
}
.ac-avatar-edit:hover { transform: scale(1.1); }
.ac-avatar-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; min-width: 150px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 14px 36px rgba(15,23,42,.22); display: flex; flex-direction: column; gap: 2px;
}
.ac-avatar-menu[hidden] { display: none; }
.ac-avatar-menu button {
  border: none; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left;
  padding: 9px 10px; border-radius: 9px; cursor: pointer; transition: background .12s;
}
.ac-avatar-menu button:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

/* 账号中心弹窗 */
.account-center { max-width: 440px; }
.ac-profile { display: flex; align-items: center; gap: 14px; padding: 4px 4px 18px; }
.ac-avatar {
  width: 62px; height: 62px; border-radius: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 28px; letter-spacing: .5px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.14);
}
.ac-meta { min-width: 0; }
.ac-email { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-status { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12.5px; color: var(--text-soft); }
.ac-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.ac-status .dot.on { background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent); }
.ac-time { color: var(--text-soft); opacity: .85; }
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-card {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  padding: 16px 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
  cursor: pointer; color: var(--text); font: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
.ac-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,23,42,.14); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)); }
.ac-card:active { transform: translateY(-1px) scale(.99); }
.ac-card-ic { font-size: 22px; line-height: 1; }
.ac-card-t { font-weight: 800; font-size: 15px; }
.ac-card-d { font-size: 12px; color: var(--text-soft); line-height: 1.5; }
.ac-card.danger:hover { border-color: #ff5a5a; background: color-mix(in srgb, #ff5a5a 9%, var(--surface-2)); }
.ac-actions { display: flex; gap: 10px; margin-top: 18px; }
.ac-actions .btn-ghost, .ac-actions .btn-primary { flex: 1; justify-content: center; }
@media (max-width: 480px) { .ac-grid { grid-template-columns: 1fr; } }

/* 弹窗体：flex 列布局 + 自身不滚动；三页签各自管理滚动（在线添加 → 仅网址区滚动） */
.modal-body { padding: 16px 26px 20px; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; overscroll-behavior: contain; }
/* 添加网址弹窗三页签：高级质感分段控件（参考 linglu / aitab 风格） */
.modal-tabs {
  position: relative; display: inline-flex; align-self: center; gap: 0;
  padding: 4px; margin: 0 auto 18px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) inset;
  flex-shrink: 0;
}
/* 滑动指示块：浮在激活 tab 之下的白卡，切换时平滑位移（高级质感分段控件） */
.mtab-ind {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0;
  border-radius: 999px; background: var(--surface);
  box-shadow: 0 2px 10px rgba(15,23,42,.14), 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.mtab {
  position: relative; z-index: 1; flex: 0 0 auto; padding: 7px 22px; border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; border-radius: 999px; cursor: pointer;
  transition: color .2s ease;
  white-space: nowrap;
}
.mtab:hover { color: var(--text); }
.mtab.active { color: var(--primary); font-weight: 700; }
.mtab-panel[hidden] { display: none; }
/* 三页签各自成为滚动容器：手动/组件整体滚，在线添加仅网址区滚 */
.mtab-panel { flex: 1 1 auto; min-height: 0; }
#tabManual, #tabWidget { overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
#tabOnline { display: flex; flex-direction: column; }
/* 在线添加页签稳定高度（linglu 式固定弹窗）：内容少时也保持浏览空间，弹窗不随内容跳动 */
#tabOnline .pick-inner { min-height: clamp(280px, 46vh, 540px); }
.tab-widget-tip { margin: 0 0 12px; }
.pick-hint { font-size: 11.5px; font-weight: 400; color: var(--text-soft); }
/* 卡片组件大卡网格（linglu 式） */
.wp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* 在线添加：去盒子化，搜索/分类固定 + 网址区独立滚动 */
.pick-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; }
/* 搜索框：高级居中胶囊，🔍 居左，输入区与图标不重合 */
.pick-search-wrap { position: relative; flex-shrink: 0; align-self: center; width: min(520px, 100%); }
.pick-search-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .42; pointer-events: none; }
.pick-search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px 12px 44px; font-size: 14px; background: var(--surface); color: var(--text); outline: none; text-align: left; transition: border-color .15s, box-shadow .15s, background .15s; }
.pick-search::placeholder { color: color-mix(in srgb, var(--text-soft) 70%, transparent); }
.pick-search:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--surface)); }
.pick-search:focus { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
/* 网址区：唯一滚动区（页签/搜索/分类固定），linglu 式卡片网格 + 细滚动条 */
.pick-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 2px 2px; align-content: start; }
.pick-results::-webkit-scrollbar { width: 6px; }
.pick-results::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-soft) 28%, transparent); border-radius: 3px; }
.pick-results::-webkit-scrollbar-track { background: transparent; }
.pick-tip { grid-column: 1 / -1; font-size: 12px; color: var(--text-soft); padding: 6px 2px; }
/* 网址卡（linglu 式）：图标 + 名称 / 两行简介 / 底部 🔗 访问 + ＋添加 */
.pick-card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: all .15s; cursor: default;
}
.pick-card:hover { border-color: var(--primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-2px); }
.pick-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pick-ic {
  width: 40px; height: 40px; min-width: 40px; border-radius: 11px; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); position: relative;
}
.pick-ic .fav-img, .pick-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pick-ic .fav-letter {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 16px; font-weight: 800; border-radius: inherit;
  line-height: 1;
}
.pick-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-desc { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pick-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; }
.pick-visit { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft); border: 1px solid var(--border); background: var(--surface-2); transition: all .15s; }
.pick-visit:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.pick-visit svg { width: 13px; height: 13px; display: block; }
/* 「＋ 添加 / ✔ 已添加」胶囊按钮（linglu 风：圆润、主色渐变、已添加灰底） */
.pick-add {
  border: 1px solid transparent; color: #fff; border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 25%, transparent);
  transition: all .15s;
}
.pick-add:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent); transform: translateY(-1px); }
.pick-done { color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: default; opacity: .85; }
/* 分类导航：单行自适应水平滚动，选中项自动居中（参考 linglu 顶部导航） */
.pick-cat-bar {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
  gap: 6px; margin-top: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px; flex-shrink: 0;
  /* 左右淡入淡出暗示可滚动 */
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.pick-cat-bar::-webkit-scrollbar { display: none; }
.pick-cat {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-soft);
  border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .16s; white-space: nowrap;
}
.pick-cat:hover { color: var(--text); background: color-mix(in srgb, var(--text-soft) 8%, transparent); }
.pick-cat.active { color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 28%, transparent); }
.pick-cat-n { display: none; }
/* 兼容旧分组标题类（已无调用路径，保留防御） */
.pick-cat-title { position: sticky; top: 0; z-index: 2; background: var(--surface); font-size: 13px; font-weight: 800; color: var(--text); margin: 6px 0 2px; padding: 6px 2px; letter-spacing: .02em; display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; }
.pick-cat-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--primary), var(--primary-2)); flex-shrink: 0; }
.pick-cat-title-n { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-soft); }
.pick-cat-list { display: contents; }
/* 旧行式结果样式（.pick-row/.pick-body/.pick-meta）已由 .pick-card 取代 */

/* ---- 手动添加表单（linglu 式行表单：label 左 + 大输入框 + 字数 + 侧边动作） ---- */
.site-form-linglu { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.lf-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lf-row-top { align-items: flex-start; }
.lf-row-top .lf-label { padding-top: 12px; }
.lf-label { width: 74px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.lf-ctl {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1.5px solid transparent; border-radius: 10px;
  padding: 0 12px; height: 44px; box-sizing: border-box; transition: border-color .15s, background .15s;
}
.lf-ctl:focus-within { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
.lf-ctl input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: var(--text); font-size: 13.5px; outline: none; }
.lf-ctl input::placeholder { color: color-mix(in srgb, var(--text-soft) 72%, transparent); font-size: 12.5px; }
.lf-ctl select { flex: 1; min-width: 0; height: 34px; border: none; background: transparent; color: var(--text); font-size: 13.5px; outline: none; }
.lf-ctl-plain { background: transparent; border-color: transparent; box-shadow: none; }
.lf-ctl-plain:focus-within { box-shadow: none; border-color: transparent; background: transparent; }
.lf-ctl-area { height: auto; padding: 10px 12px; }
.lf-ctl-area textarea { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 13.5px; outline: none; resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.5; }
.lf-count { flex-shrink: 0; font-size: 11px; color: color-mix(in srgb, var(--text-soft) 80%, transparent); font-variant-numeric: tabular-nums; }
.lf-count-top { align-self: flex-start; padding-top: 2px; }
.lf-side {
  flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 10px; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary);
  font-size: 13px; font-weight: 700; transition: all .15s; white-space: nowrap;
}
.lf-side:hover { background: color-mix(in srgb, var(--primary) 20%, var(--surface)); transform: translateY(-1px); }
.lf-side-warm { background: color-mix(in srgb, #f6a13c 14%, var(--surface)); color: #e08a1e; }
.lf-side-warm:hover { background: color-mix(in srgb, #f6a13c 22%, var(--surface)); }
.lf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fav-preview-lg { width: 52px; height: 52px; min-width: 52px; border-radius: 13px; font-size: 22px; background: var(--surface-2); border: 1px solid var(--border); }
.lf-more { margin-top: 2px; }
.lf-more-toggle {
  display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; cursor: pointer;
  color: var(--text-soft); font-size: 12.5px; font-weight: 700; padding: 4px 2px;
}
.lf-more-toggle:hover { color: var(--primary); }
.lf-more-arrow { display: inline-block; transition: transform .18s; }
.lf-more-toggle.open .lf-more-arrow { transform: rotate(180deg); }
.lf-more #fMorePanel { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 2px; }
.lf-more #fMorePanel[hidden] { display: none; }
/* 背景颜色色板（linglu 式）：首格自动（棋盘格）、末格无底色（斜杠格） */
.bg-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.bg-sw {
  width: 27px; height: 27px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  cursor: pointer; padding: 0; position: relative; transition: transform .12s, box-shadow .12s;
}
.bg-sw:hover { transform: translateY(-1px); }
.bg-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.bg-sw.on::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0, -1px);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35));
}
.bg-sw-auto, .bg-sw-none {
  background-image: repeating-conic-gradient(color-mix(in srgb, var(--text-soft) 22%, transparent) 0 25%, transparent 0 50%);
  background-size: 8px 8px;
}
.bg-sw-none::before { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #f5544d; transform: rotate(-45deg); border-radius: 1px; }
.bg-sw-none.on::after { display: none; }
/* 用户自选图标底色：字母/emoji 落在纯色底上（白字 + 轻描边），favicon 铺满时自然盖住 */
.site-icon.has-bg { border-color: color-mix(in srgb, var(--text) 10%, transparent); }
.site-icon.has-bg .fav-letter { background: transparent; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); }

/* ---- 卡片组件大卡（linglu 式：标题/副标题居中 + 实时迷你预览 + 热度 + 添加） ---- */
.wp-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  transition: all .18s;
}
.wp-card:hover { border-color: var(--primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 13%, transparent); transform: translateY(-2px); }
.wp-card.added { opacity: .6; }
.wp-card.added:hover { transform: none; box-shadow: none; border-color: var(--border); }
.wp-c-name { text-align: center; font-weight: 800; font-size: 14.5px; letter-spacing: -.01em; }
.wp-c-desc { text-align: center; font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-c-prev {
  position: relative; height: 148px; border-radius: 12px; overflow: hidden; pointer-events: none;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
/* 预览内的组件卡脱离网格：自适应容器宽度、隐藏动画与缩放把手 */
.wp-c-prev .my-widget { position: absolute; left: 8px; top: 8px; right: 8px; width: auto; max-width: none; animation: none; }
.wp-c-prev .my-widget-resize, .wp-c-prev .my-widget-acts, .wp-c-prev .wg-card-acts { display: none; }
/* 覆盖 hot 卡「标题行隐藏」规则：预览里保留标题更像成品（3 类选择器压过 [data-type] 规则） */
.wp-c-prev .my-widget[data-type] .my-widget-title { display: flex; }
.wp-c-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.wp-c-heat { font-size: 12px; font-weight: 700; color: #ff6b3d; }
.wp-c-heat b { font-weight: 800; font-variant-numeric: tabular-nums; }
.wp-c-add {
  border: 1px solid transparent; color: #fff; border-radius: 999px; cursor: pointer;
  padding: 5px 16px; font-size: 12px; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 25%, transparent);
  transition: all .15s;
}
.wp-c-add:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent); transform: translateY(-1px); }
.wp-c-add.pick-done { color: var(--text-soft); background: var(--surface-2); border-color: var(--border); box-shadow: none; cursor: default; }
/* 便签静态迷你预览 */
.sticky-mini { width: 92px; height: 96px; margin: 14px auto 0; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); overflow: hidden; display: flex; flex-direction: column; transform: rotate(-2deg); }
.sticky-mini-hd { height: 22px; }
.sticky-mini-ln { height: 7px; margin: 10px 10px 0; border-radius: 4px; background: rgba(0, 0, 0, .12); }
.sticky-mini-ln.short { width: 55%; }
/* 窄屏：行表单 label 上置、页签收紧 */
@media (max-width: 640px) {
  .lf-row { flex-wrap: wrap; }
  .lf-label { width: 100%; padding-top: 0 !important; }
  .lf-row-top .lf-label { padding-top: 0; }
  .lf-side { height: 40px; }
  .lf-ctl { height: 42px; }
  .modal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; width: 100%; border-radius: 999px; }
  .modal-tabs::-webkit-scrollbar { display: none; }
  .mtab { flex: 1 1 auto; text-align: center; padding: 7px 14px; }
  .pick-results { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .wp-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wp-c-prev { height: 120px; }
  .pick-cat-bar { justify-content: flex-start; }
}

/* �Ҽ������IJ˵����ο� linglu���Ҽ� �� ���ӱ�ǩ �� �������ӣ� */
.ctx-menu {
  position: fixed; z-index: 4000; min-width: 150px; padding: 5px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
  animation: ctxIn .12s ease;
}
@keyframes ctxIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; color: var(--text); padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ctx-item:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.ctx-ic { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.ctx-ic .svg-ic { width: 15px; height: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.field input, .field select {
  border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; transition: border-color .15s;
}
.field input:focus, .field select:focus { border-color: var(--primary); }
.icon-row { display: flex; align-items: center; gap: 10px; }
.icon-row input { flex: 1; min-width: 0; }
.fav-preview {
  width: 38px; height: 38px; min-width: 38px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--text-soft);
}
.fav-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.field-hint { font-size: 11.5px; color: var(--text-soft); font-weight: 500; line-height: 1.4; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-shrink: 0; }
.btn-ghost { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 10px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.btn-primary { border: none; color: #fff; border-radius: 10px; padding: 10px 20px; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.btn-primary:hover, .btn-ghost:hover { opacity: .92; }

/* ============ 邮箱验证码行（注册 / 找回密码） ============ */
.code-row { margin-bottom: 14px; }
.code-row .field { margin-bottom: 0; }
.code-input-line { display: flex; gap: 8px; align-items: stretch; }
.code-input-line input { flex: 1; min-width: 0; }
.send-code-btn {
  flex-shrink: 0; white-space: nowrap;
  border: 1px solid var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 10px; padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.send-code-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.send-code-btn:disabled { opacity: .55; cursor: not-allowed; }
.recovery-alt { margin: 2px 0 12px; font-size: 12.5px; }
.recovery-alt a { color: var(--primary); cursor: pointer; text-decoration: none; }
.recovery-alt a:hover { text-decoration: underline; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #1b1d29; color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: toastIn .2s ease;
  /* 通知类元素不得拦截交互：否则会吞掉底部卡片的点击与拖拽起点 */
  pointer-events: none;
}
/* 撤销等动作按钮：单独开启点击（父级 .toast 为 none），且不破坏整体不拦截特性 */
.toast-action {
  pointer-events: auto;
  margin-left: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
}
.toast-action:hover { background: rgba(255,255,255,.18); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ 响应�? ============ */
@media (max-width: 720px) {
  /* 移动端回退单行 flex：品牌区两行制仅 ≥721px 生效，tagline 与第二行（天气+功能链）隐藏 */
  .topbar-inner { display: flex; gap: 8px; padding: 5px 10px; }
  .brand-tagline, .topbar-sub { display: none; }
  .brand { order: 1; }
  /* 移动端：收起两行主体锁版（含深色版），回到一体横版小图；
     必须显式压过全局 [data-theme=dark] .brand-lockup.logo-dark，否则深色模式 PC 锁版会误显示，造成「多一个 logo」 */
  .brand-lockup { display: none; }
  [data-theme="dark"] .brand-lockup.logo-dark { display: none; }
  /* 移动端同样使用完整锁版 logo（品牌识别），高度 26px 控制顶栏厚度 */
  .brand-logo-img { display: block; height: 26px; }
  [data-theme="dark"] .brand-logo-img.logo-light { display: none; }
  [data-theme="dark"] .brand-logo-img.logo-dark { display: block; }
  /* 浅色模式下只留浅色版：否则 light/dark 两张会同时显示（移动端出现两个 logo） */
  [data-theme="light"] .brand-logo-img.logo-dark { display: none; }
  .brand-icon-img { display: none; }
  .top-actions { order: 2; margin-left: auto; gap: 5px; flex-wrap: nowrap; }
  /* 移动端隐藏顶部文字导航，�? cat-nav 接管入口 */
  .top-nav { display: none; }
  .top-actions .icon-btn { padding: 7px 10px; font-size: 12px; }
  /* 窄屏：笔�?/风格只留图标，避免顶栏拥�? */
  .top-actions .nav-label { display: none; }
  .top-actions .top-nav-btn { padding: 7px 9px; font-size: 14px; }
  .topbar-search { padding: 6px 12px 10px; gap: 0; }
  /* 移动端：搜索站点磁吸条横向滚动，避免换行破坏布局 */
  .search-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 4px; margin-top: 0; scrollbar-width: none; }
  .search-tabs::-webkit-scrollbar { display: none; }
  .st-kind-chip { flex-shrink: 0; }
  .st-tab { padding: 4px 8px; font-size: 12.5px; }
  /* 移动端 Hero 收敛：单行 slogan（B2 后已是小字行） */
  .home-hero { padding: 2px 10px 6px; }
  .home-hero-sub { font-size: 13.5px; }
  /* 移动端：收藏按钮收窄，仅保留＋图标感 */
  .top-quick-add { padding: 5px 10px; font-size: 12px; border-radius: 9px; }
  .search-box { max-width: none; margin: 0; padding: 5px 6px; border-radius: 12px; }
  .engine-select { max-width: 64px; font-size: 13px; padding: 8px 2px; }
  .search-input { font-size: 16px; padding: 10px 6px; }
  .search-btn { padding: 0 14px; font-size: 14px; }
  .cat-nav { padding: 4px 10px; }
  .content { padding-top: 12px; }
  .my-home-view { padding-top: var(--topbar-height, 56px); }
  .grid { gap: 10px; }
  .site-card { padding: 10px 12px; }
  .site-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
  .site-name { font-size: 14px; }
  /* �ƶ��ˣ�����/�ʼ�Ϊ��פ����ǩ���ң������� hover�������ֿɶ� */
  .fab-todo, .fab-note { width: auto; height: 46px; padding: 0 16px; border-radius: 999px; }
  .fab-todo span, .fab-note span { max-width: 80px; opacity: 1; margin-left: 2px; }

  .ai-strip-more { display: none; }
  /* 移动端默认展示编�?/删除按钮，便于触屏操�? */
  .card-actions .edit, .card-actions .del { display: inline-flex; }
  .more-menu { top: 50px; right: 10px; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ 主色调（风格可配置） ============ */
[data-accent="purple"] { --primary: #6d5efc; --primary-2: #8b7cff; }
[data-accent="blue"]   { --primary: #2563eb; --primary-2: #60a5fa; }
[data-accent="green"]  { --primary: #10b981; --primary-2: #34d399; }
[data-accent="teal"]   { --primary: #0ea5e9; --primary-2: #38bdf8; }
[data-accent="orange"] { --primary: #f97316; --primary-2: #fb923c; }
[data-accent="pink"]   { --primary: #ec4899; --primary-2: #f472b6; }
[data-accent="red"]    { --primary: #ef4444; --primary-2: #f87171; }
[data-accent="invite"] { --primary: #c89b3c; --primary-2: #e0b85c; } /* 邀请裂变专属配色 */
/* 深色下的默认蓝（app 常驻 data-accent="blue"，需双属性选择器压过上方 accent 行）：
   暗底上 #3b82f6 对比 ≈4.6:1 优于 #2563eb ≈3.3:1；其它 accent 在深色下保持原样 */
[data-theme="dark"][data-accent="blue"] { --primary: #3b82f6; --primary-2: #60a5fa; }

/* ============ 分类拖拽容器 ============ */
.cat-drag-wrap { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; flex: none; min-width: max-content; }
/* PC 端保留拖拽提示鼠标，触摸场景�? cat-nav 上的 touch-action 接管，不会被误判为拖�? */
.cat-drag-wrap .cat-tab { cursor: grab; }
.cat-drag-wrap .cat-tab:active { cursor: grabbing; }
@media (pointer: coarse) {
  .cat-drag-wrap .cat-tab { cursor: pointer; }
  .cat-drag-wrap .cat-tab:active { cursor: pointer; }
}

/* ============ 我的网址筛�? ============ */
.filter-bar { max-width: 1200px; margin: 8px auto 0; padding: 0 16px; }
.filter-input {
  width: 100%; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 999px; padding: 10px 16px; font-size: 14px;
  outline: none; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s;
}
.filter-input:focus { border-color: var(--primary); box-shadow: var(--shadow-hover); }

/* ============ 置顶卡片 ============ */
.site-card.pinned { border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* 首屏「我的常用」区：用卡片容器突出，强调“这是我的主页�? */
.cat-section#sec-__common {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 14px 6px; margin-top: 14px;
}
.cat-section#sec-__common .cat-section-title { color: var(--primary); }

/* ============ 拖拽视觉 ============ */
.sortable-ghost { opacity: .25; outline: 2px dashed var(--primary); outline-offset: -2px; }
.cat-drag-wrap .cat-tab.dragging, .site-card.dragging { opacity: .4; }
.editing .site-card { cursor: grab; }
.editing .site-card:active { cursor: grabbing; }

/* ============ 同步面板 ============ */
.modal-tip { font-size: 12.5px; color: var(--text-soft); margin-bottom: 14px; line-height: 1.6; }
/* 登录弹窗品牌锁版（deskzx-lockup-login） */
.modal-header h3.am-title::before { display: none; }
.am-brand { height: 26px; width: auto; display: block; border-radius: 6px; }
.sync-status { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; }
.sync-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #bbb; flex-shrink: 0; }
.sync-status .dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.sync-status .sync-time { color: var(--text-soft); margin-left: auto; font-size: 12px; }
.sync-now {
  width: 100%; margin-top: 6px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--primary); border-radius: 10px; padding: 10px; font-weight: 600; cursor: pointer;
}
.sync-now:hover { border-color: var(--primary); }

/* ===== 账户弹窗：邀请裂变 + 两步验证（2FA） ===== */
#accountExtras { margin-top: 6px; border-top: 1px dashed var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.ext-block { display: flex; flex-direction: column; gap: 8px; }
.ext-title { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--text); }
.ext-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-soft); flex-wrap: wrap; }
.reward-badge { background: linear-gradient(135deg, #f6d365, #d4a017); color: #5b3b00; font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 12px; }
.share-link-row { display: flex; gap: 8px; align-items: center; }
.share-link-row input { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); }
.btn-mini { flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-mini:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.modal-footer.plain { justify-content: flex-start; margin-top: 2px; padding: 0; border: 0; }
.totp-qr-wrap { display: flex; justify-content: center; padding: 6px 0; }
.totp-qr-wrap img { width: 180px; height: 180px; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.totp-secret { font-size: 12px; color: var(--text-soft); margin: 2px 0; word-break: break-all; }
.totp-secret code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* 密码强度计 */
.pw-strength { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px; }
.pw-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s, background .2s; }
.pw-label { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ===== 分享弹窗 ===== */
.share-qr-wrap { display: flex; justify-content: center; padding: 8px 0 4px; }
.share-qr-wrap img { width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
/* 分享链接输入框：图标 + 只读链接 + 行内复制，一眼可见可点 */
.share-link-box {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 6px 6px 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.share-link-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.slb-ic { font-size: 14px; line-height: 1; flex: 0 0 auto; opacity: .7; }
#shareUrlInput {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--text-soft);
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  text-overflow: ellipsis;
}
.slb-copy {
  flex: 0 0 auto; padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary); font-weight: 700; font-size: 12.5px;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, transform .1s;
}
.slb-copy:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: var(--primary); }
.slb-copy:active { transform: translateY(1px); }
.swatch-invite.active { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== 微信 / QQ 内置浏览器分享引导层 ===== */
.share-guide { max-width: 360px; text-align: center; }
.share-guide-body { padding: 18px 18px 22px; }
.sg-arrow {
  font-size: 46px; line-height: 1; font-weight: 800;
  color: var(--primary);
  transform: rotate(0deg);
  animation: sgPulse 1.4s ease-in-out infinite;
  margin-bottom: 6px;
}
@keyframes sgPulse { 0%,100% { transform: translate(0,0); opacity: .55; } 50% { transform: translate(4px,-4px); opacity: 1; } }
.sg-tip { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 4px 0 0; }
.sg-tip b { color: var(--primary); }
.sg-sub { font-size: 12.5px; line-height: 1.6; color: var(--text-soft); margin: 12px 0 0; }


/* ============ 风格面板 ============ */
.style-group { margin-bottom: 20px; }
.style-label { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 9px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg button {
  border: none; background: var(--surface-2); color: var(--text);
  padding: 8px 18px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.seg button.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; position: relative; transition: transform .12s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--text); }
.swatch.active::after {
  content: '\2714'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700;
}

/* ============ 发现流卡片（�? ☆，BimiSeek 风格�? ============ */
.star-card .card-actions,
.my-home-view .card-actions { flex-shrink: 0; }
.star-card { cursor: pointer; }

/* 名称行：仅名称（热度与收藏已移至卡片最右侧�? */
.star-card .name-row {
  display: flex; align-items: center; gap: 6px;
}
.star-card .name-row .site-name { flex: 0 1 auto; min-width: 0; }
.star-card .name-row .site-badge {
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 2px 6px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
.star-card .name-row .site-badge.sb-rec { color: #fff; background: var(--primary); }
.star-card .name-row .site-badge.sb-vpn { color: #b45309; background: #fef3c7; border: 1px solid #fde68a; }
.star-card .pin-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--surface-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-soft); flex-shrink: 0; transition: all .2s;
}
.star-card .pin-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.star-card .pin-btn.pinned { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 40%, transparent); animation: pinPop .26s cubic-bezier(.34,1.56,.64,1); }

/* ============ 热门AI / 热门网站 / 今日发现 顶部介绍（克制配色，避免艳丽�? ============ */
.ai-hero, .browse-hero, .discover-hero {
  display: flex; align-items: center; gap: 16px; margin: 6px auto 18px;
  padding: 20px 22px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow);
}
.ai-hero-ic, .browse-hero-ic, .discover-hero-ic { font-size: 40px; line-height: 1; }
.ai-hero-title, .browse-hero-title, .discover-hero-title { font-size: 24px; font-weight: 800; color: var(--text); }
.ai-hero-sub, .browse-hero-sub, .discover-hero-sub { margin-top: 4px; font-size: 13.5px; color: var(--text-soft); }
.ai-hero-desc { color: var(--text-soft); font-size: 13px; margin: -8px 2px 14px; }
.cat-tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cat-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 14px; cursor: pointer; text-align: left; color: var(--text);
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.cat-tile-ic { font-size: 26px; line-height: 1; }
.cat-tile-nm { font-weight: 700; font-size: 15px; }
.cat-tile-cnt { font-size: 12px; color: var(--text-soft); }

/* ============ 分类「更多」链�? ============ */
.cat-more {
  margin-left: auto; font-size: 12.5px; color: var(--primary); text-decoration: none;
  font-weight: 600; white-space: nowrap;
}
.cat-more:hover { text-decoration: underline; }

/* ---- 首页发现流区块（扁平流，不按分类堆砌�? ---- */
.home-feed-sub {
  margin-left: auto; font-size: 12.5px; color: var(--text-soft); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 首页 feed 区块只保留副标题（无大标题），左对齐并收紧头部下间距 */
.home-feed-section .cat-section-head { margin-bottom: 10px; }
.home-feed-section .home-feed-sub { margin-left: 0; }
/* 热门榜「人气数据边界」分隔条：真实点击只覆盖部分站点，后半段为零点击新收录。
   与其让它们混在热度序里伪装成榜单，不如显式分段，让用户知道人气数据到哪为止。 */
.feed-split {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 2px; padding: 0 2px;
  color: var(--text-soft); font-size: 12px; letter-spacing: .2px;
}
.feed-split .fs-line { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--border) 75%, transparent); }
.feed-split .fs-txt { flex: 0 0 auto; opacity: .85; }
/* 「上一批 / 换一批」翻页器：左回退、右前进，共用瞬态反馈样式 */
.home-feed-pager { display: flex; align-items: stretch; gap: 10px; margin: 12px 0 4px; }
.home-feed-prev {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border: 1px dashed var(--border); background: none; border-radius: 14px;
  color: var(--text-soft); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.home-feed-prev:hover {
  color: var(--primary); border-color: var(--primary); border-style: solid;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.home-feed-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1; min-width: 0; padding: 12px 16px;
  border: 1px dashed var(--border); background: none; border-radius: 14px;
  color: var(--text-soft); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.home-feed-more:hover {
  color: var(--primary); border-color: var(--primary); border-style: solid;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
/* ④ 「换一批 / 上一批」点击后的 1.2s 瞬态反馈：主题色填充 + 实线边框 + 上移 */
.home-feed-more.is-switched,
.home-feed-prev.is-switched {
  color: #fff; background: var(--primary);
  border: 1px solid var(--primary); border-style: solid;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
  transform: translateY(-1px);
}
.home-feed-more.is-switched .home-feed-more-n { color: rgba(255,255,255,.85); opacity: 1; }
.home-feed-more-n { font-size: 12px; font-weight: 500; opacity: .75; }
@media (max-width: 640px) {
  .home-feed-pager { margin-top: 14px; }
  .home-feed-prev { padding: 11px 14px; }
  .home-feed-more { padding: 11px 14px; }
}
.cat-back {
  display: inline-block; font-size: 13px; color: var(--primary); text-decoration: none;
  font-weight: 600; margin-bottom: 12px;
}
.cat-back:hover { text-decoration: underline; }

/* ============ 单站详情�? ============ */
.detail-view { max-width: 1200px; margin: 0 auto; padding-top: 4px; }
/* 两栏：左主内容 + 右栏（宽度随视口收窄，sticky 跟随） */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 2px; }
.detail-main { min-width: 0; }
.detail-side { min-width: 0; position: sticky; top: calc(var(--topbar-height, 64px) + 14px); display: flex; flex-direction: column; gap: 16px; }
/* 面包屑：返回路径 + 层级信号 */
.detail-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-soft); margin: 6px 0 12px;
}
.detail-crumb a { color: var(--text-soft); text-decoration: none; }
.detail-crumb a:hover { color: var(--primary); }
.detail-crumb-sep { opacity: .45; }
.detail-crumb-cur { color: var(--text); font-weight: 600; }
/* 头部卡片 */
.detail-hero {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}
.detail-hero .site-icon, .detail-hero .detail-hero-ic {
  width: 64px; height: 64px; font-size: 28px; border-radius: 16px; flex: none;
}
.detail-hinfo { min-width: 0; flex: 1; }
.detail-hname { font-size: 22px; font-weight: 800; line-height: 1.25; margin: 0; word-break: break-word; }
.detail-hdesc { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.detail-hmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.detail-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--primary); font-size: 12px; font-weight: 600; text-decoration: none;
}
.detail-chip:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.detail-meta-i { font-size: 12.5px; color: var(--text-soft); }
.detail-meta-i.dm-rec { color: var(--primary); font-weight: 600; }
.detail-meta-i.dm-vpn { color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: 1px 6px; border-radius: 999px; }
/* 操作条 */
.detail-ops { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.detail-op-main { text-decoration: none; display: inline-flex; align-items: center; }
.detail-pin, .detail-op {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.detail-pin svg { width: 14px; height: 14px; }
.detail-pin:hover, .detail-op:hover { border-color: var(--primary); color: var(--primary); }
.detail-pin.pinned {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* 内容卡片 */
.detail-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
}
.detail-card-t { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.detail-card-c { font-size: 14.5px; line-height: 1.8; color: var(--text); margin: 0; word-break: break-word; }
/* 网址信息（事实列表） */
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin: 0; }
.detail-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-fact dt { font-size: 12px; color: var(--text-soft); }
.detail-fact dd { margin: 0; font-size: 14px; word-break: break-all; }
.detail-fact dd a { color: var(--primary); text-decoration: none; }
.detail-fact dd a:hover { text-decoration: underline; }
/* 相关推荐 */
.detail-related { margin-top: 22px; }
.detail-related-t { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.detail-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 12px; }
/* 服务端渲染正文里的相关推荐（纯链接列表，爬虫可直接抓取内链） */
.detail-related-list {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  list-style: none; padding: 0; margin: 0;
}
.detail-related-list a { color: var(--text); text-decoration: none; font-size: 14px; }
.detail-related-list a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 640px) {
  .detail-hero { padding: 14px; gap: 12px; }
  .detail-hero .site-icon, .detail-hero .detail-hero-ic { width: 52px; height: 52px; font-size: 22px; border-radius: 13px; }
  .detail-hname { font-size: 19px; }
  .detail-ops .detail-op-main, .detail-pin, .detail-op { flex: 1 1 auto; justify-content: center; }
}

/* ============ 详情页右栏 widget ============ */
/* 统一卡片：阴影 + 圆角 + primary 竖条标题（与首页/天气页风格一致） */
.dx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 15px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.dx-title { position: relative; font-size: 14.5px; font-weight: 800; color: var(--text); margin: 0 0 12px; padding-left: 11px; }
.dx-title::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; border-radius: 4px; background: var(--primary); }
/* 热门网站列表 */
.dx-hot-list { display: flex; flex-direction: column; }
.dx-hot-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; text-decoration: none; color: var(--text); transition: background .12s; }
.dx-hot-item:hover { background: var(--surface-2); }
.dx-hot-ic { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; flex: none; display: inline-flex; }
.dx-hot-ic .site-icon { width: 100%; height: 100%; border-radius: inherit; }
.dx-hot-info { min-width: 0; flex: 1; }
.dx-hot-name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-hot-meta { font-size: 11.5px; color: var(--text-soft); margin-top: 1px; }
/* 分类 chips */
.dx-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-cat { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); font-size: 12.5px; text-decoration: none; transition: background .12s, color .12s, border-color .12s; }
.dx-cat:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); }
/* 精选网格（复用 icon-card） */
.dx-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
.dx-picks .icon-card { /* 紧凑化 */ }
/* 公告 */
.dx-notice { font-size: 13px; line-height: 1.75; color: var(--text-soft); word-break: break-word; }
.dx-notice :where(a) { color: var(--primary); }
.dx-notice p { margin: 0 0 8px; }
.dx-notice p:last-child { margin-bottom: 0; }
/* 友情链接 */
.dx-links { display: flex; flex-direction: column; }
.dx-link { display: flex; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 9px; text-decoration: none; color: var(--text); font-size: 13px; transition: background .12s, color .12s; }
.dx-link:hover { background: var(--surface-2); color: var(--primary); }
.dx-link .dl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; opacity: .55; }
.dx-link span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 侧栏中的广告卡：去掉额外外边距，跟随 flex 列的 gap 间距 */
.detail-side .ad-card { margin: 0; }
.detail-side .ad-card .ad-label { display: inline-block; }
/* 移动端：单栏堆叠，右栏落到主内容下方 */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; gap: 18px; }
  .detail-side { position: static; top: auto; order: 2; }
}

/* ============ 我的页面：管理面�? ============ */
.my-panel { max-width: 1200px; margin: 26px auto 0; padding: 0 2px; }
.my-panel-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.my-panel-head .mini-btn { margin-left: auto; }
/* ���۵����������� */
.my-panel-head-btn { cursor: pointer; user-select: none; border-radius: 10px; padding: 6px 8px; margin-left: -8px; margin-right: -8px; transition: background .12s; }
.my-panel-head-btn:hover { background: var(--surface-2); }
.my-panel-spacer { flex: 1; }
.collapse-arrow { display: inline-block; color: var(--text-soft); font-size: 14px; transition: color .16s; }
.collapse-hint { font-size: 12px; font-weight: 400; color: var(--text-soft); }
.my-panel-collapse-body { transition: opacity .16s; }
.my-panel-collapse-body[hidden] { display: none; }
.my-panel-tip { color: var(--text-soft); font-size: 12.5px; margin: 0 0 12px; }
/* 分类网格：手�? 1 �? / 平板 2 �? / PC 3 �? */
.my-cat-list { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 641px) { .my-cat-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .my-cat-list { grid-template-columns: repeat(3, 1fr); } }
/* 分类卡片：整卡为网格项，展开时跨满整�? */
.mg-cat-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; transition: border-color .12s, box-shadow .12s;
}
.mg-cat-wrap.mg-expanded { grid-column: 1 / -1; border-color: var(--primary); box-shadow: var(--shadow); }
.mg-cat-wrap.mg-hidden { opacity: .5; }
.mg-cat-wrap.mg-hidden .mg-cat-cnt::after { content: ' \5DF2\9690\85CF'; color: var(--text-soft); }
/* v2 分类卡片化：让分类从"管理列表"变成"美观卡片"，彩色左边条 + hover 才显示管理按�? */
.mg-cat-row { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); padding-left: 16px; overflow: hidden; }
.mg-cat-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); opacity: .85; }
.mg-cat-wrap:nth-child(6n+1) .mg-cat-row::before { background: linear-gradient(180deg, #3B82F6, #60A5FA); }
.mg-cat-wrap:nth-child(6n+2) .mg-cat-row::before { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.mg-cat-wrap:nth-child(6n+3) .mg-cat-row::before { background: linear-gradient(180deg, #10b981, #34d399); }
.mg-cat-wrap:nth-child(6n+4) .mg-cat-row::before { background: linear-gradient(180deg, #ef4444, #f87171); }
.mg-cat-wrap:nth-child(6n+5) .mg-cat-row::before { background: linear-gradient(180deg, #0ea5e9, #38bdf8); }
.mg-cat-wrap:nth-child(6n) .mg-cat-row::before { background: linear-gradient(180deg, #8b5cf6, #c4b5fd); }
.mg-cat-wrap:nth-child(6n+1) .mg-cat-ic { color: #3B82F6; }
.mg-cat-wrap:nth-child(6n+2) .mg-cat-ic { color: #f59e0b; }
.mg-cat-wrap:nth-child(6n+3) .mg-cat-ic { color: #10b981; }
.mg-cat-wrap:nth-child(6n+4) .mg-cat-ic { color: #ef4444; }
.mg-cat-wrap:nth-child(6n+5) .mg-cat-ic { color: #0ea5e9; }
.mg-cat-wrap:nth-child(6n) .mg-cat-ic { color: #8b5cf6; }
/* 管理按钮默认隐藏，hover 卡片才显�? */
.mg-cat-acts { opacity: 0; transition: opacity .15s; gap: 5px; }
.mg-cat-wrap:hover .mg-cat-acts, .mg-cat-wrap.mg-expanded .mg-cat-acts { opacity: 1; }
/* 计数 pill �? */
.mg-cat-cnt { font-size: 11.5px; color: var(--text-soft); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
/* 展开更多按钮 */
.my-cat-more { grid-column: 1 / -1; margin-top: 2px; }
.my-cat-more button { width: 100%; padding: 10px; border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); color: var(--primary); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; }
.my-cat-more button:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-color: var(--primary); }
/* 空态：无分类时提示 */
.my-cat-empty { grid-column: 1 / -1; color: var(--text-soft); font-size: 13px; padding: 14px; text-align: center; background: var(--surface-2); border-radius: 12px; }

.mg-cat-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  cursor: pointer; user-select: none; transition: background .12s;
}
.mg-cat-row:hover { background: var(--surface-2); }
.mg-cat-row::after { content: '\203A'; margin-left: auto; color: var(--text-soft); font-size: 16px; line-height: 1; transition: transform .15s; }
.mg-cat-wrap.mg-expanded .mg-cat-row::after { transform: rotate(90deg); }
.mg-cat-ic { font-size: 20px; cursor: grab; user-select: none; }
.mg-cat-nm { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cat-cnt { font-size: 12px; color: var(--text-soft); white-space: nowrap; flex-shrink: 0; }
.mg-cat-acts { display: flex; gap: 8px; flex-shrink: 0; }
.mg-cat-wrap.dragging { opacity: .4; }
/* 展开后的网址网格：手�? 2 �? / 平板 3 �? / PC 4 �? */
.mg-site-wrap { display: none; }
.mg-cat-wrap.mg-expanded .mg-site-wrap {
  display: grid; gap: 8px; padding: 2px 14px 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 641px) { .mg-cat-wrap.mg-expanded .mg-site-wrap { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .mg-cat-wrap.mg-expanded .mg-site-wrap { grid-template-columns: repeat(4, 1fr); } }
.mg-site-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px;
}
/* ��������ַ��Сͼ�꣨���� getFavicon �� .site-icon��������С�ߴ磩 */
.mg-site-ic { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; flex-shrink: 0; }
.mg-site-ic .fav-letter { font-size: 11px; }
.mg-site-name { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-site-name:hover { color: var(--primary); }
.mg-site-acts { display: flex; gap: 5px; flex-shrink: 0; }
.mg-site-acts .mini-btn { font-size: 12px; padding: 4px 8px; }
.mg-site-acts .mini-btn.pin-active { color: #fff; border-style: solid; border-color: var(--primary); background: var(--primary); box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent); }
.my-subs { display: flex; flex-direction: column; gap: 8px; }
.sub-row {
  display: grid; grid-template-columns: 1fr 2fr auto auto; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 13.5px;
}
.sub-del {
  border: none; background: transparent; color: var(--text-soft); font-size: 14px; line-height: 1;
  cursor: pointer; padding: 6px 8px; min-width: 32px; min-height: 32px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.sub-del:hover { background: #ffe9ec; color: #d23b53; }
.sub-name { font-weight: 700; }
.sub-url { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sub-pending { background: #fff4e0; color: #b9770a; }
.sub-approved { background: #e6f9ee; color: #12925a; }
.sub-rejected { background: #ffe9ec; color: #d23b53; }

/* ============ 待办清单（对�? BimiSeek 三栏风格�? ============ */
.todo-progress-wrap { display: flex; align-items: center; gap: 12px; padding: 12px 16px 6px; flex-shrink: 0; }
.todo-progress-bar { flex: 1; min-width: 0; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.todo-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2), color-mix(in srgb, var(--primary-2) 70%, white)); box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 40%, transparent); transition: width .35s ease; }
.todo-progress-text { font-size: 12.5px; color: var(--text-soft); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.todo-add { display: flex; gap: 8px; margin: 4px 16px 12px; flex-wrap: wrap; }
.todo-input {
  flex: 1; min-width: 140px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 14px;
  background: var(--surface); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.todo-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.todo-date { width: 140px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font-size: 13px; background: var(--surface); color: var(--text); outline: none; transition: border-color .15s; }
.todo-date:focus { border-color: var(--primary); }
.todo-remind-btn { flex-shrink: 0; opacity: .4; transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.todo-remind-btn.on { opacity: 1; background: var(--primary); color: #fff; border-color: var(--primary); }
.todo-list-wrap { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.todo-list-wrap::-webkit-scrollbar { width: 5px; }
.todo-list-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px;
  transition: border-color .12s, box-shadow .12s, transform .12s, background .12s; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.todo-row:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.todo-row.done { opacity: .62; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.todo-row.overdue:not(.done) { border-left: 3px solid #ef4444; background: color-mix(in srgb, #ef4444 5%, var(--surface)); }
.todo-row.star { border-left: 3px solid var(--primary); }
.todo-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.todo-check:hover { border-color: var(--primary); }
.todo-row.done .todo-check { background: var(--primary); border-color: var(--primary); }
.todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.todo-text { font-size: 14px; word-break: break-word; line-height: 1.4; }
.todo-row.done .todo-text { text-decoration: line-through; color: var(--text-soft); }
.todo-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.todo-cat-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }
.todo-date-badge { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }
.todo-date-badge.overdue { background: color-mix(in srgb, #ef4444 18%, transparent); color: #ef4444; }
.todo-date-badge.today { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; }
.todo-star { flex-shrink: 0; border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .4; padding: 4px; border-radius: 6px; transition: all .15s; }
.todo-star.on { opacity: 1; }
.todo-star:hover { background: var(--surface-2); }
.todo-remind { flex-shrink: 0; font-size: 13px; opacity: .85; }
.todo-row.done .todo-remind { opacity: .4; }
.todo-edit { flex-shrink: 0; border: none; background: transparent; cursor: pointer; font-size: 13px; opacity: .55; padding: 4px; border-radius: 6px; }
.todo-edit:hover { opacity: 1; background: var(--surface-2); }
.todo-row.done .todo-edit { opacity: .35; }
.todo-del { flex-shrink: 0; border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .6; padding: 4px; border-radius: 6px; }
.todo-del:hover { opacity: 1; background: var(--surface-2); }
/* 移动端侧栏开关（桌面隐藏�? */
.note-mobile-sb-btn { display: none; }
/* 移动端侧栏遮罩（点遮罩关闭抽屉，避免遮挡内容�? */
.note-sb-backdrop { display: none; }
.field.chk { flex-direction: row; align-items: center; gap: 8px; }
.field.chk input { width: auto; min-width: auto; }
.field.chk > span { font-size: 13px; font-weight: 500; color: var(--text); }
.remind-opts { display: flex; gap: 16px; margin: -4px 0 14px; padding: 12px 14px; background: color-mix(in srgb, var(--primary) 5%, var(--surface-2)); border: 1px solid var(--border); border-radius: 10px; }
.remind-opts .field { flex: 1; margin-bottom: 0; }

/* ============ 笔记（三栏布局，BimiSeek 风格�? ============ */
.note-app {
  display: flex; height: calc(100vh - var(--topbar-height, 56px));
  max-width: 1560px; margin: 0 auto; width: 100%;
  position: fixed !important; top: var(--topbar-height, 56px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: var(--bg); overflow: hidden;
  z-index: 50;
}
/* 笔记页专属：三栏卡片化背景 + 间隙，让编辑区像 BimiSeek 那样浮在主画布上；
   待办页也复用 .note-app，但没有编辑器，所以不应用这个卡片化画布。 */
#noteView.note-app { gap: 8px; padding: 8px; background: var(--surface-2); }
/* ---- 左侧边栏 ---- */
.note-sidebar {
  width: 180px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; transition: width .25s, opacity .2s;
  z-index: 10; overflow: hidden; border-radius: 12px;
}
.note-sidebar.collapsed { width: 0; min-width: 0; border: none; }
.note-sidebar-inner { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 8px 7px 7px; min-width: 160px; }
.note-sidebar::-webkit-scrollbar { width: 4px; }
.note-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.note-brand { display: flex; align-items: center; gap: 8px; padding: 4px 5px 12px; }
.note-brand-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); flex-shrink: 0; }
.note-brand-ico .svg-ic { width: 14px; height: 14px; }
.note-brand-name { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: .2px; }

.note-nav { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.note-nav-tab {
  border: none; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 600; padding: 7px 9px; border-radius: 8px;
  cursor: pointer; text-align: left; transition: background .13s, color .13s;
  display: flex; align-items: center; gap: 8px; width: 100%; font-family: inherit;
}
.note-nav-tab .svg-ic { width: 15px; height: 15px; flex-shrink: 0; opacity: .9; }
.note-nav-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-nav-cnt { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.note-nav-tab:hover { color: var(--text); background: var(--surface-2); }
.note-nav-tab.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); font-weight: 700; }
.note-nav-tab.active .note-nav-cnt { color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
/* 「返回首页」是离开这一页，不属于笔记视图，挪到底部并弱化 */
.note-home-btn { margin-top: 12px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; padding-top: 10px; color: var(--text-soft); }

/* 分类 */
.note-cat-section { border-top: 1px solid var(--border); padding-top: 8px; flex: 1; }
.note-cat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 0 3px; }
.note-cat-title { font-size: 11.5px; font-weight: 700; color: var(--text-soft); letter-spacing: .4px; }
.note-cat-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: 5px; color: var(--text-soft); }
.note-cat-add .svg-ic { width: 12px; height: 12px; }
.note-cat-add:hover { color: var(--primary); border-color: var(--primary); }
.note-cat-list { display: flex; flex-direction: column; gap: 1px; }
.note-cat-item {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px;
  cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--text-soft);
  transition: background .12s, color .12s; border: none; background: transparent; width: 100%; text-align: left;
  font-family: inherit; position: relative;
}
.note-cat-item:hover { background: var(--surface-2); color: var(--text); }
.note-cat-item.active { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 700; }
.note-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.note-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-cat-cnt { font-size: 11px; color: var(--text-soft); flex-shrink: 0; min-width: 14px; text-align: right; }
.note-cat-del { opacity: 0; transition: opacity .15s; cursor: pointer; background: none; border: none; color: var(--text-soft); padding: 0; border-radius: 5px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.note-cat-del .svg-ic { width: 12px; height: 12px; }
.note-cat-item:hover .note-cat-del { opacity: 1; }
.note-cat-del:hover { color: #ef4444; }
/* 分类行右侧的操作按钮组（上移/下移/改名/改色/删除）：
   悬停才出现，且**绝对定位浮在行右侧**——不占用名称的横向空间，
   否则 220px 侧栏被 100px 按钮抢走一半，长分类名全被截成省略号。 */
.note-cat-acts {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 0; opacity: 0; transition: opacity .15s; flex-shrink: 0;
  padding: 1px 2px; border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  pointer-events: none;
}
.note-cat-item:hover .note-cat-acts, .note-cat-item:focus-within .note-cat-acts { opacity: 1; pointer-events: auto; }
/* 悬停时把计数让开，避免和浮层按钮叠在一起 */
.note-cat-item:hover .note-cat-cnt { opacity: 0; }
.note-cat-act { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: none; border: none; color: var(--text-soft); cursor: pointer; padding: 0; border-radius: 5px; line-height: 1; }
.note-cat-act .svg-ic { width: 12px; height: 12px; }
.note-cat-act:hover { background: var(--surface); color: var(--text); }
.note-cat-act.danger:hover { color: #ef4444; }
/* 分类改名/新建的行内输入框 */
.note-cat-edit {
  width: 100%; border: 1px solid var(--primary); border-radius: 7px; padding: 5px 8px;
  font-size: 13px; background: var(--surface); color: var(--text); outline: none;
  font-family: inherit;
}

/* 标签区块 */
.note-tag-section { border-top: 1px solid var(--border); padding-top: 10px; flex: 0 0 auto; max-height: 30%; overflow-y: auto; }
.note-tag-section::-webkit-scrollbar { width: 4px; }
.note-tag-section::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.note-tag-hint {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--text-soft); cursor: help;
}
.note-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.note-tag-empty { font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.note-tag-chip {
  display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--border);
  background: transparent; color: var(--text-soft); border-radius: 999px;
  padding: 3px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .12s; font-family: inherit; max-width: 100%;
}
.note-tag-chip:hover { border-color: var(--primary); color: var(--primary); }
.note-tag-chip.active { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); }
.note-tag-hash { opacity: .55; margin-right: 1px; }
.note-tag-cnt { font-size: 10.5px; opacity: .7; margin-left: 3px; }

/* 列表卡片上的标签 */
.note-card-tags { display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 100%; }
.note-card-tag { font-size: 11px; color: var(--primary); opacity: .85; white-space: nowrap; }
.note-card-tag.more { color: var(--text-soft); }
.note-card.deleted { opacity: .72; }
.note-card.deleted .note-title { text-decoration: line-through; text-decoration-color: var(--text-soft); }

/* 回收站操作条 */
.note-trash-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; background: color-mix(in srgb, #ef4444 7%, transparent);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.note-trash-tip { font-size: 12px; color: var(--text-soft); }
.mini-btn.danger { color: #d23b53; border-color: color-mix(in srgb, #d23b53 35%, transparent); }
.mini-btn.danger:hover { background: color-mix(in srgb, #d23b53 10%, transparent); border-color: #d23b53; }
.note-del-btn:hover { color: #d23b53; border-color: #d23b53; background: color-mix(in srgb, #d23b53 8%, transparent); }
#noteArchiveBtn.on { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* 回收站/删除用的通用小图标按钮 */
.ic-btn { background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text-soft); padding: 2px 5px; line-height: 1.2; font-size: 13px; transition: all .12s; }
.ic-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.ic-btn.danger:hover { color: #ef4444; border-color: #ef4444; }

/* 导出格式选择 */
.modal-narrow { max-width: 460px; }
.note-export-desc { font-size: 13px; color: var(--text-soft); margin: 0 0 14px; }
.note-export-opts { display: flex; flex-direction: column; gap: 8px; }
.note-export-opt {
  display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  background: var(--surface); transition: all .13s; font-family: inherit;
}
.note-export-opt:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.note-export-ic {
  grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: 8px; background: var(--surface-2);
  font-size: 12px; font-weight: 800; color: var(--text-soft); font-family: "SF Mono", monospace;
}
.note-export-opt:hover .note-export-ic { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.note-export-t { font-size: 13.5px; font-weight: 700; color: var(--text); }
.note-export-s { font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }

.note-sidebar-toggle {
  position: absolute; bottom: 12px; right: 10px; z-index: 11;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px;
  color: var(--text-soft); transition: all .15s; box-shadow: var(--shadow);
}
.note-sidebar-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* ---- 中间：列表区 ---- */
/* 继续收窄：侧栏 180 + 列表 340 作为固定占用，编辑器吃掉剩余全部空间，
   整体再套一层 --surface-2 背景 + 8px gap，三栏像卡片一样浮在背景上。
   注意：这条只作用到笔记页。待办页也用 .note-body 但它就是整块内容区（没有独立
   右编辑列），必须吃满剩余宽度，否则右侧会留出一大片空白 —— 见下方 #todoView 规则。 */
#noteView .note-body {
  flex: 0 0 auto; display: flex; flex-direction: column;
  min-width: 280px; max-width: 340px;
  background: var(--bg); overflow: hidden; border-radius: 12px;
  border: 1px solid var(--border);
}
/* 待办页的 .note-body = 整个内容区，占满侧栏右侧的全部空间 */
#todoView .note-body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  min-width: 0; max-width: none;
  background: transparent; overflow: hidden; border-radius: 0; border: none;
}
.note-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface);
  flex-wrap: wrap; flex-shrink: 0;
}
.note-tb-left { flex-shrink: 0; }
.note-tb-center { flex: 1; min-width: 100px; max-width: 260px; }
.note-tb-right { display: flex; gap: 5px; flex-shrink: 0; align-items: center; }
.note-search {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  padding: 6px 10px; font-size: 12.5px; background: var(--surface-2);
  color: var(--text); outline: none; transition: border-color .15s;
}
.note-search:focus { border-color: var(--primary); }
.note-new-btn { white-space: nowrap; font-size: 12.5px; padding: 6px 12px; }

.note-list-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
.note-list-wrap::-webkit-scrollbar { width: 5px; }
.note-list-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* ---- 右侧：编辑器 ---- */
.note-editor {
  /* 编辑器吃剩余全部空间；列表已固定到 340px，这里不再设上限，
     让宽屏下编辑区成为视觉主角。内部 .note-ed-form 再限制 920px 保证阅读行宽。
     外侧加圆角和阴影，做成右侧的"主卡片"。 */
  flex: 1 1 auto; min-width: 420px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .25s, opacity .2s;
  border-radius: 14px; box-shadow: var(--shadow);
}
.note-ed-form { max-width: 920px; margin: 0 auto; width: 100%; }
.note-editor.closed { flex: 0 0 0; width: 0; min-width: 0; border: none; overflow: hidden; box-shadow: none; }
.note-ed-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  /* 与正文阅读列(.note-ed-form: max-width 920 + margin auto)对齐：标题/操作都落在同一居中列，
     宽屏下「新笔记」标题不再比下方正文更靠左 */
  max-width: 920px; margin: 0 auto; width: 100%;
}
/* 顶栏右侧：分类 / 收藏 / 置顶 / 保存态 / 关闭 */
.note-ed-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
/* 标题输入框在顶栏左侧：去掉卡片边框与底色，做成干净的大标题 */
.note-ed-head .note-ed-title-in-head {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  padding: 6px 2px; font-size: 17px; font-weight: 800; color: var(--text);
  border-radius: 8px; outline: none;
}
.note-ed-head .note-ed-title-in-head:focus { background: var(--surface-2); }
.note-ed-head .note-ed-title-in-head::placeholder { font-weight: 600; color: var(--text-soft); }
.note-ed-close { border: none; background: transparent; cursor: pointer; font-size: 16px; color: var(--text-soft); padding: 6px 8px; border-radius: 6px; transition: all .12s; }
.note-ed-close:hover { background: var(--surface-2); color: var(--text); }
/* 返回按钮：默认（桌面）隐藏，仅移动端内联显示 */
.note-ed-back { display: none; }
/* 更多操作按钮：默认隐藏，仅移动端且有溢出项时由 JS 取消 hidden 显示 */
.note-ed-more { display: none; }
/* 溢出下拉面板：移动端承载放不下的操作项（分类 / 保存态 / 关闭） */
.note-ed-overflow { display: none; }
.note-ed-overflow.open {
  display: flex; flex-direction: column; gap: 6px; position: absolute;
  top: calc(100% + 6px); right: 0; z-index: 60; min-width: 172px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow);
}
/* 下拉里的项：占满宽度、像菜单项一样点按 */
.note-ed-overflow .note-ed-cat-select { width: 100%; box-sizing: border-box; }
.note-ed-overflow .note-ed-chk { width: 100%; justify-content: flex-start; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.note-ed-overflow .note-ed-chk .note-ed-chk-t { display: inline; }
.note-ed-overflow .note-ed-close { width: 100%; justify-content: flex-start; }
.note-ed-overflow .note-save-state { align-self: flex-start; }

.note-ed-body { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px 12px; display: flex; flex-direction: column; }

.note-ed-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 20px; }
.note-ed-empty-ic { font-size: 40px; line-height: 1; opacity: .55; margin-bottom: 6px; }
.note-ed-empty-t { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.note-ed-empty-s { margin: 0 0 14px; font-size: 13px; color: var(--text-soft); line-height: 1.6; }
.note-ed-empty-btn { font-size: 13px; padding: 8px 16px; }

.note-ed-form { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.note-ed-title-input {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: 16px; font-weight: 700; background: var(--surface-2); color: var(--text);
  outline: none; transition: border-color .15s;
}
.note-ed-title-input:focus { border-color: var(--primary); }
.note-ed-title-input::placeholder { font-weight: 500; color: var(--text-soft); }

.note-ed-cat-select {
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px;
  font-size: 12.5px; background: var(--surface-2); color: var(--text); outline: none; cursor: pointer;
}
.note-ed-chk { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.note-ed-chk input { accent-color: var(--primary); }
/* 收藏 / 置顶：只留图标本身（星星 / 图钉），隐藏浏览器原生复选框方块，避免「一个方块 + 一个图标」看起来像两个图标 */
.note-ed-chk input[type="checkbox"] { display: none; }
/* 选中态：星星 / 图钉填充实心（用 currentColor 填充），一眼看出已收藏 / 已置顶 */
.note-ed-chk input[type="checkbox"]:checked + .svg-ic { fill: currentColor; }
.note-ed-chk:has(input[type="checkbox"]:checked) { color: var(--primary); }

.note-ed-content {
  flex: 1 1 auto; min-height: 180px; width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; line-height: 1.75; overflow-y: auto;
  background: var(--surface-2); color: var(--text); outline: none; cursor: text;
  font-family: inherit; transition: border-color .15s; word-break: break-word; text-align: left;
}
.note-ed-content:focus { border-color: var(--primary); }
.note-ed-content:empty::before { content: attr(data-placeholder); color: var(--text-soft); opacity: .65; pointer-events: none; }
/* ���������ã��༭���ڸ��ı�Ԫ��ֱ�ӳ��� */
.note-ed-content h1, .note-ed-content h2, .note-ed-content h3 { font-weight: 800; margin: 8px 0 4px; }
.note-ed-content h1 { font-size: 19px; } .note-ed-content h2 { font-size: 16.5px; } .note-ed-content h3 { font-size: 15px; }
.note-ed-content ul, .note-ed-content ol { padding-left: 22px; margin: 4px 0; }
.note-ed-content li { margin: 2px 0; }
.note-ed-content blockquote { border-left: 3px solid var(--primary); padding: 4px 12px; margin: 6px 0; background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 0 8px 8px 0; }
.note-ed-content pre { background: #1e1e2e; color: #cdd6f4; border-radius: 10px; padding: 12px; overflow-x: auto; margin: 8px 0; }
.note-ed-content code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 13px; font-family: "SF Mono", "Fira Code", monospace; }
.note-ed-content pre code { background: transparent; border: none; color: inherit; padding: 0; font-size: 13px; }
.note-ed-content img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
.note-ed-content a { color: var(--primary); text-decoration: underline; }
.note-ed-content hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.note-ed-content table { border-collapse: collapse; margin: 6px 0; }
.note-ed-content th, .note-ed-content td { border: 1px solid var(--border); padding: 5px 9px; font-size: 13px; }

/* �ʼ� Markdown ���������ο� BimiSeek �༭������ form �Ϸ�����һ�У�խ��������������� */
.note-md-bar { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; flex-shrink: 0; max-width: 920px; margin: 0 auto; width: 100%; }
@media (max-width: 1080px) {
  /* 工具栏在窄屏会横向溢出，右侧渐隐提示可滑动；纯视觉提示，不拦截点击 */
  .note-md-tools { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
}
.note-md-tools { display: flex; align-items: center; gap: 1px; flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; padding-bottom: 2px; }
.note-md-tools::-webkit-scrollbar { height: 4px; }
.note-md-tools::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.md-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 28px; padding: 0 5px; flex-shrink: 0; border: 1px solid transparent; background: transparent; border-radius: 7px; cursor: pointer; color: var(--text-soft); font-size: 12.5px; line-height: 1; transition: background .12s, color .12s, border-color .12s, transform .08s; user-select: none; }
.md-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.md-btn:active { transform: scale(.95); }
/* 光标落在加粗/标题/列表里时按钮点亮，点了到底生效没有一眼能看出来 */
.md-btn.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.md-btn b, .md-btn i, .md-btn s { font-style: normal; text-decoration: none; font-weight: 800; }
.md-btn.md-bold b { font-weight: 800; } .md-btn.md-italic i { font-style: italic; font-weight: 600; } .md-btn.md-strike s { text-decoration: line-through; font-weight: 600; }
.md-btn.md-underline u { text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.md-btn.md-code { font-family: "SF Mono", "Fira Code", monospace; font-size: 12px; }
.md-btn.md-list { font-size: 14px; font-weight: 700; }
.md-btn.md-h { font-weight: 800; font-size: 11.5px; letter-spacing: -.2px; }
.md-btn.md-align { font-size: 15px; font-weight: 700; }
.md-btn.md-history { font-size: 15px; font-weight: 700; }
/* 撤销/重做没东西可撤时真禁用（跟 bimiseek 一致），不是靠样式假装 */
.md-btn:disabled, .md-btn[disabled] { opacity: .32; cursor: not-allowed; pointer-events: none; }
.md-sep { width: 1px; height: 14px; background: var(--border); margin: 0 3px; opacity: .7; flex-shrink: 0; }

/* 笔记页统一线性图标（复用站点 .svg-ic），图标与文字同行、居中、尺寸收敛 */
.note-md-tools .svg-ic { width: 16px; height: 16px; }
.note-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
.note-ed-close { display: inline-flex; align-items: center; justify-content: center; }
.note-tb-right .mini-btn, .note-new-btn, .note-ed-empty-btn, .md-menu-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.note-ed-chk .svg-ic { width: 14px; height: 14px; }
.note-ed-empty-ic .svg-ic { width: 42px; height: 42px; opacity: .55; }


/* �ײ�ͳ�� + ����״̬ */
.note-stats { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); flex-wrap: wrap; }
.note-stat { white-space: nowrap; }
.note-stat-sep { opacity: .5; }
.note-save-state { flex-shrink: 0; margin-left: 2px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; transition: opacity .15s, background .15s, color .15s; }
.note-save-state[data-state="idle"] { opacity: 0; }
.note-save-state[data-state="dirty"] { color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); }
.note-save-state[data-state="saving"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.note-save-state[data-state="saved"] { color: #047857; background: color-mix(in srgb, #10b981 14%, transparent); }

.note-ed-bar { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; margin-top: 2px; padding-top: 2px; gap: 8px; flex-wrap: wrap; }
.note-ed-acts { display: flex; gap: 8px; align-items: center; }
.note-ed-acts .mini-btn { color: var(--text-soft); }
.note-ed-acts .mini-btn:hover { color: #d23b53; border-color: #d23b53; background: color-mix(in srgb, #d23b53 8%, transparent); }
/* ---- 笔记卡片（列表项�? ---- */
.note-list { display: flex; flex-direction: column; gap: 7px; }
.note-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.note-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.note-card.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.note-card.pinned { border-left: 3px solid var(--primary); }
.note-card.fav::before { content: '\2605'; font-size: 11px; margin-right: 4px; }
.note-card-head { display: flex; align-items: center; gap: 5px; }
.note-title { font-weight: 700; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.note-preview { font-size: 12px; color: var(--text-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-meta { display: flex; align-items: center; gap: 6px; }
.note-info { flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); flex-shrink: 0; }
.note-acts { display: flex; gap: 3px; flex-shrink: 0; }
/* �ʼǿ��ö�/�ղذ�ť��SVG ���ͼ�꣬������������ */
.ic-pin-btn, .ic-fav-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; color: var(--text-soft); }
.ic-pin-btn:hover, .ic-fav-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.ic-pin-btn.on, .ic-fav-btn.on { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.ic-pin-ico, .ic-fav-ico { width: 14px; height: 14px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.ic-pin-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 12V4l1-1V2H7v1l1 1v8l-2 3v2h5v6l1 1 1-1v-6h5v-2l-2-3z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 12V4l1-1V2H7v1l1 1v8l-2 3v2h5v6l1 1 1-1v-6h5v-2l-2-3z'/></svg>"); }
.ic-fav-ico { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>"); }
.char-count { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-soft); }

/* 中小屏（861–1100）：列表再让一点，保证编辑器下限（仅笔记页） */
@media (min-width: 861px) and (max-width: 1100px) {
  #noteView .note-body { min-width: 260px; max-width: 300px; }
  .note-editor { min-width: 320px; }
}

/* 移动端：笔记全屏布局 */
@media (max-width: 860px) {
  .note-app, #noteView.note-app { flex-direction: column; height: auto; position: relative; top: auto; min-height: calc(100vh - var(--topbar-height, 56px)); gap: 0; padding: 0; background: var(--bg); }
  /* 移动端是"列表页 / 编辑页"两屏切换，列表占满整宽，不再受桌面端的 340~560 限制 */
  #noteView .note-body, #todoView .note-body { min-width: 0; max-width: none; border-radius: 0; border: none; }
  /* 移动端：.note-app 仍是 fixed 有界高度，但 flex 方向为 column，列表列需 flex:1 撑满列高，
     否则 .note-list-wrap(flex:1) 无界被 overflow:hidden 裁切、列表无法滑动（超出屏幕的笔记看不到） */
  #noteView .note-body { flex: 1 1 auto; min-height: 0; }
  .note-sidebar {
    position: fixed; left: 0; top: var(--topbar-height, 56px); bottom: 0; z-index: 50;
    width: 260px; box-shadow: 4px 0 20px rgba(0,0,0,.15);
    transform: translateX(-100%); transition: transform .25s;
    border-radius: 0; border: none;
  }
  .note-sidebar.open { transform: translateX(0); }
  .note-sidebar.collapsed { width: 260px; } /* 移动端用 transform 控制显隐 */
  .note-sb-backdrop {
    display: block; position: fixed; inset: var(--topbar-height, 56px) 0 0 0;
    background: rgba(0,0,0,.4); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .note-sidebar.open ~ .note-sb-backdrop { opacity: 1; pointer-events: auto; }
  /* 抽屉内的导航/分类点击后自动收起（仅移动端生效，桌面端 .open 不会存在） */
  .note-sidebar.open .note-nav-tab, .note-sidebar.open .note-cat-item { cursor: pointer; }
  .note-sidebar-toggle { display: none; }
  .note-editor {
    position: fixed; right: 0; top: var(--topbar-height, 56px); bottom: 0; z-index: 50;
    width: 100%; max-width: 100%; min-width: 0; flex: none; box-shadow: -4px 0 20px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .25s;
    border-radius: 0; border: none;
  }
  .note-editor.open { transform: translateX(0); }
  .note-editor.closed { width: 100%; box-shadow: none; } /* 移动端用 transform 控制显隐 */
  /* 移动端加一个侧栏开关按钮到工具栏 */
  .note-mobile-sb-btn { display: inline-flex !important; }
  .note-toolbar { padding: 8px 12px; }
  .note-tb-center { max-width: none; flex: 1; }
  .note-list-wrap { padding: 10px 12px; }
  /* 移动端编辑器顶栏：返回 + 大标题（内联不独占一行）+ 右侧操作（收藏/置顶/更多）同行，仿 BimiSeek */
  .note-ed-head {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  .note-ed-back {
    display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-soft); font-size: 14px; font-weight: 700; font-family: inherit;
    padding: 6px 6px 6px 2px; border-radius: 8px; transition: background .12s, color .12s;
  }
  .note-ed-back:hover { background: var(--surface-2); color: var(--text); }
  .note-ed-back .svg-ic { width: 18px; height: 18px; }
  .note-ed-head .note-ed-title-in-head {
    flex: 1 1 auto; min-width: 0; width: auto;
    font-size: 24px; font-weight: 800; line-height: 1.28;
    padding: 4px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .note-ed-head-right {
    flex: 0 0 auto; width: auto; flex-wrap: nowrap; justify-content: flex-end;
    gap: 6px; position: relative;
  }
  /* 移动端顶栏右侧只留「分类 + 收藏」：图标化、去掉多余内边距，把宽度让给标题 */
  .note-ed-head-right .note-ed-cat-select { padding: 5px 6px; font-size: 12.5px; }
  .note-ed-chk { padding: 4px; }
  /* 移动端收藏/置顶只留图标省空间；下拉里再把文字显示出来 */
  .note-ed-chk-t { display: none; }
  .note-ed-chk .svg-ic { width: 22px; height: 22px; }
  /* 移动端「更多」按钮：有溢出项时由 JS 取消 hidden 显示 */
  .ed-mobile .note-ed-more:not([hidden]) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
    color: var(--text-soft); cursor: pointer;
  }
  .ed-mobile .note-ed-more:not([hidden]):active { background: var(--surface); }
  /* 编辑器工具栏：两行全部展示，不要横向滑动（去掉遮罩与 overflow-x） */
  .note-md-bar { flex-wrap: wrap; align-items: flex-start; gap: 6px; padding-bottom: 6px; }
  .note-md-tools {
    flex: 1 1 100%; flex-wrap: wrap; overflow: visible;
    -webkit-mask-image: none; mask-image: none; row-gap: 6px; column-gap: 2px;
  }
  .note-md-tools .md-btn { min-width: 30px; height: 32px; }
}

/* ============ 我的首页：待�?/笔记入口 ============ */
.my-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 2px; }
.entry-link {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: var(--text); cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.entry-link:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.entry-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.entry-ico-todo { background: linear-gradient(135deg, #22c55e, #16a34a); }
.entry-ico-note { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.entry-ico-inner { font-weight: 900; font-size: 20px; line-height: 1; }
.entry-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.entry-txt { font-weight: 800; font-size: 15px; }
.entry-meta { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-bar-wrap { flex-shrink: 0; width: 64px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.entry-bar { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width .4s ease; }
.entry-arrow { color: var(--text-soft); font-size: 15px; flex-shrink: 0; }
@media (max-width: 520px) { .my-entry { grid-template-columns: 1fr; } .entry-bar-wrap { width: 80px; } }

/* ============ 账号信息�? ============ */
.acc-info { font-size: 12.5px; color: var(--text-soft); margin: 4px 0 10px; }


/* ============ 优惠券页�? ============ */
.coupon-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: 4px 0 24px;
}
.coupon-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.coupon-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.coupon-thumb { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--surface-2); }
.coupon-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.coupon-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.coupon-platform {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
}
.coupon-cat {
  font-size: 11.5px; font-weight: 600; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; line-height: 1.4;
}
.coupon-title { font-weight: 700; font-size: 15px; color: var(--text); line-height: 1.35; }
.coupon-desc {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.coupon-valid { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.coupon-claim {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer; transition: filter .12s, transform .12s;
}
.coupon-claim:hover { filter: brightness(1.06); }
.coupon-claim:active { transform: scale(.98); }
.coupon-claim.disabled { background: var(--surface-2); color: var(--text-soft); cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--border); }
.coupon-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.coupon-tab {
  font-size: 13px; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.coupon-tab:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.coupon-tab.active { color: #fff; background: var(--primary); border-color: var(--primary); }
@media (max-width: 640px) {
  .coupon-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .coupon-thumb { height: 96px; }
  .coupon-title { font-size: 14px; }
  .coupon-tab { padding: 6px 12px; font-size: 12.5px; }
}

/* ============ ��ҳС���������ο���¹��ǩ�� ============ */
.widget-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 1200px; margin: 0 auto 22px; padding: 0 16px;
}
.widget-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; min-height: 96px;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.widget-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.widget-card-head { display: flex; align-items: center; gap: 8px; }
.widget-card-ic {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
}
.widget-card-title { font-weight: 800; font-size: 14.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-card-sub { font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-card-cal { display: flex; align-items: center; gap: 12px; }
.widget-cal-date {
  display: flex; flex-direction: column; align-items: center; min-width: 56px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 10px; padding: 8px 10px;
}
.widget-cal-day { font-size: 24px; font-weight: 900; line-height: 1; color: var(--primary); }
.widget-cal-month { font-size: 11px; color: var(--text-soft); margin-top: 2px; }
.widget-cal-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.widget-cal-week { font-size: 12px; font-weight: 700; }
.widget-cal-lunar { font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-cal-dayofyear { font-size: 10.5px; color: var(--text-soft); }
.widget-card-hot-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.widget-hot-item {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text); text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.widget-hot-item:hover { color: var(--primary); }
.widget-hot-rank {
  display: inline-block; width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 5px; font-size: 10.5px; font-weight: 800;
  background: var(--surface-2); color: var(--text-soft); flex-shrink: 0;
}
.widget-hot-rank.top { background: var(--primary); color: #fff; }
.widget-card-my-stat { display: flex; align-items: baseline; gap: 6px; }
.widget-card-my-num { font-size: 22px; font-weight: 900; color: var(--primary); line-height: 1; }
.widget-card-my-unit { font-size: 11.5px; color: var(--text-soft); }
.widget-card-link-arrow { margin-left: auto; color: var(--text-soft); font-size: 14px; flex-shrink: 0; }
.widget-card:hover .widget-card-link-arrow { color: var(--primary); }
@media (max-width: 768px) {
  .widget-row { grid-template-columns: repeat(2, 1fr); }
  .widget-card { min-height: 84px; padding: 12px; }
}
@media (max-width: 420px) {
  .widget-row { gap: 8px; padding: 0 12px; }
}

/* ============ �ҵ���ҳ��������ʼҳ������� + ������壩 ============ */
.my-home-view { position: relative; max-width: none; margin: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
/* �����б�����linglu �����;�����Σ�����������ͼƬ�� */
.my-home-view { background:
  radial-gradient(1300px 560px at 12% -8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
  radial-gradient(1100px 520px at 100% 0%, color-mix(in srgb, var(--primary-2) 16%, transparent), transparent 55%),
  radial-gradient(900px 600px at 50% 120%, color-mix(in srgb, var(--primary-2) 12%, transparent), transparent 60%);
}
/* PC ר��װ�β㣺������������ + ģ����ɫ��ߣ��� ��1024 ��ʾ���� deco ���ݻ����� */
.my-home-deco { display: none; }
@media (min-width: 1024px) {
  .my-home-deco {
    display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background-image:
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--primary) 4%, transparent) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--primary) 4%, transparent) 0 1px, transparent 1px 28px);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 35%, transparent 80%);
  }
  .my-home-deco::before, .my-home-deco::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
  }
  .my-home-deco::before { width: 420px; height: 420px; top: -120px; right: -80px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%); }
  .my-home-deco::after { width: 360px; height: 360px; bottom: 40px; left: -100px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-2) 38%, transparent), transparent 70%); }
}
/* �б�ֽʱ����ԭ��ɫװ�ι�ߣ�������ͼƬ/�����ֽ��ܣ����� linglu ʽ�ɾ� */
body.route-my .my-home-view.has-wallpaper .my-home-deco { display: none; }
/* dark wallpaper readability: flip my-home-view to light-on-dark theming */
.my-home-view.has-wallpaper-dark {
  --surface: rgba(30, 33, 43, 0.74);
  --surface-2: rgba(20, 23, 33, 0.62);
  --text: #f2f4fa;
  --text-soft: #b9bfd1;
  --border: rgba(255, 255, 255, 0.16);
  --primary: #60a5fa;
  --primary-2: #93c5fd;
}
/* frosted chrome over dark wallpaper for legibility */
.my-home-view.has-wallpaper-dark .my-quick-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
.my-home-view.has-wallpaper-dark .my-quick-add,
.my-home-view.has-wallpaper-dark .my-quick-empty { border-color: rgba(255,255,255,0.22); color: #d7dcec; }
.my-home-view.has-wallpaper-dark .my-search { border-color: rgba(255,255,255,0.22); }
.my-home-view.has-wallpaper-dark .my-sidebar { background: rgba(20, 22, 30, 0.62); }
.my-start { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-height, 120px)); }

/* ȫ��������ʼҳ��#/my ·��������ȫ�ֶ���/���ർ��/�����/ҳ�ţ��á��ҵ���ҳ����Ϊ����ʽ������ʼҳ */
body.route-my .topbar,
body.route-my .cat-nav,
body.route-my .site-ad-bar,
body.route-my .footer { display: none !important; }
/* 子页面（天气/日历/热搜/待办/笔记）：顶栏只保留品牌行，隐藏首页 Hero + 搜索区，
   否则这几页一进来就被顶下去一整块，滚动半天才看到内容 */
body.route-plain .topbar-search { display: none !important; }
body.route-plain .topbar { border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent); }
/* 详情页：隐藏首页大标语 banner（"你的在线桌面随处可及"+日期天气），仅详情路由生效，
   分类页 #/sites 等保持原样；搜索框与磁吸条仍保留 */
body.route-detail .home-hero { display: none !important; }
/* 首屏防闪兜底：详情/子页面提前隐藏分类导航（与 app.js showView 对齐） */
body.route-detail .cat-nav,
body.route-plain .cat-nav { display: none !important; }
body.route-my .my-home-view { padding-top: 0; padding-bottom: 0; }
body.route-my .my-start { min-height: 100vh; }
body.route-my .my-sidebar { top: 0; }
/* 壁纸固定背景层：用真实 <img> 承载，object-fit:cover 按设备像素清晰渲染（规避 CSS background 高分屏发软） */
.wp-fixed-bg { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; }
.wp-fixed-bg.wp-on { display: block; }
.wp-fixed-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: none; }
/* 轻量顶部遮罩：仅压暗顶栏区域保证文字可读，整体壁纸保持明亮（对标 bimiseek） */
.wp-fixed-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 9%, rgba(0,0,0,0) 20%);
}
body.has-wallpaper-dark .wp-fixed-bg::after {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 11%, rgba(0,0,0,0) 24%);
}
/* 内容层抬到背景层之上 */
.my-home-view > .my-topbar,
.my-home-view > .my-start { position: relative; z-index: 1; }
/* ��ʼҳ Hero���ʺ� + ���д�������վ��/վ�� + �����л���������ʱ�붥����һ������������ͽ���������Ӳ�ָ��� */
.my-hero {
  position: static;
  max-width: none; margin: 0 auto 18px; padding: 56px 4px 16px;
  text-align: center;
}
/* 我的首页 Hero 搜索框复用顶栏 .search-box：极简搜索门户风格，收窄到 760px 聚焦焦点 */
.my-hero .search-box { max-width: 760px; position: relative; z-index: 1000; } /* 建独立层叠上下文：热搜下拉不被下方常用网址/组件卡片与便签层（z-index:60）遮挡 */
.my-hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -18px; z-index: -1; pointer-events: none;
  background: transparent;
}
.my-search { max-width: 920px; margin-left: auto; margin-right: auto; }
/* 问候 banner 收进 Hero 后这里不重复占位（原大标题问候已融入搜索框眉行情境行） */
#mbHead { display: none; }
.my-search { display: flex; align-items: center; gap: 10px; background: transparent; border: 1.5px solid color-mix(in srgb, var(--text-soft) 25%, var(--border)); border-radius: 999px; padding: 10px 10px 10px 18px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.my-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.my-search-scope { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.mscope { border: none; background: transparent; color: var(--text-soft); font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .14s; }
.mscope.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent); }
.my-search-ic { font-size: 15px; opacity: .6; flex-shrink: 0; }
.my-search-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 16px; color: var(--text); outline: none; padding: 7px 2px; }
.my-engine-wrap { position: relative; flex-shrink: 0; }
.my-engine-trigger { width: 38px; height: 38px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text-soft); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s; position: relative; }
.my-engine-trigger:hover, .my-engine-trigger.open { background: var(--primary); color: #fff; }
/* ������ͷ��ָʾ���л��������� */
.my-engine-trigger::after {
  content: ''; position: absolute; bottom: 7px; right: 8px; pointer-events: none;
  width: 0; height: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4.5px solid currentColor;
  opacity: .75;
}
.eng-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.my-engine-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 180px; display: flex; flex-direction: column; gap: 2px; max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.my-engine-dropdown .eng-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--text); text-align: left; }
.my-engine-dropdown .eng-item:hover { background: var(--surface-2); }
.my-engine-dropdown .eng-item.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-weight: 700; }
/* 我的首页：「站外」位置的大类下拉 */
.my-cat-wrap { position: relative; display: inline-flex; align-items: center; }
.my-cat-trigger { display: inline-flex; align-items: center; }
.my-cat-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; min-width: 160px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: min(56vh, 440px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* 无 SVG 图标时的品牌色兜底：纯色圆角底 + 白字，与 iconSvg 观感一致 */
.eng-ic { font-size: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 5px; font-weight: 800; line-height: 1; }
.st-tab .eng-ic { font-size: 11px; min-width: 15px; height: 15px; }
.eng-item .eng-ic { font-size: 11.5px; min-width: 18px; height: 18px; }
.my-search-btn { flex-shrink: 0; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 18px; cursor: pointer; transition: transform .08s, box-shadow .14s; }
.my-search-btn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent); }
.my-search-btn:active { transform: scale(.97); }
.eng-ic-img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
/* .eng-ic 的完整定义见上文「品牌色兜底」段（含 emoji 大类图标 .eng-ic-cat） */

/* ��������ϸ���� linglu �� ��͸����ɫ���� + ��ɫ outline ͼ�� */
/* �������PC �˴Ӷ����׹�ͨ��խ�������� + ��ɫ outline ͼ�� + ����ָʾ */
.my-sidebar {
  width: 58px; flex-shrink: 0; position: sticky; top: var(--topbar-height, 120px);
  align-self: stretch; min-height: calc(100vh - var(--topbar-height, 120px));
  max-height: calc(100vh - var(--topbar-height, 120px)); overflow-y: auto;
  padding: 14px 0 16px; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 30;
  background: rgba(26, 26, 30, 0.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05), 8px 0 22px rgba(0, 0, 0, 0.18);
}
.my-sidebar::-webkit-scrollbar { width: 0; }
/* Logo������Բ�� */
/* 侧栏 Logo：deskzx 品牌图标（替代原青绿圆形 M，全站品牌统一） */
.my-side-logo {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(62, 111, 176, 0.45);
  margin-bottom: 10px; transition: transform .14s, box-shadow .14s;
}
.my-side-logo img { width: 100%; height: 100%; display: block; border-radius: 10px; }
.my-side-logo:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 6px 18px rgba(62, 111, 176, 0.6); }
.my-side-logo.active { box-shadow: 0 0 0 2px rgba(62, 111, 176, 0.7), 0 6px 18px rgba(62, 111, 176, 0.55); }
/* �ָ� */
.my-side-divider { width: 28px; height: 1px; background: rgba(255, 255, 255, 0.12); margin: 8px 0; }
/* ������ */
.my-side-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; }
/* �����ͼ�� + С�֣���ֱ����ɫ outline ͼ�� + ���֣����������ɫָʾ�� */
.my-side-item {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px; border: none; background: transparent; position: relative;
  color: rgba(255, 255, 255, 0.62); border-radius: 12px;
  cursor: pointer; text-decoration: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  transition: background .15s, color .15s, transform .08s;
}
.my-side-item::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #2dd4bf;
  transition: height .18s ease;
}
.my-side-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.my-side-item:active { transform: scale(.95); }
.my-side-item.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.my-side-item.active::before { height: 22px; }
/* ��ɫ outline ͼ�� */
.my-side-svg { width: 21px; height: 21px; display: block; opacity: .82; transition: opacity .15s; }
.my-side-item:hover .my-side-svg, .my-side-item.active .my-side-svg { opacity: 1; }
.my-side-lb { white-space: nowrap; line-height: 1.1; }
.my-side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* ��������أ��ֻ��˲������֣����������Ѳ�����ʼҳ������ .my-tb-toggle�� */
.my-side-backdrop { display: none; }
/* ���ݣ��½����ఴť�������ڵײ����ҵķ��ࡹ���� */
.my-side-addcat { margin-top: 8px; }

/* ������������� */
.my-board { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 20px 22px 48px; }
@media (min-width: 1024px) {
  .my-board { max-width: 1440px; margin: 0 auto; flex: 0 1 1440px; padding: 24px 32px 56px; }
}
.my-board-head { margin-bottom: 16px; }
/* PC �˹�������ȥ����ർ���󣬰ѡ�������ת + ������� / �ҵ��ύ�����������Ĭ�����أ��� PC ��ʾ�� */
.my-pc-tools { display: none; align-items: center; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.my-pc-nav { display: inline-flex; align-items: center; gap: 4px; }
.my-pc-nav-link {
  padding: 7px 13px; border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--text-soft); text-decoration: none; transition: background .14s, color .14s;
}
.my-pc-nav-link:hover { background: var(--surface-2); color: var(--text); }
.my-pc-nav-link.active { background: var(--primary); color: #fff; }
.my-pc-tools-sep { width: 1px; height: 22px; background: var(--border); }
.my-pc-tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 11px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: background .14s, border-color .14s, transform .08s;
}
.my-pc-tool-btn:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); }
.my-pc-tool-btn:active { transform: scale(.97); }

.my-topbar {
  position: relative; z-index: 60; width: 100%;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}
.my-topbar-inner {
  max-width: 1440px; margin: 0 auto; min-height: 50px;
  display: flex; align-items: center; gap: 10px; padding: 6px 18px;
}
/* 桌面：左侧分类竖栏是 fixed 通栏（72px，压在顶栏之上），顶栏内容必须从竖栏右侧起排，
   否则品牌 logo 和「网站/AI/待办/笔记」会被竖栏盖住一半 */
@media (min-width: 641px) {
  body.route-my .my-topbar-inner { padding-left: 88px; }
}
/* 移动端导航开关：直接使用品牌图标（替代原网格图标），点击展开抽屉导航 */
.my-tb-toggle {
  display: none; width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 9px;
  background: transparent; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.my-tb-toggle:active { transform: scale(.94); }
.my-tb-toggle img { width: 100%; height: 100%; display: block; border-radius: 9px; box-shadow: 0 2px 8px rgba(62, 111, 176, .35); }
.my-tb-brand {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.my-tb-brand img { width: 100%; height: 100%; display: block; border-radius: 9px; box-shadow: 0 2px 8px rgba(62, 111, 176, .35); }
.my-tb-nav {
  display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.my-tb-nav::-webkit-scrollbar { display: none; }
.my-tb-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 13.5px; font-weight: 650; letter-spacing: .2px; text-decoration: none; color: var(--text-soft);
  transition: color .14s, background .14s;
}
.my-tb-link .my-tb-ic { display: inline-flex; align-items: center; line-height: 1; }
.my-tb-link .my-tb-ic .svg-ic { width: 14.5px; height: 14.5px; }
.my-tb-link:hover { color: var(--primary); background: transparent; }
.my-tb-link.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); box-shadow: none; }
.my-tb-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }
.my-tb-icon {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 34px; padding: 0 10px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: color .14s, background .14s;
}
.my-tb-icon:hover { background: transparent; color: var(--primary); }
.my-tb-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.my-tb-icon .my-tb-ic .svg-ic { width: 14.5px; height: 14.5px; }

/* Hero 情境行：农历 · 天气 · 临近节日（替代原「今日概览」横条，轻量不占独立区块） */
/* 搜索框眉行（与 .my-search 同宽 920px 居中）：左情境文字 + 右「＋ 收藏」入口 */
.my-hero-subrow {
  max-width: 920px; margin: -6px auto 12px; padding: 0 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.my-hero-sub {
  font-size: 12.5px; color: var(--text-soft);
  letter-spacing: .01em; line-height: 1.5; text-align: left;
}
/* 网站首页搜索区顶行：热搜 / 省钱 快捷导航按钮组 */
.hero-nav { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.hn-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text); font-size: 12.5px; font-weight: 800; cursor: pointer;
  line-height: 1.2; transition: background .15s, box-shadow .15s, transform .12s, color .15s, border-color .15s;
}
.hn-btn .svg-ic { width: 15px; height: 15px; opacity: .85; transition: opacity .15s; }
.hn-btn:hover { transform: translateY(-1px); }
.hn-btn:hover .svg-ic { opacity: 1; }
.hn-btn:active { transform: scale(.96); }
/* 热搜：火焰红 */
.hn-hot { color: #e8590c; border-color: color-mix(in srgb, #e8590c 28%, var(--border)); background: color-mix(in srgb, #e8590c 6%, var(--surface)); }
.hn-hot:hover { background: color-mix(in srgb, #e8590c 14%, var(--surface)); border-color: color-mix(in srgb, #e8590c 45%, var(--border)); box-shadow: 0 3px 10px color-mix(in srgb, #e8590c 16%, transparent); color: #d04a08; }
/* 省钱：财富绿 */
.hn-save { color: #10b981; border-color: color-mix(in srgb, #10b981 28%, var(--border)); background: color-mix(in srgb, #10b981 6%, var(--surface)); }
.hn-save:hover { background: color-mix(in srgb, #10b981 14%, var(--surface)); border-color: color-mix(in srgb, #10b981 45%, var(--border)); box-shadow: 0 3px 10px color-mix(in srgb, #10b981 16%, transparent); color: #059669; }
/* v2 新增：快速访问是「站长默认推送位」，用徽章明确标记，避免与用户收藏混�? */
.my-quick-head { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.my-quick-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2px;
  padding: 3px 9px; border-radius: 999px; cursor: default;
  color: #fff; background: linear-gradient(135deg, var(--accent-amber), #fb923c);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-amber) 40%, transparent);
}
.my-quick-head .mqh-hint { font-size: 11.5px; color: var(--text-soft); }
.my-quick {
  max-width: 920px; margin: 8px auto 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 0;
}
.my-quick-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .08s, box-shadow .14s;
  max-width: 200px;
  user-select: none;
}
.my-quick-pill:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.my-quick-pill:active { transform: scale(.97); }
.my-quick-pill .qpic { width: 28px; height: 28px; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.my-quick-pill .qpic .fav-letter, .my-quick-pill .qpic img { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.my-quick-pill .qpname { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.my-quick-pill .qpclose {
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: transparent; color: var(--text-soft);
  font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .14s, background .14s, color .14s;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.my-quick-pill:hover .qpclose { opacity: .55; }
.my-quick-pill .qpclose:hover { opacity: 1; background: rgba(0,0,0,.08); color: var(--text); }
/* 快捷推荐位徽章：推荐 / VPN（外网） */
.my-quick-pill .qpic-emoji { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
/* 推荐位图标：emoji 跨平台渲染成豆腐块，统一改为内联 SVG 描边图标 */
.my-quick-pill .qpic-svg { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--primary) 12%, transparent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.my-quick-pill .qpic-svg svg { width: 16px; height: 16px; color: color-mix(in srgb, var(--primary) 80%, var(--text)); }
.my-quick-pill.is-recommended { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.my-quick-pill .qp-badge { font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; flex-shrink: 0; }
.my-quick-pill .qp-badge.qp-rec { color: #fff; background: var(--primary); }
.my-quick-pill .qp-badge.qp-vpn { color: #b45309; background: #fef3c7; border: 1px solid #fde68a; }
.my-home-view.has-wallpaper-dark .my-quick-pill .qp-badge.qp-vpn { color: #fcd34d; background: rgba(254,243,199,.16); border-color: rgba(253,230,138,.3); }
.my-quick-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  transition: border-color .14s, color .14s;
  font-family: inherit;
}
.my-quick-add:hover { border-color: var(--primary); color: var(--primary); }
.my-quick-empty {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 20px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  transition: border-color .14s, color .14s, background .14s;
  font-family: inherit;
  margin: 2px auto;
}
.my-quick-empty:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }

/* ���ٷ��ʣ����ӵ��� */
.quick-picker .quick-picker-search {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  margin-bottom: 10px;
  box-sizing: border-box;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.quick-picker .quick-picker-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.quick-picker-list { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.quick-picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
  transition: background .12s;
}
.quick-picker-row:hover { background: var(--surface-2); }
.quick-picker-row .qpr-ic { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-picker-row .qpr-ic .fav-letter, .quick-picker-row .qpr-ic img { width: 36px; height: 36px; border-radius: 9px; font-size: 14px; }
.quick-picker-row .qpr-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.quick-picker-row .qpr-name { font-size: 14px; font-weight: 700; color: var(--text); }
.quick-picker-row .qpr-url { font-size: 12px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-picker-empty { text-align: center; color: var(--text-soft); padding: 30px 10px; font-size: 13px; }

/* �ƶ��ˣ����ٷ��ʽ�����ˮƽ���������⻻�д��� */
@media (max-width: 768px) {
  .my-quick { overflow-x: auto; flex-wrap: nowrap; padding: 4px 2px 8px; margin-top: 6px; scrollbar-width: thin; }
  .my-quick-pill { flex-shrink: 0; }
  .my-quick-add, .my-quick-empty { flex-shrink: 0; }
}

/* PC �ˣ��� ������ർ���� �� ȥ�������ʺ� banner �� ��ʾ���������� */
@media (min-width: 769px) {
  .my-board-head { display: none; }
  .my-sidebar { display: none; }
  .my-pc-tools { display: flex; }
}
.mb-greet { font-size: 22px; font-weight: 900; }
.mb-sub { color: var(--text-soft); font-size: 13.5px; margin-top: 4px; }
/* ===== 卡片组件网格：12 列吸附式自由布局 =====
   卡片按 grid-column/grid-row 显式定位，可拖到任意格（可留白、可并排），
   右下角把手拖拽改变占几列几行。移动端降级为单列流式。 */
.my-widget-grid {
  position: relative;
  display: grid;
  /* 严格对齐灵鹿：12 列固定 70px 单元格，列间距 30px / 行间距 12px */
  grid-template-columns: repeat(12, 70px);
  grid-auto-rows: 70px;
  gap: 12px 30px;
  justify-content: center;
}
/* 窄屏：改为流体小单元格，避免固定 1170px 溢出 */
@media (max-width: 1240px) {
  .my-widget-grid { grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 10px; justify-content: stretch; }
}

/* ============================================================
   灵鹿式等比统一网格（第十一輪）：网址 + 组件同一网格、共享拖拽、自动对齐
   - 70px 基础单元（与 nav.linglu.pro 一致）；网址占 1×1，组件占多格（整数倍）→ 比例一致；
   - grid-auto-flow: row dense 让拖拽/缩放后自动回流填空、自动对齐；
   - --ug-cols 按视口宽度响应式（镜像灵鹿断点）。
   ============================================================ */
:root { --ug-cols: 14; }
@media (max-width: 1800px) { :root { --ug-cols: 12; } }
@media (max-width: 1400px) { :root { --ug-cols: 10; } }
@media (max-width: 1100px) { :root { --ug-cols: 8; } }
@media (max-width: 860px)  { :root { --ug-cols: 6; } }
@media (max-width: 640px)  { :root { --ug-cols: 4; } }
@media (max-width: 400px)  { :root { --ug-cols: 3; } }

.my-unified-grid, .my-cat-unified-grid {
  display: grid;
  grid-template-columns: repeat(var(--ug-cols), 70px);
  grid-auto-rows: 90px;
  gap: 12px 30px;
  justify-content: center;
  align-content: start;
  grid-auto-flow: row dense;
}
@media (max-width: 860px)  { .my-unified-grid, .my-cat-unified-grid { gap: 12px 18px; } }
@media (max-width: 640px)  { .my-unified-grid, .my-cat-unified-grid { gap: 10px 12px; justify-content: flex-start; } }

/* 网址磁贴：填满 70×90 单元（图标 64×64 / 圆角14，名称在下方）—— 贴合灵鹿 */
.my-unified-grid .icon-card, .my-cat-unified-grid .icon-card {
  width: auto; align-self: center; justify-self: center;
}
.my-unified-grid .icon-card-icon, .my-cat-unified-grid .icon-card-icon {
  width: 64px; height: 64px; border-radius: 14px; font-size: 24px;
  border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.my-unified-grid .icon-card-name, .my-cat-unified-grid .icon-card-name {
  font-size: 12px; font-weight: 700; margin-top: 2px;
}
/* 组件磁贴：按数据 span 自动流排（不再写起点格），比例 = 70px 整数倍 */
.my-unified-grid .my-widget, .my-cat-unified-grid .my-widget {
  grid-column: span var(--cw, 2);
  grid-row: span var(--ch, 2);
  min-width: 0; min-height: 0;
}
/* 添加组件占位磁贴（与组件同尺寸占位；编辑态才显示） */
.my-widget-add {
  grid-column: span 2; grid-row: span 2;
  border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--border); background: var(--surface); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; transition: all .15s ease;
}
.my-widget-add:hover { color: var(--primary); border-color: var(--primary); }

/* 统一网格拖拽态（一套 Sortable 覆盖书签 + 组件） */
.my-unified-grid.uni-dragging .icon-card, .my-cat-unified-grid.uni-dragging .icon-card,
.my-unified-grid.uni-dragging .my-widget, .my-cat-unified-grid.uni-dragging .my-widget { transition: none !important; }
.my-unified-grid .icon-card.sortable-ghost, .my-cat-unified-grid .icon-card.sortable-ghost,
.my-unified-grid .my-widget.sortable-ghost, .my-cat-unified-grid .my-widget.sortable-ghost { opacity: .3; }
.my-unified-grid .my-widget.sortable-chosen, .my-cat-unified-grid .my-widget.sortable-chosen { box-shadow: 0 22px 50px rgba(15, 23, 42, .26), 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent) !important; }

/* ============ 高级实色组件卡（参照 HyperOS 天气/日历组件重设计） ============ */
/* date / weather 两类组件走「实色满铺」视觉：内容即卡片，标题自明，操作按钮悬停浮现 */
.my-widget.wg-solid { padding: 0; border-color: transparent; box-shadow: 0 6px 22px rgba(15, 23, 42, .16); }
.my-widget.wg-solid.frame-glass { background: var(--surface); }
.my-widget.wg-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15, 23, 42, .22); }
/* 头部改为悬停浮现的覆盖层；编辑态/拖拽态常驻，便于管理 */
.my-widget.wg-solid .my-widget-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0;
  padding: 5px 7px; opacity: 0;
  background: linear-gradient(rgba(15, 23, 42, .30), rgba(15, 23, 42, 0));
}
.my-widget.wg-solid:hover .my-widget-head,
.my-widget.wg-solid:focus-within .my-widget-head,
.my-widget.wg-solid.is-dragging .my-widget-head { opacity: 1; }
.my-unified-grid.is-edit .my-widget.wg-solid .my-widget-head,
.my-cat-unified-grid.is-edit .my-widget.wg-solid .my-widget-head { opacity: 1; }
.my-widget.wg-solid .my-widget-title { display: none; }
/* 天气卡整体蓝底：按钮/把手用白色系保证可见 */
.my-widget[data-type="weather"] .my-widget-act { color: rgba(255, 255, 255, .92); }
.my-widget[data-type="weather"] .my-widget-act:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.my-widget[data-type="weather"] .my-widget-remove:hover { background: rgba(0, 0, 0, .24); color: #fff; }
.my-widget[data-type="weather"] .my-widget-resize { color: rgba(255, 255, 255, .9); }

/* —— 日历卡：红橙渐变月份头 + 暖白主体大数字 —— */
.mwx-cal { height: 100%; display: flex; flex-direction: column; }
.mwx-cal-head {
  flex-shrink: 0; padding: 8px 10px; text-align: center;
  font-size: 13.5px; font-weight: 800; letter-spacing: .5px; color: #fff;
  background: linear-gradient(105deg, #f0663f, #d92e45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
.mwx-cal-main {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 4px 10px 12px; background: #fbfaf8; color: #17181a;
}
.mwx-cal-day {
  font-size: clamp(38px, 42cqh, 120px); font-weight: 600; line-height: .92;
  letter-spacing: -2px; color: #17181a;
}
.mwx-cal-meta { font-size: 11px; font-weight: 500; color: #98938c; }
.mwx-cal-lunar { font-size: 13px; font-weight: 700; color: #17181a; }

/* —— 记账本 2×2 实色卡（参照日期/天气 wg-solid 风格重做；第四十轮） —— */
.lgc { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; box-sizing: border-box; }
.lgc-head { display: flex; align-items: center; gap: 8px; }
.lgc-ic {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
  color: #16a34a; background: color-mix(in srgb, #22b07d 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22b07d 22%, transparent);
}
.lgc-name { font-size: 13px; font-weight: 700; color: var(--text); }
.lgc-main { display: flex; flex-direction: column; gap: 1px; margin-top: 1px; }
.lgc-bal-label { font-size: 11.5px; color: var(--text-soft); font-weight: 600; }
.lgc-bal { font-size: 27px; font-weight: 800; letter-spacing: -.5px; font-family: var(--font-mono); line-height: 1.08; }
.lgc-bal i { font-size: 15px; font-weight: 700; font-style: normal; margin-right: 2px; }
.lgc-bal.pos { color: var(--accent-emerald); }
.lgc-bal.neg { color: #e5484d; }
.lgc-io { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-soft); margin-top: auto; }
.lgc-io-item b { font-family: var(--font-mono); font-weight: 700; margin-left: 2px; }
.lgc-io-item.out b { color: #e5484d; }
.lgc-io-item.in b { color: var(--accent-emerald); }
.lgc-foot { margin-top: 2px; }
.lgc-add {
  width: 100%; border: none; cursor: pointer; padding: 7px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #22b07d, #4fd1a1);
  box-shadow: 0 4px 12px color-mix(in srgb, #22b07d 30%, transparent);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.lgc-add:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 6px 16px color-mix(in srgb, #22b07d 38%, transparent); }
.lgc-add:active { transform: translateY(0) scale(.98); }

/* —— 天气卡：蓝色渐变 + 白色大数字（城市/图标、空气质量、天气与高低温行） —— */
.mwx-wx {
  height: 100%; display: flex; flex-direction: column;
  padding: 11px 13px 12px; color: #fff;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 55%),
    linear-gradient(172deg, #58a9f6 0%, #3d85e6 58%, #2e6fd2 100%);
  text-shadow: 0 1px 4px rgba(21, 60, 110, .26);
}
.mwx-wx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.mwx-wx-city { font-size: 13.5px; font-weight: 700; max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwx-wx-ic { font-size: 24px; line-height: 1; text-shadow: none; filter: drop-shadow(0 2px 6px rgba(20, 60, 110, .28)); }
.mwx-wx-temp { font-size: clamp(40px, 44cqh, 120px); font-weight: 500; line-height: 1.02; letter-spacing: -3px; margin-top: 2px; }
.mwx-wx-temp span { font-size: .34em; font-weight: 600; letter-spacing: 0; vertical-align: super; margin-left: 3px; opacity: .92; }
.mwx-wx-aqi { font-size: 12px; font-weight: 600; opacity: .96; margin-top: 1px; }
.mwx-wx-foot { margin-top: auto; flex-shrink: 0; font-size: 12px; font-weight: 600; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 天气加载/失败态落在蓝底上，文字提白 */
.my-widget[data-type="weather"] .mw-loading,
.my-widget[data-type="weather"] .mw-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .92); }
.my-widget[data-type="weather"] .mw-retry { color: #fff; background: rgba(255, 255, 255, .18); }

/* ============ 大文件夹卡（iOS 大文件夹同款）：2×2 轨圆角薄荷绿容器 + 内部 2×2 图标网格 ============ */
.my-unified-grid .folder-card.folder-big, .my-cat-unified-grid .folder-card.folder-big {
  grid-column: span 2; grid-row: span 2;
  align-self: stretch; justify-self: stretch; width: auto; height: auto;
  display: flex; flex-direction: column;
}
.folder-big .folder-link { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; width: 100%; }
.folder-big-box {
  position: relative; flex: 1; min-height: 0; width: 100%;
  border-radius: 28px; padding: 14px;
  background: linear-gradient(145deg, #b8e0c8, #9fd3b0);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s;
  display: flex; align-items: center; justify-content: center;
}
.folder-big .folder-link:hover .folder-big-box,
.folder-big .folder-link:focus-visible .folder-big-box { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .20); }
/* 2×2 图标网格 */
.folder-cells {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; width: 100%; height: 100%;
}
.folder-cell {
  position: relative; min-width: 0; min-height: 0;
  border-radius: 22%; overflow: hidden; padding: 0;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.folder-big .folder-link:hover .folder-cell { transform: scale(1.04); }
/* 图标完整显示：正方形 + contain（不裁切，兼容非方形 / 带留白的 favicon） */
.folder-cell .site-icon {
  width: 68%; aspect-ratio: 1; height: auto; flex: none;
  border-radius: 20%; border: none; box-shadow: none; background: transparent;
}
.folder-cell .site-icon .fav-img { width: 100%; height: 100%; object-fit: contain; }
.folder-cell .site-icon .fav-letter { font-size: 20px; }
/* 空槽：半透明白色占位 */
.folder-cell.empty {
  background: rgba(255, 255, 255, .32);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 4px 10px rgba(0,0,0,.10);
}
.folder-cell.empty::after {
  content: '＋'; font-size: 18px; font-weight: 600; line-height: 1;
  color: rgba(255, 255, 255, .80);
}
/* 第 4 格：子文件夹堆叠（>4 个成员时，iOS 同款） */
.folder-cell.stack {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 5px; padding: 10%;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.8), 0 5px 14px rgba(0,0,0,.18);
  overflow: hidden;
}
.folder-cell.stack .folder-cell-mini {
  width: 100%; height: 100%; border-radius: 18%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.folder-cell.stack .folder-cell-mini .site-icon,
.folder-cell.stack .folder-cell-mini.site-icon {
  width: 78%; aspect-ratio: 1; height: auto; border: none; box-shadow: none; background: transparent;
}
.folder-cell.stack .folder-cell-mini .fav-img { object-fit: contain; }
.folder-cell.stack .folder-cell-mini .fav-letter { font-size: 10px; }
/* 数量徽章：右上角悬浮，薄荷底暗字 */
.folder-big-count {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #1f4a38;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .16);
}
/* 名称跟网址卡一致（容器下方居中） */
.folder-big .icon-card-name { margin-top: 6px; text-align: center; }
/* 拖拽落点高亮适配大卡 */
.folder-card.folder-big.drop-target .folder-big-box { box-shadow: 0 0 0 3px var(--primary), 0 12px 30px rgba(0, 0, 0, .18); }
.folder-card.folder-big.drop-target.armed { transform: scale(1.03); }
.folder-card.folder-big.drop-target.armed .folder-big-box { box-shadow: 0 0 0 4px var(--primary), 0 18px 38px rgba(0, 0, 0, .22); }

/* ============ 内容型组件卡主题化（wg-tint）：每类一个品牌色系 ============ */
.my-widget.wg-tint-hot { --wg-accent: #ff5545; --wg-accent-2: #ff9558; }
.my-widget.wg-tint-todo { --wg-accent: #3d85e6; --wg-accent-2: #58a9f6; }
.my-widget.wg-tint-notes { --wg-accent: #e8a13c; --wg-accent-2: #f6c453; }
.my-widget.wg-tint-ledger { --wg-accent: #22b07d; --wg-accent-2: #4fd1a1; }
.my-widget.wg-tint.frame-glass {
  background: color-mix(in srgb, var(--surface) 36%, transparent);
  border-color: color-mix(in srgb, var(--wg-accent) 16%, transparent);
}
/* 顶部细渐变条：品牌色识别（不压内容） */
.my-widget.wg-tint::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--wg-accent), var(--wg-accent-2));
  opacity: .9; pointer-events: none;
}
/* 图标芯片：accent 渐变底白图标 */
.my-widget.wg-tint .my-widget-ic {
  background: linear-gradient(135deg, var(--wg-accent), var(--wg-accent-2)); color: #fff;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--wg-accent) 38%, transparent);
}
/* 热搜：平台 tab 激活态用 accent；前三序号徽章已有红橙黄保持 */
.my-widget.wg-tint-hot .mw-hot-tab.active { background: var(--wg-accent); }
.my-widget.wg-tint-hot .mw-hot-item:hover .mw-hot-title { color: var(--wg-accent); }
/* 待办：统计行（大数字 + 进度环） */
.mw-todo-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; }
.mw-todo-num { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mw-todo-num b { font-size: clamp(24px, 5.2cqh, 40px); font-weight: 800; line-height: 1; color: var(--wg-accent, var(--primary)); letter-spacing: -1px; }
.mw-todo-num span { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.mw-todo-ring {
  --p: 0%; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--wg-accent, var(--primary)) var(--p), color-mix(in srgb, var(--text) 10%, transparent) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.mw-todo-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface, #fff); }
.mw-todo-ring span { position: relative; font-size: 9.5px; font-weight: 800; color: var(--text-soft); }
/* 笔记：条目行 hover + 日期摘要 */
.mw-note-item { display: flex; align-items: center; gap: 8px; }
.my-widget.wg-tint-notes .mw-note-item { padding: 5px 4px; border-bottom: 1px dashed color-mix(in srgb, var(--text) 8%, transparent); border-radius: 7px; transition: background .12s; }
.my-widget.wg-tint-notes .mw-note-item:hover { background: color-mix(in srgb, var(--wg-accent) 10%, transparent); }
.my-widget.wg-tint-notes .mw-note-item::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--wg-accent), var(--wg-accent-2));
}
.mw-note-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-note-time { flex-shrink: 0; font-size: 10.5px; font-weight: 600; color: var(--text-soft); opacity: .85; }
/* 记账本结余保留红绿语义（正绿负红），仅把筛选 chip 激活态换成 accent */
.my-widget.wg-tint-ledger .lg-ft.active { background: var(--wg-accent); color: #fff; }

/* 统一网格内的移动端修正：恢复等比 span（旧「单列满宽」规则只属于旧布局）。
   统一网格行高固定 90px，container-type:size 的固有高度问题不再存在，可安全用回 size。 */
@media (max-width: 768px) {
  .my-unified-grid .my-widget, .my-cat-unified-grid .my-widget {
    grid-column: span var(--cw, 2) !important;
    grid-row: span var(--ch, 2) !important;
    min-height: 0; padding: 10px;
  }
  .my-unified-grid .my-widget-body, .my-cat-unified-grid .my-widget-body { container-type: size; }
  .my-unified-grid .my-widget.wg-solid, .my-cat-unified-grid .my-widget.wg-solid { padding: 0; }
  /* 触屏无 hover：实色卡的头部操作层常驻（无深色渐变，避免压住白底日历） */
  .my-unified-grid .my-widget.wg-solid .my-widget-head,
  .my-cat-unified-grid .my-widget.wg-solid .my-widget-head { opacity: 1; background: none; }
}
.my-widget {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  /* 灵鹿式圆角：14px；更紧凑内边距 */
  border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
  animation: mwIn .36s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* 外观 1｜灵鹿式半透明灰底瓷片（去掉厚重毛玻璃，改用 theme-adaptive 轻 translucent） */
.my-widget.frame-glass {
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.my-widget.frame-glass:hover { background: color-mix(in srgb, var(--surface) 30%, transparent); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, .18); }
/* 外观 2｜无边框：完全透明融入壁纸 */
.my-widget.frame-plain { background: transparent; border: 1px solid transparent; box-shadow: none; }
.my-widget.frame-plain:hover { background: color-mix(in srgb, var(--surface) 26%, transparent); }
.my-widget.frame-plain .my-widget-head { border-bottom: none; }
/* 外观 3｜纯背景色：不透明纯色卡片（亮暗主题各自取 surface-2 实底） */
.my-widget.frame-solid { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); box-shadow: 0 4px 16px rgba(15, 23, 42, .10); }
.my-widget.frame-solid:hover { background: var(--surface-2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.my-widget.wg-tint.frame-solid { background: color-mix(in srgb, var(--wg-accent) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--wg-accent) 20%, transparent); }

/* 标题栏 = 拖拽手柄（灵鹿式：紧凑图标芯片 + 小字标题，克制的操作按钮） */
.my-widget-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  cursor: grab; user-select: none; -webkit-user-select: none; flex-shrink: 0;
}
.my-widget-head:active { cursor: grabbing; }
.my-widget-title {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  font-weight: 700; font-size: 12px; color: var(--text);
}
.my-widget-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-widget-ic {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}
.my-widget-ic svg { width: 14px; height: 14px; display: block; }
/* 头部操作：hover / 聚焦才显（灵鹿式克制） */
.my-widget-acts { display: flex; align-items: center; gap: 1px; flex-shrink: 0; opacity: 0; transition: opacity .15s ease; }
.my-widget:hover .my-widget-acts,
.my-widget:focus-within .my-widget-acts { opacity: 1; }
.my-widget-act {
  width: 22px; height: 22px; border: none; background: transparent; color: var(--text-soft);
  border-radius: 6px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.my-widget-act svg { width: 13px; height: 13px; display: block; }
.my-widget-act:hover { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.my-widget-remove:hover { background: rgba(229,72,77,.14); color: #e5484d; }

/* 组件卡片「移出首页」徽章：编辑态时右上角浮出，与网址卡片 icon-card-acts 同逻辑 */
.wg-card-acts {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; pointer-events: none; transition: opacity .14s ease;
}
.wg-card-act {
  width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 50%;
  border: none; background: var(--surface); color: var(--text-soft);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .1s, color .1s;
}
.wg-card-act svg { width: 11px; height: 11px; display: block; }
.wg-remove-badge { color: #d23b53; }
.wg-remove-badge:hover { color: #fff; background: #d23b53; transform: scale(1.1); }
.wg-remove-badge:active { transform: scale(.94); }
.my-unified-grid.is-edit .wg-card-acts,
.my-cat-unified-grid.is-edit .wg-card-acts { opacity: 1; pointer-events: auto; }
/* 编辑态：仅保留「移出首页」徽章，隐藏标题栏 hover 操作（避免右上角重叠） */
.my-unified-grid.is-edit .my-widget-acts,
.my-cat-unified-grid.is-edit .my-widget-acts { opacity: 0 !important; pointer-events: none !important; }
/* 2×2 组件卡：徽章挂在 .wg-tile-box 内右上角（tile-box overflow:hidden，必须落在方块内部才可见） */
.my-widget.wg-2x2 .wg-tile-box .wg-card-acts { top: 8px; right: 8px; }

.my-widget-body { flex: 1; min-height: 0; font-size: 12px; color: var(--text); container-type: size; }
/* 悬停轻抬升 */
.my-widget:hover { transform: translateY(-2px); }

/* 调整大小把手（右下角） */
.my-widget-resize {
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
  cursor: nwse-resize; color: var(--text-soft);
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.my-widget:hover .my-widget-resize,
.my-widget.is-dragging .my-widget-resize { opacity: .8; }
.my-widget-resize::before, .my-widget-resize::after {
  content: ''; position: absolute; height: 2px; border-radius: 1px;
  background: currentColor; transform: rotate(-45deg);
}
.my-widget-resize::before { width: 11px; right: 5px; bottom: 9px; }
.my-widget-resize::after { width: 6px; right: 5px; bottom: 5px; }

/* 拖拽态：随手指抬起 + 主色光晕，松手吸附回网格 */
.my-widget.is-dragging {
  z-index: 1200; cursor: grabbing; box-shadow: 0 22px 50px rgba(15, 23, 42, .26), 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent) !important;
  transform: scale(1.02); opacity: .96;
}
/* 拖动占位：虚线提示"将落入此处"，松手即对齐到该格 */
.my-widget.wg-ph {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 2px dashed color-mix(in srgb, var(--primary) 42%, transparent);
  border-radius: 14px; pointer-events: none; box-shadow: none !important;
  animation: none;
}
.my-widget-grid.wg-dragging .my-widget { transition: none !important; }
.my-widget-grid.wg-dragging .my-widget:not(.is-dragging) { pointer-events: none; }
.my-widget-grid.wg-dragging .my-widget-head { cursor: grabbing; }

/* 外观切换菜单 */
.wg-skin-menu {
  position: fixed; z-index: 500; min-width: 198px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .22);
}
.wg-skin-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 9px; border: none; background: none; cursor: pointer;
  border-radius: 9px; text-align: left; transition: background .12s;
}
.wg-skin-opt:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.wg-skin-opt.active { background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.wg-skin-preview { width: 28px; height: 21px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
.wg-skin-preview.sk-glass { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.wg-skin-preview.sk-plain { background: transparent; border-style: dashed; }
.wg-skin-preview.sk-solid { background: var(--surface-2); }
.wg-skin-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.wg-skin-txt b { font-size: 13px; font-weight: 650; color: var(--text); }
.wg-skin-txt i { font-style: normal; font-size: 11.5px; color: var(--text-soft); }
.wg-skin-ck { font-size: 12px; color: var(--primary); flex-shrink: 0; }
.mw-loading, .mw-empty { color: var(--text-soft); font-size: 13px; padding: 6px 0; }

/* ������� */
/* 日期卡：左侧超大「日」做视觉锚点，右侧竖排月日/星期/农历，底部一条年度进度 */
.mw-cal { display: flex; flex-direction: column; gap: 7px; height: 100%; }
.mw-cal-top { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 0; }
.mw-cal-day { font-size: 54px; font-weight: 800; line-height: .9; color: var(--accent-amber); font-family: var(--font-mono); letter-spacing: -2px; flex-shrink: 0; }
.mw-cal-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--text-soft); }
.mw-cal-md { font-size: 14px; font-weight: 700; color: var(--text); }
.mw-cal-lunar { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-cal-year { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.mw-cal-year-txt { font-size: 11.5px; color: var(--text-soft); }
.mw-cal-year-txt b { color: var(--text); font-weight: 700; font-family: var(--font-mono); }
.mw-cal-bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent-amber) 20%, transparent); overflow: hidden; }
.mw-cal-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-amber); transition: width .3s; }

/* 天气卡：城市/天气描述一行，温度 + 今日高低，末行体感·湿度·风 */
.mw-weather { display: flex; flex-direction: column; gap: 5px; height: 100%; }
.mw-weather-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 0; flex-shrink: 0; }
.mw-weather-city { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-weather-desc { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.mw-wx-ic { margin-right: 3px; }
.mw-weather-main { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.mw-weather-temp { font-size: 44px; font-weight: 800; line-height: 1; color: var(--accent-sky); font-family: var(--font-mono); letter-spacing: -1.5px; }
.mw-weather-temp span { font-size: 15px; font-weight: 700; margin-left: 2px; }
.mw-weather-range { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; font-weight: 600; font-family: var(--font-mono); }
.mw-wx-hi { color: var(--text); }
.mw-wx-lo { color: var(--text-soft); }
.mw-weather-meta { margin-top: auto; font-size: 11.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 卡片被拖到很窄或很矮时（容器查询按 body 实际尺寸判定，与卡片占几列几行解耦），
   收起次要信息、缩小核心数字，保证「今天几号 / 现在几度」始终读得到，而不是被裁掉半截。 */
@container (max-width: 168px) {
  .mw-cal-side, .mw-cal-year, .mw-weather-range, .mw-weather-meta, .mw-weather-city { display: none; }
  .mw-cal-day, .mw-weather-temp { font-size: 34px; letter-spacing: -1px; }
  .mw-weather-top { justify-content: flex-end; }
}
@container (max-height: 72px) {
  .mw-cal-side, .mw-cal-year, .mw-weather-range, .mw-weather-meta { display: none; }
  .mw-cal-day, .mw-weather-temp { font-size: 30px; letter-spacing: -1px; }
}

/* ===== ��������ҳ��#/weather���ο� linglu ��������ҳ�� ===== */
/* 天气内容页（#/weather）：与首页/日历/热搜同宽 1200px；右栏由 1.55fr:1fr 收窄为 1.7fr:1fr */
.weather-view { max-width: 1200px; margin: 0 auto; padding: 16px 18px 44px; }
/* 左右两栏：左=当前天气+24h+7天，右=生活助手（生活指数/黄历/城市） */
.wx-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; }
.wx-main { min-width: 0; }
.wx-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; min-width: 0; }
.wx-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 15px 16px; box-shadow: var(--shadow); }
.wx-card-t { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.wx-card-t::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--primary); }
.wx-idx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wx-idx { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--bg); transition: background .12s, transform .12s; }
.wx-idx:hover { background: var(--surface-2); transform: translateY(-1px); }
.wx-idx-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; color: var(--c, var(--primary)); background: color-mix(in srgb, var(--c, var(--primary)) 16%, transparent); }
.wx-idx-ic svg { width: 19px; height: 19px; display: block; }
.wx-idx-m { min-width: 0; }
.wx-idx-n { font-size: 12px; color: var(--text-soft); }
.wx-idx-v { font-size: 14px; font-weight: 800; line-height: 1.2; }
.wx-hl-date { font-size: 12.5px; color: var(--text-soft); margin-bottom: 9px; }
.wx-hl-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.wx-hl-k { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
.wx-hl-k.yi { background: #2f9e44; }
.wx-hl-k.ji { background: #e03131; }
.wx-hl-v { font-size: 13px; line-height: 1.5; }
.wx-hl-jc { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.wx-near-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-near-city { border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.wx-near-city:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.weather-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.weather-title { font-size: 18px; font-weight: 900; }
.weather-back { font-size: 24px; line-height: 1; width: 36px; height: 36px; }
.weather-locate { margin-left: 12px; border-color: var(--primary); color: var(--primary); }
.weather-locate:hover { background: var(--primary); color: #fff; }
.weather-search { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.weather-city-input { width: 190px; max-width: 44vw; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; }
.weather-city-input:focus { outline: none; border-color: var(--primary); }
/* 天气数据源切换（中国天气网 / Open-Meteo）：分段控件，与搜索框同级 */
.wx-source-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.wx-src-btn { border: 0; background: transparent; color: var(--text-soft); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: .15s; white-space: nowrap; }
.wx-src-btn:hover { color: var(--text); }
.wx-src-btn.active { background: var(--primary); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent); }

/* Hero 当前天气：随天气切换渐变 + 巨型装饰字形 + 玻璃质感统计 */
.wx-hero { color: #fff; border-radius: 26px; padding: 22px 24px 20px; box-shadow: 0 18px 46px rgba(40,80,140,.30); position: relative; overflow: hidden; }
.wx-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.20), transparent 58%); pointer-events: none; }
.wx-hero-deco { position: absolute; right: 2px; top: -22px; font-size: 156px; line-height: 1; opacity: .16; filter: drop-shadow(0 4px 12px rgba(0,0,0,.22)); pointer-events: none; user-select: none; }
.wx-hero-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; opacity: .95; position: relative; z-index: 1; }
.wx-city { font-weight: 800; }
.wx-update { opacity: .85; font-variant-numeric: tabular-nums; }
.wx-hero-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 2px; position: relative; z-index: 1; }
.wx-temp { font-size: 90px; font-weight: 800; line-height: .88; letter-spacing: -3px; text-shadow: 0 3px 16px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.wx-deg { font-size: 34px; font-weight: 600; vertical-align: top; margin-left: 2px; }
.wx-hero-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.wx-emoji { font-size: 60px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.wx-desc { font-size: 19px; font-weight: 800; margin-top: 4px; }
.wx-range { font-size: 13.5px; opacity: .92; margin-top: 6px; }
.wx-aqi { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 700; }
.wx-aqi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--aqi, #2ec27e); box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.wx-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.wx-stat { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 10px 4px; text-align: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.wx-stat-v { font-size: 15.5px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wx-stat-l { font-size: 11px; opacity: .85; margin-top: 4px; }

/* ===== 热搜内容页（#/hot）—— 高级信息流 ===== */
.hot-view { max-width: 1200px; margin: 0 auto; padding: 14px 18px 48px; }
/* 顶部工具栏：做成一个轻量 hero 头 */
.hot-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 14px 18px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface));
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hot-toolbar .hot-back {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer;
  transition: background .12s, transform .12s;
}
.hot-toolbar .hot-back:hover { background: var(--surface-2); transform: translateX(-2px); }
.hot-page-title {
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary) 120%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hot-refresh {
  margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-soft);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.hot-refresh:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.hot-refresh.spin { transform: rotate(360deg); }
/* 平台切换：胶囊分段 */
.hot-plat-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin-bottom: 18px; scrollbar-width: none; }
.hot-plat-tabs::-webkit-scrollbar { display: none; }
.hot-plat-tab {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .12s;
}
.hot-plat-tab:hover { color: var(--text); transform: translateY(-1px); }
.hot-plat-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
/* 左右两栏：左=平台榜/详情，右=站长推荐/广告；右栏收窄，与首页内容宽度保持一致 */
.hot-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.hot-main { min-width: 0; }
.hot-aside { position: sticky; top: 14px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hot-aside-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); }
.hot-aside-t { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 13px; }
.rec-site-list { display: flex; flex-direction: column; gap: 6px; }
.rec-site-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: var(--text); transition: background .12s, transform .12s; }
.rec-site-item:hover { background: var(--surface-2); transform: translateX(2px); }
.rec-site-ic { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.rec-site-ic img, .rec-site-ic .fav-letter { width: 32px; height: 32px; border-radius: 8px; }
.rec-site-info { min-width: 0; flex: 1; }
.rec-site-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.rec-site-vpn { font-size: 9px; font-weight: 700; line-height: 1; padding: 1px 5px; border-radius: 999px; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; }
.rec-site-desc { font-size: 12px; color: var(--text-soft); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-ad-card { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); text-decoration: none; color: var(--text); transition: box-shadow .15s, transform .15s; }
.hot-ad-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.hot-ad-card img { width: 100%; height: 96px; object-fit: cover; display: block; }
.hot-ad-body { padding: 10px 12px; }
.hot-ad-title { font-size: 13px; font-weight: 700; }
.hot-ad-desc { font-size: 12px; color: var(--text-soft); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hot-body { min-width: 0; }
/* 左栏：实时热搜榜卡片 */
.hot-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.hot-board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.hot-board-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hot-board-head .hd-ic.flame { color: #f4511e; }
.hot-board-title { font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: -.01em; }
.hot-board-plat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800; color: #fff;
  padding: 4px 10px 4px 5px; border-radius: 999px;
  background: linear-gradient(135deg, var(--plat-color, var(--primary)), color-mix(in srgb, var(--plat-color, var(--primary)) 65%, #fff));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--plat-color, var(--primary)) 25%, transparent);
  white-space: nowrap;
}
.hot-plat-ic {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); font-size: 11px; font-weight: 900; color: #fff;
}
.hot-board-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #16a34a; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.hot-list { padding: 6px; }
.hot-item { position: relative; display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); font-size: 14px; padding: 10px 12px; border-radius: 12px; transition: background .12s, transform .12s, box-shadow .12s; }
.hot-item:nth-child(odd) { background: color-mix(in srgb, var(--bg) 40%, var(--surface)); }
.hot-item:hover { background: var(--surface-2); transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.hot-item:hover .hot-title { color: var(--primary); }
.hot-info { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hot-rank { width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 8px; font-size: 12px; font-weight: 900; background: var(--surface-2); color: var(--text-soft); flex-shrink: 0; }
.hot-rank.top { color: #fff; }
.hot-rank.t1 { background: linear-gradient(135deg, #fe2d2d, #ff6a3d); box-shadow: 0 2px 8px rgba(254,45,45,.32); }
.hot-rank.t2 { background: linear-gradient(135deg, #ff7a1a, #ffb84d); box-shadow: 0 2px 8px rgba(255,122,26,.3); }
.hot-rank.t3 { background: linear-gradient(135deg, #ffb000, #ffd34d); box-shadow: 0 2px 8px rgba(255,176,0,.3); }
.hot-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hot-hot { font-size: 11.5px; color: var(--text-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; background: var(--surface-2); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); }
/* 空状态 / 错误状态 */
.mw-empty { color: var(--text-soft); padding: 52px 20px; text-align: center; font-size: 14px; }
.mw-loading { color: var(--text-soft); padding: 52px 20px; text-align: center; font-size: 14px; }
@media (max-width: 900px) {
  .hot-grid { grid-template-columns: 1fr; gap: 18px; }
  .hot-aside { position: static; }
  .hot-toolbar { padding: 12px 14px; }
  .hot-page-title { font-size: 19px; }
}
@media (max-width: 640px) {
  .hot-view { padding: 12px 12px 40px; }
  .hot-toolbar { margin-bottom: 14px; }
  .hot-plat-tab { padding: 6px 13px; font-size: 12.5px; }
  .hot-board-head { padding: 13px 14px; }
  .hot-board-title { font-size: 15px; }
  .hot-board-live { display: none; }
  .hot-item { font-size: 13.5px; gap: 10px; padding: 9px 10px; }
  .hot-info { gap: 8px; }
  .hot-hot { display: none; }
}

/* 热搜卡片：整卡可点（空白区进详情），↗ 为原文外链（stopPropagation 不冒泡） */
.hot-item, .mw-hot-item { cursor: pointer; }
.mw-hot-item:active, .hot-item:active { transform: scale(.995); }
.hot-ext, .mw-hot-ext {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px; text-decoration: none;
  color: var(--text-soft); border: 1px solid var(--border); background: var(--surface);
  transition: color .12s, border-color .12s, background .12s;
}
.hot-ext:hover, .mw-hot-ext:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.mw-hot-ext { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }

/* 热搜详情页（#/hot/<平台>/<序号>）：模仿 nav.linglu.pro 热搜详情 */
.hot-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px 18px 22px; --hot-up: #e8590c; --hot-down: #1c7ed6; }
.hot-detail-head { display: flex; align-items: center; gap: 10px; }
.hot-detail-rank { font-size: 14px; font-weight: 800; color: var(--text-soft); }
.hot-detail-rank.top { color: #fff; }
.hot-detail-rank.t1 { background: #fe2d2d; border-radius: 7px; padding: 2px 8px; }
.hot-detail-rank.t2 { background: #ff7a1a; border-radius: 7px; padding: 2px 8px; }
.hot-detail-rank.t3 { background: #ffb000; border-radius: 7px; padding: 2px 8px; }
.hot-detail-plat { font-size: 13px; color: var(--text-soft); }
.hot-detail-title { font-size: 23px; font-weight: 900; line-height: 1.3; margin: 14px 0 6px; word-break: break-word; }
.hot-detail-heat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.hot-detail-heat-num { font-size: 22px; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.hot-detail-heat-label { font-size: 12.5px; color: var(--text-soft); }
.hot-detail-trend { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 8px; margin-bottom: 18px; }
.hot-spark { display: block; }
.hot-spark-cap { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.hot-spark-empty { color: var(--text-soft); }
.hot-detail-sec { margin-bottom: 16px; }
.hot-detail-sec-t { font-size: 13px; font-weight: 700; color: var(--text-soft); margin-bottom: 9px; }
.hot-eng-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-eng {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
}
.hot-eng:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.hot-detail-src {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 11px;
  border: 1.5px solid var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary); font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .12s;
}
.hot-detail-src:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.hot-detail-back { display: inline-block; margin-top: 6px; }

/* ============ 热搜详情页 · 高级感重构（左右清晰分栏） ============ */
/* 两栏网格间距已统一在 .hot-grid（24px），左栏 Hero + 卡片栈、右栏推荐/广告各自独立成块 */

/* 左栏：详情 = Hero + 纵向卡片栈（去外壳，卡片各自成块） */
.hot-detail { display: flex; flex-direction: column; gap: 14px; background: transparent; border: none; border-radius: 0; padding: 0; --hot-up: #e8590c; --hot-down: #1c7ed6; }

/* Hero：排名 + 标题 + 热度，按名次换主题渐变 */
.hd-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); padding: 15px 18px 18px; color: #fff; box-shadow: var(--shadow); }
.hd-hero::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(560px 220px at 88% -45%, rgba(255,255,255,.28), transparent 60%),
              radial-gradient(320px 130px at 8% 125%, rgba(255,255,255,.12), transparent 60%); }
.hd-hero.th1 { background: linear-gradient(135deg, #f53c3c 0%, #ff7a1a 100%); }
.hd-hero.th2 { background: linear-gradient(135deg, #ff7a1a 0%, #ffb000 100%); }
.hd-hero.th3 { background: linear-gradient(135deg, #ffb000 0%, #ffc833 100%); }
.hd-hero.thx { background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%); }
.hd-hero-decor { position: absolute; right: 14px; top: 10px; color: #fff; opacity: .16; pointer-events: none; }
.hd-hero-decor svg { display: block; }
.hd-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.hd-crumb { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); transition: background .12s; }
.hd-crumb:hover { background: rgba(255,255,255,.3); }
.hd-plat { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .02em; }
.hd-hero-main { display: flex; align-items: center; gap: 14px; }
.hd-rank { flex-shrink: 0; min-width: 54px; height: 54px; padding: 0 6px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 900; color: #fff; background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.42); backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 8px rgba(0,0,0,.16); }
.hd-hero-body { min-width: 0; }
.hd-title { margin: 0 0 9px; font-size: 22px; font-weight: 900; line-height: 1.3; letter-spacing: -.01em; word-break: break-word; }
.hd-heat { display: flex; align-items: baseline; gap: 7px; }
.hd-heat-num { font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hd-heat-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); }

/* 详情子卡：趋势 / 搜索 / 来源，各自独立成块 */
.hd-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 18px 17px; box-shadow: var(--shadow); }
.hd-card-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.hd-ic { display: inline-flex; align-items: center; color: var(--primary); }
.hd-ic.amber { color: var(--accent-amber); }
.hot-aside-t .hd-ic { display: inline-flex; align-items: center; }
.hd-trend { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 8px; }
.hd-engs { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-engs .hot-eng { box-shadow: none; }
.hd-src { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 12px; border: 1.5px solid var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-size: 14px; font-weight: 800; text-decoration: none; transition: background .14s, transform .14s; }
.hd-src:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); transform: translateY(-1px); }

/* 右栏卡片精修：与左栏同级的「块区」观感 + 微交互 */
.hot-aside-sec { box-shadow: var(--shadow); border-radius: var(--radius-lg); }
.rec-site-item { transition: background .12s, transform .12s; }
.rec-site-item:hover { transform: translateX(2px); }
.hot-ad-card { transition: box-shadow .15s, transform .15s; }
.hot-ad-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* 右栏：热度 TOP 榜（横向条形） */
.hot-top-item { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-radius: 9px; cursor: pointer; }
.hot-top-item:hover { background: var(--surface-2); }
.hot-top-item:hover .hot-top-name { color: var(--primary); }
.hot-top-rank { width: 20px; text-align: center; font-weight: 800; color: var(--text-soft); font-size: 12px; flex-shrink: 0; }
.hot-top-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.hot-top-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; min-width: 30px; }
.hot-top-fill { display: block; height: 100%; background: linear-gradient(90deg, #ff922b, #ff6b6b); border-radius: 999px; }
.hot-top-val { font-size: 12px; color: var(--text-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* 右栏：更多热搜（详情页跳转） */
.hot-more-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.hot-more-item:hover { background: var(--surface-2); }
.hot-more-item:hover .hot-more-name { color: var(--primary); }
.hot-more-rank { width: 22px; text-align: center; font-weight: 800; color: var(--text-soft); font-size: 12px; flex-shrink: 0; }
.hot-more-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }

/* 首页门面条天气区：可点进天气详情页 */
.home-date-weather:hover { opacity: .82; }

.wx-section { margin-top: 22px; }
.wx-section-title { font-size: 14px; font-weight: 800; color: var(--text-soft); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.wx-section-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--primary); }
.wx-curve { background: linear-gradient(135deg, #4FACFE, #5B86E5); border-radius: 18px; padding: 10px 6px 4px; margin-bottom: 12px; box-shadow: var(--shadow); }
.wx-curve-svg { display: block; width: 100%; height: 86px; }
.wx-hourly { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.wx-hourly::-webkit-scrollbar { height: 6px; }
.wx-hourly::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.wx-hour { flex: 0 0 auto; width: 68px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 6px; text-align: center; transition: transform .12s, box-shadow .12s; }
.wx-hour:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.wx-hour-t { font-size: 12px; color: var(--text-soft); }
.wx-hour-emoji { font-size: 26px; margin: 7px 0; }
.wx-hour-temp { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wx-week-curve { background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: 18px 18px 0 0; padding: 12px 8px 6px; box-shadow: var(--shadow); }
.wx-week-svg { display: block; width: 100%; height: 74px; }
.wx-days { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.wx-week-curve + .wx-days { border-radius: 0 0 18px 18px; border-top: none; }
.wx-day { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); transition: background .12s; }
.wx-day:last-child { border-bottom: none; }
.wx-day:hover { background: var(--surface-2); }
.wx-day-name { width: 56px; font-weight: 700; flex-shrink: 0; line-height: 1.2; }
.wx-day-name i { display: block; font-style: normal; font-size: 11px; font-weight: 500; opacity: .68; margin-top: 3px; }
.wx-day-emoji { font-size: 24px; flex-shrink: 0; width: 30px; text-align: center; }
.wx-day-lo { color: var(--text-soft); width: 38px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wx-day-bar { position: relative; flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); min-width: 40px; overflow: hidden; }
.wx-day-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #7ed0ff, #ffb86b); }
.wx-day-hi { width: 38px; text-align: left; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wx-loading, .wx-empty { text-align: center; color: var(--text-soft); padding: 64px 20px; font-size: 14px; }
/* 可操作空态：定位失败/后端不可达时给热门城市入口 */
.wx-empty-actionable { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wx-empty-icon { font-size: 52px; line-height: 1; opacity: .85; }
.wx-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.wx-empty-sub { font-size: 13px; color: var(--text-soft); max-width: 340px; }
.wx-popular-cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; margin-top: 8px; }
.wx-city-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .08s;
}
.wx-city-chip:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); transform: translateY(-1px); }
.wx-city-chip:active { transform: translateY(0); }

@media (max-width: 900px) {
  .wx-layout { grid-template-columns: 1fr; gap: 16px; }
  .wx-aside { position: static; }
}

@media (max-width: 480px) {
  .weather-view { padding: 10px 10px 40px; }
  .wx-hero { border-radius: 18px; padding: 18px 16px 20px; }
  .wx-emoji { font-size: 46px; }
  .wx-temp { font-size: 62px; }
  .wx-desc { font-size: 17px; }
  .weather-city-input { width: 140px; }
  .wx-stat-v { font-size: 14px; }
}

/* ��������ҳ���ο� linglu ����ҳ�� */
.calendar-view { max-width: 720px; margin: 0 auto; padding: 14px 14px 48px; }
.calendar-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.calendar-title { font-size: 18px; font-weight: 900; }
.calendar-back { font-size: 24px; line-height: 1; width: 36px; height: 36px; }
.calendar-today { margin-left: 8px; border-color: var(--primary); color: var(--primary); }
.calendar-today:hover { background: var(--primary); color: #fff; }
.calendar-month-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.calendar-month-label { font-size: 16px; font-weight: 800; min-width: 96px; text-align: center; }
.calendar-prev, .calendar-next { width: 32px; height: 32px; font-size: 18px; line-height: 1; }
.cal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.cal-weekrow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); }
.cal-whd { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-soft); padding: 10px 0; }
.cal-whd.cal-whd-wk { color: var(--primary); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { position: relative; min-height: 78px; padding: 8px 6px 6px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); cursor: pointer; transition: background .12s; display: flex; flex-direction: column; align-items: center; }
.cal-cell:nth-child(7n) { border-right: 1px solid var(--border); }
.cal-cell:hover { background: var(--surface-2); }
.cal-cell.other { background: color-mix(in srgb, var(--surface) 70%, var(--surface-2)); }
.cal-cell.other .cal-cell-day, .cal-cell.other .cal-cell-lunar { opacity: .38; }
.cal-cell.wk .cal-cell-day { color: var(--primary); }
.cal-cell .cal-cell-day { font-size: 18px; font-weight: 700; line-height: 1.1; }
.cal-cell .cal-cell-lunar { font-size: 11px; color: var(--text-soft); margin-top: 6px; line-height: 1.1; }
.cal-cell.today .cal-cell-day { color: #fff; }
.cal-cell.today { background: var(--primary); }
.cal-cell.today .cal-cell-lunar { color: #fff; opacity: .92; }
.cal-cell.selected:not(.today) { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-cell.selected.today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--primary); }
/* ������Ԫ�񣺽��� / �ڼ��ձ�ǩ */
.cal-cell.is-holiday:not(.today) .cal-cell-day { color: #ef4444; }
.cal-cell.is-holiday.is-trad:not(.today) .cal-cell-day { color: #e0902a; }
.cal-cell .cal-cell-term { font-size: 11px; color: #12a594; margin-top: 6px; line-height: 1.1; font-weight: 600; }
.cal-cell .cal-cell-holiday { font-size: 11px; color: #ef4444; margin-top: 6px; line-height: 1.1; font-weight: 600; }
.cal-cell .cal-cell-holiday.traditional { color: #e0902a; }
.cal-cell.today .cal-cell-term,
.cal-cell.today .cal-cell-holiday { color: #fff; opacity: .95; }
.cal-detail { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 16px; }
.cal-detail-head { display: flex; align-items: center; gap: 16px; }
.cal-detail-day { font-size: 56px; font-weight: 900; line-height: 1; color: var(--primary); min-width: 72px; text-align: center; }
.cal-detail-info { flex: 1; min-width: 0; }
.cal-detail-date { font-size: 16px; font-weight: 800; }
.cal-detail-sub { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.cal-detail-lunar { font-size: 14px; font-weight: 700; margin-top: 6px; }
.cal-detail-gz { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.cal-detail-term { font-size: 13px; font-weight: 700; margin-top: 6px; color: #12a594; }
.cal-detail-holiday { font-size: 13px; font-weight: 700; margin-top: 6px; color: #ef4444; }
.cal-tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--primary); color: #fff; margin-left: 4px; vertical-align: middle; }
.cal-detail-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-start; }
.cal-detail-lab { flex-shrink: 0; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 8px; font-weight: 800; font-size: 13px; color: #fff; }
.cal-detail-lab.yi { background: #16a34a; }
.cal-detail-lab.ji { background: #dc2626; }
.cal-detail-val { font-size: 13px; line-height: 1.6; color: var(--text); flex: 1; }

@media (max-width: 480px) {
  .calendar-view { padding: 10px 10px 40px; }
  .calendar-month-label { font-size: 14px; min-width: 80px; }
  .cal-cell { min-height: 62px; padding: 6px 3px 5px; }
  .cal-cell .cal-cell-day { font-size: 15px; }
  .cal-cell .cal-cell-lunar { font-size: 10px; margin-top: 4px; }
  .cal-detail-day { font-size: 44px; min-width: 58px; }
  .cal-detail-date { font-size: 14px; }
}

/* ���������linglu ��񣺶�ƽ̨��ǩ + ���� + �ȶ�ֵ�� */
/* 热搜组件卡（linglu 风）：平台 tab 即卡内第一行（标题隐藏、操作按钮悬浮右上角），
   底部「更新于/查看全部」行已去掉；榜单单列吃满剩余高度，鼠标滚轮卡内滚动（不带动页面） */
.my-widget[data-type="hot"] .my-widget-title { display: none; }
.my-widget[data-type="hot"] .my-widget-head {
  position: absolute; top: 0; right: 0; left: auto; z-index: 4; margin: 0;
  padding: 3px 5px; opacity: 0; border-radius: 0 14px 0 10px;
  background: linear-gradient(rgba(15, 23, 42, .26), rgba(15, 23, 42, 0));
}
.my-widget[data-type="hot"]:hover .my-widget-head,
.my-widget[data-type="hot"]:focus-within .my-widget-head,
.my-widget[data-type="hot"].is-dragging .my-widget-head { opacity: 1; }
.my-unified-grid.is-edit .my-widget[data-type="hot"] .my-widget-head,
.my-cat-unified-grid.is-edit .my-widget[data-type="hot"] .my-widget-head { opacity: 1; background: none; }
@media (max-width: 768px) {
  .my-unified-grid .my-widget[data-type="hot"] .my-widget-head,
  .my-cat-unified-grid .my-widget[data-type="hot"] .my-widget-head { opacity: 1; background: none; }
}
.mw-hot-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
/* 卡片内纵向三段：平台栏 / 榜单（吃满剩余高度并内滚）/ 底栏。
   桌面端 body 有确定高度（网格行高固定），height:100% 能拿到；
   移动端 body 是内容高，height:100% 退化为 auto，由 .mw-hot-list 的 max-height 兜住。 */
.mw-hot-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* 平台 tab 单行横滚：6 个 chip 在窄屏放不下，换行会把榜单整体往下顶，横向滑更省高度 */
.mw-hot-tabs { display: flex; flex-wrap: nowrap; gap: 5px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mw-hot-tabs::-webkit-scrollbar { display: none; }
.mw-hot-tab { border: 0; background: var(--surface-2); color: var(--text-soft); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .12s, color .12s; }
.mw-hot-tab:hover { color: var(--text); }
.mw-hot-tab.active { background: var(--primary); color: #fff; }
.mw-hot-refresh { border: 0; background: var(--surface-2); color: var(--text-soft); width: 26px; height: 26px; line-height: 1; border-radius: 50%; cursor: pointer; font-size: 14px; flex-shrink: 0; transition: transform .32s ease, color .12s, background .12s; }
.mw-hot-refresh:hover { color: var(--primary); }
.mw-hot-refresh.spin { transform: rotate(360deg); }
/* 榜单区吃掉卡片剩余高度并内滚（单列）：卡多大就显示多少条，滚轮在卡内滚动（overscroll 不外泄带动页面） */
.mw-hot-list { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* 窄屏卡片是内容高，没有「剩余高度」可吃，改成固定 6 行的可视窗口内滚。
   183px = 6 行 × 29.5px + 5 条间隙 × 1px，正好露出 6 条不出现半截 */
@media (max-width: 1023px) {
  .mw-hot-list { max-height: 183px; }
}
.mw-hot-item { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); font-size: 13px; padding: 5px 4px; border-radius: 8px; transition: background .1s; }
.mw-hot-item:hover { background: var(--surface-2); }
.mw-hot-item:hover .mw-hot-title { color: var(--primary); }
.mw-hot-rank { width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 5px; font-size: 10.5px; font-weight: 800; background: var(--surface-2); color: var(--text-soft); flex-shrink: 0; }
.mw-hot-rank.top { color: #fff; }
.mw-hot-rank.t1 { background: #fe2d2d; }
.mw-hot-rank.t2 { background: #ff7a1a; }
.mw-hot-rank.t3 { background: #ffb000; }
.mw-hot-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-hot-hot { font-size: 11px; color: var(--text-soft); flex-shrink: 0; font-variant-numeric: tabular-nums; margin-left: 6px; }
/* 底栏：更新时间靠左、「查看全部」靠右（linglu 同款），不再是一行右对齐的灰色小字 */
.mw-hot-foot { margin-top: 9px; font-size: 11px; color: var(--text-soft); text-align: right; }
.mw-hot-footrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 7px; flex-shrink: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 11px; color: var(--text-soft);
}
.mw-hot-time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-hot-more { flex-shrink: 0; color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.mw-hot-more:hover { text-decoration: underline; }

/* 常用网址区：整块包成一个毛玻璃面板，标题+网格在一个收口容器里，
   不再散落在页面 → 视觉更聚拢、更整体 */
.my-links-section { margin-bottom: 14px; }
.my-links-section .my-section-title { font-size: 20px; letter-spacing: -.2px; }
.my-section-sub {
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); white-space: nowrap;
}
.my-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.my-section-title { font-size: 17px; font-weight: 900; }
.my-section-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.my-section-manage {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text-soft); font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.my-section-manage:hover { border-color: var(--primary); color: var(--primary); }
.my-section-manage.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.my-section-manage:active { transform: scale(.97); }
/* 管理/完成双图标：平时齿轮，编辑态（.active）对勾 */
.my-section-manage .svg-ic { width: 13.5px; height: 13.5px; }
.my-section-manage .ic-check { display: none; }
.my-section-manage.active .ic-check { display: block; }
.my-section-manage.active .ic-gear { display: none; }
.my-links-grid { display: block; margin-top: 4px; }
/* 面板内的网格：行/列间距收紧到 8/10px，图标略缩小，整块更紧凑聚拢 */
.my-links-grid .icon-grid {
  grid-template-columns: repeat(10, 82px);
  justify-content: center;
  gap: 12px 4px; padding: 2px 0 0;
}
/* 窄屏放不下 10 列就逐级降级，始终居中 */
@media (max-width: 1100px) { .my-links-grid .icon-grid { grid-template-columns: repeat(8, 82px); } }
@media (max-width: 860px)  { .my-links-grid .icon-grid { grid-template-columns: repeat(6, 82px); } }
@media (max-width: 640px)  { .my-links-grid .icon-grid { grid-template-columns: repeat(5, 62px); gap: 10px 2px; } }
@media (max-width: 400px)  { .my-links-grid .icon-grid { grid-template-columns: repeat(4, 62px); } }
/* 首页分类区：移动端改用 flex 换行 + 居中，末行也整体居中（左右对称留白），
   彻底消除 grid 末行偏左、右侧单边空白的廉价感。 */
.my-home-cats .my-links-grid .icon-grid {
  grid-template-columns: repeat(auto-fill, 82px);
  justify-content: start;
}
/* 移动端：固定 5 列等宽铺满整行，5 个卡片恰好一排铺满（不再挤在中间留白）。
   多于 5 个时自然换行，末行卡片等宽靠左，比居中更整齐地利用整行空间；
   用固定 5 列而非 auto-fit，可避免更宽屏下「末行仅 1 卡被拉伸成超宽」的怪相。 */
@media (max-width: 640px) {
  .my-home-cats .my-links-grid .icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px 6px;
  }
  .my-home-cats .my-links-grid .icon-card { width: auto; }
}
.my-links-grid .icon-card-icon {
  width: 48px; height: 48px; border-radius: 13px; font-size: 20px;
  border: none; box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.my-links-grid .icon-card-icon .fav-letter { background: var(--tile, linear-gradient(135deg, var(--primary), var(--primary-2))); }
.my-links-grid .icon-card-name { font-size: 12px; font-weight: 700; margin-top: 2px; }
.my-link {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 8px;
  border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600; min-height: 46px; transition: background .12s, transform .08s, border-color .12s;
  border: 1px solid transparent;
}
.my-link:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: var(--primary); transform: translateY(-1px); }
.my-links-empty { color: var(--text-soft); font-size: 13.5px; padding: 8px 0; }
/* ��̬ʱ����������ַ section ���أ�������/������ť/��̬�İ��������������롸���ٷ��ʡ���Ϣ�������ӣ��ǿ�̬ʱ is-empty �Ƴ����ָ���ʾ */
/* v2 修正：空态不再隐藏整个区块（此前 display:none 会让新用户完全看不到收藏入口），
   改为展示引导卡，主动教育用户「怎么把网址收藏到这里�? */
.my-links-section.is-empty { display: block; }
.my-links-empty {
  display: flex; align-items: center; gap: 12px;
  padding: 18px; border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  color: var(--text-soft); font-size: 13.5px; line-height: 1.6;
}
.my-links-empty .mle-ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.my-links-empty b { color: var(--text); font-weight: 800; }

/* ���� / �ʼ� ��� */
.mw-todo-list, .mw-note-list { display: flex; flex-direction: column; gap: 7px; }
.mw-todo-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mw-todo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.mw-todo-item.done .mw-todo-dot { background: var(--accent-emerald); }
.mw-todo-item.done .mw-todo-txt { text-decoration: line-through; color: var(--text-soft); }
.mw-note-item { font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.mw-note-item:last-child { border-bottom: none; }
.mw-widget-more { margin-top: 10px; font-size: 12px; color: var(--primary); font-weight: 600; cursor: pointer; }

/* ===== 记账本组件 =====
   卡片信息层级参考专业记账应用：结余是唯一视觉锚点，收支是次要数字，
   最近几笔做「有没有记错」的快速回看，主操作永远只有一个「记一笔」。 */
/* 与热搜卡同理：桌面端 body 有确定高度，height:100% 好使；移动端退化为内容高 */
.lg-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lg-top { margin-bottom: 8px; flex-shrink: 0; }
.lg-bal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lg-bal-label { font-size: 12px; color: var(--text-soft); font-weight: 600; }
.lg-bal { font-size: 26px; font-weight: 800; letter-spacing: -.5px; font-family: var(--font-mono); line-height: 1.15; }
.lg-bal i { font-size: 14px; font-weight: 700; font-style: normal; margin-right: 2px; }
.lg-bal.pos, .pos { color: var(--accent-emerald); }
.lg-bal.neg, .neg { color: #e5484d; }
.lg-io { display: flex; gap: 14px; margin-top: 5px; font-size: 11.5px; color: var(--text-soft); }
.lg-io-item b { font-family: var(--font-mono); font-weight: 700; margin-left: 2px; }
.lg-io-item.out b { color: #e5484d; }
.lg-io-item.in b { color: var(--accent-emerald); }
.lg-io-loan { margin-top: 3px; }
.lg-io-item.loan-out b { color: #f59e0b; }
.lg-io-item.loan-in b { color: #6366f1; }
.lg-recent { margin-top: 8px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lg-row-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.lg-row-ic { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--surface-2); }
.lg-row-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lg-row-mid b { font-size: 12.5px; font-weight: 700; }
.lg-row-mid i { font-style: normal; font-size: 11px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row-amt { flex-shrink: 0; font-size: 12.5px; font-weight: 800; font-family: var(--font-mono); }
.lg-row-amt.out, .lg-item-amt.out { color: #e5484d; }
.lg-row-amt.in, .lg-item-amt.in { color: var(--accent-emerald); }
.lg-acts { display: flex; gap: 7px; margin-top: 9px; flex-shrink: 0; }
.lg-btn {
  flex: 1; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lg-btn:hover { border-color: var(--primary); color: var(--primary); }
.lg-btn.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.lg-btn.primary:hover { color: #fff; opacity: .92; }

/* ===== 记账本：记一笔弹窗 ===== */
.ledger-modal { width: min(460px, calc(100vw - 24px)); }
.ledger-body { max-height: min(72vh, 620px); overflow-y: auto; }
.lg-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lgs-item {
  flex: 1 1 calc(33.333% - 6px); min-width: 0; background: var(--surface-2); border-radius: 12px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.lgs-item i { font-style: normal; font-size: 11px; color: var(--text-soft); font-weight: 600; }
.lgs-item b { font-size: 15px; font-weight: 800; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgs-item b.loan-out { color: #f59e0b; }
.lgs-item b.loan-in { color: #6366f1; }
.lg-kind-seg {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
}
.lg-kind {
  flex: 1; border: 0; background: transparent; color: var(--text-soft);
  font-size: 13px; font-weight: 700; padding: 7px 0; border-radius: 9px; cursor: pointer;
  transition: background .14s, color .14s;
}
.lg-kind.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent); }
.lg-amount-row { display: flex; align-items: center; gap: 6px; border-bottom: 2px solid var(--border); padding-bottom: 6px; margin-bottom: 14px; }
.lg-cur { font-size: 22px; font-weight: 800; color: var(--text-soft); }
.lg-amount {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: 30px; font-weight: 800; font-family: var(--font-mono); letter-spacing: -.5px;
  padding: 0; outline: none;
}
.lg-amount::placeholder { color: color-mix(in srgb, var(--text-soft) 55%, transparent); }
.lg-label { font-size: 11.5px; font-weight: 700; color: var(--text-soft); }
.lg-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 7px 0 14px; }
.lg-cat {
  border: 1px solid transparent; background: var(--surface-2); border-radius: 12px;
  padding: 7px 2px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background .12s, border-color .12s, transform .12s;
}
.lg-cat:hover { transform: translateY(-1px); }
.lg-cat-ic { font-size: 19px; line-height: 1; }
.lg-cat-name { font-size: 11px; font-weight: 600; color: var(--text-soft); }
.lg-cat.active { background: color-mix(in srgb, var(--primary) 13%, transparent); border-color: var(--primary); }
.lg-cat.active .lg-cat-name { color: var(--primary); font-weight: 800; }
.lg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lg-row .lg-label { width: 34px; flex-shrink: 0; }
.lg-date, .lg-note {
  flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 13px; padding: 8px 10px; border-radius: 10px; outline: none; font-family: inherit;
}
.lg-date:focus, .lg-note:focus { border-color: var(--primary); }
.lg-error { color: #e5484d; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.lg-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--text-soft);
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border);
}
.lg-count { font-weight: 600; }
.lg-month-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px;
}
.lg-mnav {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s;
}
.lg-mnav:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand); }
.lg-mnav:disabled { opacity: .35; cursor: not-allowed; }
.lg-month-label { font-size: 13px; font-weight: 700; min-width: 92px; text-align: center; color: var(--text); }
  .lg-list { margin-top: 6px; flex: 1 1 auto; min-height: 150px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
  /* 明细主区与录入区之间的细分隔线 */
  .lg-divider { height: 1px; background: var(--border, rgba(0,0,0,.08)); margin: 14px -4px 10px; }
  /* 记账弹窗：记一笔 / 看明细 视图切换 */
  .lg-tabs { display: flex; gap: 5px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); }
  .lg-tab { flex: 1; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; transition: all .15s; }
  .lg-tab:hover { color: var(--text); }
  .lg-tab.active { background: var(--card, #fff); color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
  /* 快捷时间：近1月 / 近3月 / 全部 */
  .lg-quick { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
  .lg-qchip { border: 1px solid var(--border, rgba(0,0,0,.12)); background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer; transition: all .15s; }
  .lg-qchip:hover { border-color: var(--brand); color: var(--brand); }
  .lg-qchip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
  .lg-quick .lg-filter-reset { margin-left: auto; }
  /* 看明细视图：随筛选联动的概览（收支结余 + 借款未结清净额） */
  .lg-overview { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; margin: 8px 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); }
  .lgo-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
  .lgo-item { display: inline-flex; align-items: baseline; gap: 4px; }
  .lgo-item i { font-style: normal; font-size: 11.5px; color: var(--text-dim); }
  .lgo-item b { font-size: 13px; font-weight: 700; }
  .lgo-loan { border-top: 1px dashed color-mix(in srgb, var(--text) 14%, transparent); padding-top: 4px; margin-top: 2px; }
  /* 记账弹窗底栏：与上方内容留出呼吸空间 + 细分隔线，主按钮更突出（不再紧贴内容/底边） */
  .ledger-modal .modal-footer { gap: 12px; margin-top: 12px; padding: 14px 2px 6px; border-top: 1px solid var(--lm-border); }
  .ledger-modal .modal-footer .btn-ghost,
  .ledger-modal .modal-footer .btn-primary { font-size: 14px; padding: 11px 22px; border-radius: 12px; }
  .ledger-modal .modal-footer .btn-primary { min-width: 132px; box-shadow: 0 3px 10px color-mix(in srgb, var(--lm) 30%, transparent); }
  /* 记账卡片：内容自适应不溢出——统计/筛选/操作固定，列表吃掉剩余空间并可滚动 */
  .my-widget[data-type="ledger"] .lg-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .my-widget[data-type="ledger"] .lg-top,
  .my-widget[data-type="ledger"] .my-lg-filter,
  .my-widget[data-type="ledger"] .lg-acts { flex: 0 0 auto; }
  .my-widget[data-type="ledger"] .lg-list { flex: 1 1 auto; min-height: 54px; max-height: none; }
  .my-widget[data-type="ledger"] .lg-top { cursor: pointer; }
  /* 列表行：右区（金额 + 借款状态）+ 还款按钮 */
  .lg-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
  .lg-item-amt { line-height: 1.1; }
  .lg-loan-tag { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b8790a; white-space: nowrap; }
  .lg-loan-tag.done { background: color-mix(in srgb, var(--accent-emerald) 14%, transparent); color: var(--accent-emerald); }
  .lg-loan-badge { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: color-mix(in srgb, #6366f1 18%, transparent); color: #4f46e5; margin-left: 2px; }
  .lg-repay-btn { flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border-radius: 7px; font-size: 11px; font-weight: 700; padding: 3px 8px; cursor: pointer; align-self: center; }
  .lg-repay-btn:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
  .lg-repay-hist { font-size: 11px; color: var(--text-soft); margin-top: 4px; font-weight: 700; }
  .lg-repay-line { font-size: 11.5px; color: var(--text); padding: 1px 0; }
  /* 结构化筛选 */
  .lg-filter { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .lg-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .lg-filter-lab { font-size: 11px; color: var(--text-soft); font-weight: 700; }
  .lg-month-input { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 7px; padding: 4px 6px; font-size: 12px; font-family: var(--font-mono); }
  .lg-tilde { color: var(--text-soft); }
  .lg-filter-reset { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 7px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
  .lg-filter-reset:hover { color: var(--text); }
  .lg-types { display: flex; gap: 5px; flex-wrap: wrap; }
  .lg-ft { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .lg-ft.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .lg-kw-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 5px 8px; }
  .lg-kw-row:focus-within { border-color: var(--primary); }
  .lg-filter-cats { display: flex; flex-wrap: wrap; gap: 5px; }
  .lg-cat-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 7px; padding: 3px 8px; font-size: 11px; cursor: pointer; }
  .lg-cat-chip.active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
  .my-lg-filter { margin: 8px 0 4px; }
  .my-lg-types .lg-ft { padding: 2px 8px; font-size: 11px; }
  /* 还款核销弹窗 */
  .lg-repay-modal { max-width: 380px; }
  .lg-repay-info { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
  .lg-repay-base { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .lg-repay-amt { font-size: 12px; color: var(--text-soft); }
  .lg-repay-amt b { font-family: var(--font-mono); }
  .lg-repay-tip { margin-top: 4px; font-size: 11px; color: var(--text-soft); }
  /* 借款方向统一配色（概览 / 明细 / 还款弹窗共用） */
  .loan-out, b.loan-out { color: #f59e0b; }
  .loan-in, b.loan-in { color: #6366f1; }
  /* 还款记录：每条都能改 / 能删（输错了直接改，不用重记整笔借款） */
  .lg-repay-hist { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
  .lg-repay-hist i { font-style: normal; font-weight: 600; opacity: .7; }
  .lg-repay-line { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 0; font-size: 11.5px; color: var(--text); }
  .lg-repay-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-repay-txt b { font-family: var(--font-mono); font-weight: 700; margin-right: 3px; }
  .lg-repay-ops { flex-shrink: 0; display: flex; gap: 6px; }
  .lg-repay-op { border: none; background: transparent; color: var(--primary); font-size: 11px; font-weight: 700; padding: 1px 4px; border-radius: 6px; cursor: pointer; }
  .lg-repay-op:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
  .lg-repay-op.del { color: #e5484d; }
  .lg-repay-op.del:hover { background: rgba(229, 72, 77, .12); }
  /* 明细里的「编辑这一笔」 */
  .lg-detail-acts { display: flex; gap: 8px; margin-top: 4px; }
  .lg-mini-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
  .lg-mini-btn:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
  /* 「记一笔」面板的修改态提示条 */
  .lg-editing { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
  .lg-editing-txt { font-size: 12px; font-weight: 700; color: var(--primary); }
  .lg-editing-cancel { border: none; background: transparent; color: var(--text-soft); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
  .lg-editing-cancel:hover { color: var(--text); background: rgba(0, 0, 0, .06); }
  .lg-danger-btn { margin-right: auto; color: #e5484d; }
  .lg-danger-btn:hover { background: rgba(229, 72, 77, .1); }
  /* 明细查询框（跨月搜索备注/分类/日期/金额） */
  .lg-search-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px;
}
.lg-search-row:focus-within { border-color: var(--primary); }
.lg-search-ic { font-size: 13px; opacity: .6; flex-shrink: 0; }
.lg-search-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--text); outline: none; padding: 2px; }
.lg-search-clear { border: 0; background: transparent; color: var(--text-soft); cursor: pointer; width: 20px; height: 20px; border-radius: 6px; font-size: 12px; line-height: 1; flex-shrink: 0; }
.lg-search-clear:hover { background: rgba(0,0,0,.08); color: var(--text); }
/* 点击某笔展开明细详情 */
.lg-item { cursor: pointer; transition: background .12s; }
.lg-item:hover { background: var(--surface-2); }
.lg-item.open { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.lg-detail { padding: 8px 4px 10px 37px; margin-bottom: 2px; border-bottom: 1px dashed var(--border); display: grid; gap: 4px; }
.lg-detail:last-child { border-bottom: none; }
.lg-detail-row { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.lg-detail-row > span { color: var(--text-soft); min-width: 36px; flex-shrink: 0; }
.lg-detail-row > b { font-weight: 700; }
.lg-detail-row > b.in { color: var(--accent-emerald); }
.lg-detail-row > b.out { color: #e5484d; }
.lg-empty { text-align: center; color: var(--text-soft); font-size: 12.5px; padding: 16px 0; }
.lg-more { text-align: center; color: var(--text-soft); font-size: 11px; padding: 8px 0 2px; opacity: .85; }
.lg-item { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px dashed var(--border); }
.lg-item:last-child { border-bottom: none; }
.lg-item-ic { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--surface-2); }
/* emoji 图标在各系统字体缺失时兜底 */
.lg-item-ic, .lg-row-ic, .lg-cat-ic { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; }
.lg-item-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.lg-item-mid > b { font-size: 12.5px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.lg-item-mid > i { font-style: normal; font-size: 11.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-item-date { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--text-soft); }
.lg-item-amt { flex-shrink: 0; font-size: 13.5px; font-weight: 800; font-family: var(--font-mono); }
.lg-del {
  border: 0; background: transparent; color: var(--text-soft); flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1;
}
.lg-del:hover { background: rgba(229,72,77,.14); color: #e5484d; }
@media (max-width: 640px) {
  .lg-cats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .lg-cat-ic { font-size: 17px; }
  .lg-amount { font-size: 26px; }
  .lg-bal { font-size: 23px; }
}

.my-board-empty { text-align: center; color: var(--text-soft); padding: 60px 20px; font-size: 14px; }

/* ���ӵ��ҵ���ҳ�ķ��ࣺ������չʾ���롸������ַ�����һ�£� */
.my-home-cats { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.my-home-cats-label { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 900; margin-bottom: 12px; }
.my-home-cats-sub { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
/* 已添加到首页的分类：顶部一行标签栏（精致分段控件风格，统一收进磨砂轨道）
   激活项为嵌入轨道内的「凸起渐变滑块」，比松散药丸更整体、更有层级 */
.my-home-cats-tabs {
  display: flex; align-items: center; gap: 3px;
  width: fit-content; max-width: 100%;
  margin-bottom: 14px; padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 1px 2px rgba(0,0,0,.04);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.my-home-cats-tabs::-webkit-scrollbar { display: none; }
.my-home-cat-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap;
  padding: 8px 15px; border-radius: 10px;
  transition: color .2s ease, background .2s ease, box-shadow .28s cubic-bezier(.34,1.3,.64,1), transform .16s ease;
}
.my-home-cat-tab:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); }
.my-home-cat-tab:active { transform: scale(.96); }
.my-home-cat-tab.active {
  color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 45%, transparent),
              0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent);
  transform: translateY(-1px);
}
.mhct-ic { font-size: 15px; line-height: 1; }
.my-home-cat-tab.active .mhct-ic { filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)); }
.mhct-cnt {
  font-size: 11px; font-weight: 700; line-height: 1; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-soft) 14%, transparent); color: var(--text-soft);
  transition: background .2s, color .2s;
}
.my-home-cat-tab.active .mhct-cnt { background: rgba(255,255,255,.22); color: #fff; }
.mhct-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 1px; border-radius: 50%;
  font-size: 10px; line-height: 1; color: var(--text-soft); opacity: 0; cursor: pointer;
  transition: opacity .15s, color .15s, background .15s;
}
.my-home-cat-tab.active .mhct-remove { opacity: .6; }
.my-home-cat-tab:hover .mhct-remove,
.my-home-cat-tab:focus-within .mhct-remove { opacity: 1; }
.mhct-remove:hover { color: #fff; background: #d23b53; opacity: 1; }
.my-home-cat-panel { animation: mhct-fade .18s ease; }
@keyframes mhct-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.my-home-cat-panel .icon-grid { gap: 10px 8px; padding: 2px 0 4px; }
.my-home-cat-panel .icon-card-icon { width: 48px; height: 48px; border-radius: 13px; font-size: 20px; border: none; box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.my-home-cat-panel .icon-card-icon .fav-letter { background: var(--tile, linear-gradient(135deg, var(--primary), var(--primary-2))); }
.my-home-cat-panel .icon-card-name { font-size: 12px; font-weight: 700; margin-top: 2px; }

/* ���ҵķ��ࡹ���ڵġ����ӵ��ҵ���ҳ����ť */
.mg-cat-acts { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.my-cat-home { border-style: solid; border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); font-weight: 600; }
.my-cat-home:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.my-cat-home.is-on { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 35%, transparent); }
@media (max-width: 640px) {
  .mg-cat-cnt { display: none; }
  .my-cat-home { font-size: 11.5px; padding: 4px 8px; }
}

/* ===== �������ļ��п�Ƭ ===== */
.folder-link { background: none; border: none; font: inherit; color: inherit; cursor: pointer; width: 100%; padding: 0; }
.folder-card .icon-card-icon { overflow: visible; color: var(--primary); background: transparent; border-color: transparent; box-shadow: 0 4px 12px rgba(0,0,0,.10); position: relative; }
/* folder tab notch (top-left): keeps body transparent but clearly reads as a folder (bimiseek-style cue) */
.folder-card .icon-card-icon::before {
  content: ''; position: absolute; left: 4px; top: -4px; width: 18px; height: 7px;
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-bottom: none; border-radius: 5px 5px 0 0; z-index: 0;
}
/* folder: transparent base, only a light border, exposing stacked site mini-icons */
.folder-icon { position: relative; display: flex; align-items: center; justify-content: center; }
.folder-imgs { position: relative; width: 100%; height: 100%; display: block; z-index: 1; }
.folder-mini {
  position: absolute; width: 60%; height: 60%; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow: 0 2px 6px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
/* first mini centered as the main icon; others offset to stack (folder holds many icons) */
.folder-mini:nth-child(1) { inset: 8%; }
.folder-mini:nth-child(2) { top: 12%; right: -2%; }
.folder-mini:nth-child(3) { bottom: -2%; left: 6%; }
.folder-mini:nth-child(4) { top: -4%; left: 2%; }
.folder-mini .site-icon, .folder-mini .fav-letter, .folder-mini .fav-img {
  width: 100%; height: 100%; border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.folder-mini .fav-letter { font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.folder-mini .fav-img { object-fit: cover; }
.folder-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* folder delete button under manage mode (follows .icon-card-acts reveal rule)
   requirement: hidden completely (display:none) outside edit state;
   only shown inside manage mode (.is-edit) */
.folder-acts { display: none; }
.icon-grid.is-edit .folder-acts,
.my-unified-grid.is-edit .folder-acts,
.my-cat-unified-grid.is-edit .folder-acts { display: flex; }
.folder-acts .ic-act.danger { position: absolute; top: -2px; right: calc(50% - 44px); }

/* ===== �ƶ�����ק������Ƭ / ������ / ��ס���� ===== */
/* 桌面端 Sortable 拖拽：非编辑态也能直接拖动排序，按下时给出抓取反馈 */
.icon-card.sortable-chosen { cursor: grabbing; }
.icon-grid .icon-card.sortable-ghost { opacity: .3; }
.icon-card.dragging { opacity: .25; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  transform: scale(1.08); opacity: .96;
  box-shadow: 0 14px 32px rgba(0,0,0,.30); border-radius: 14px; background: var(--surface);
  animation: none !important; /* ��¡�岻���붶�� */
}
.icon-card.drop-target .icon-card-icon { box-shadow: 0 0 0 3px var(--primary), 0 3px 10px rgba(0,0,0,.10); }
.icon-card.drop-target .icon-card-name { color: var(--primary); }
/* bimiseek����ͣ 850ms ��װ��� �� Ŀ��Ŵ�scale-1.1�������ּ�����/���� */
.icon-card.drop-target.armed { transform: scale(1.1); z-index: 6; }
.icon-card.drop-target.armed .icon-card-icon { box-shadow: 0 0 0 4px var(--primary), 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent); }
/* hold-850ms progress ring: conic fills 0->100% in .85s, @property registers --lpProg as <number> for smooth interp */
@property --lpProg { syntax: '<number>'; initial-value: 0; inherits: false; }
.icon-card.drop-target.arming::after {
  content: ''; position: absolute; left: 50%; top: 5px; width: 46px; height: 46px; margin-left: -23px;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--primary) calc(var(--lpProg) * 1%), color-mix(in srgb, var(--primary) 14%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
          mask: radial-gradient(circle, transparent 54%, #000 56%);
  --lpProg: 0;
  animation: lpDropProgress .85s linear forwards;
}
@keyframes lpDropProgress { to { --lpProg: 100; } }
@media (prefers-reduced-motion: reduce) {
  .icon-card.drop-target.arming::after { animation: none; --lpProg: 100; }
}

/* ===== �ļ��е������ƶ��˵ײ����� / ����˾��У� ===== */
.folder-modal-mask {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; padding: 0;
}
.folder-modal-mask.show { opacity: 1; }
.folder-modal {
  width: 100%; max-width: 460px; background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 82vh; overflow: auto;
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
  transform: translateY(16px); transition: transform .2s;
}
.folder-modal-mask.show .folder-modal { transform: none; }
@media (min-width: 768px) {
  .folder-modal-mask { align-items: center; }
  .folder-modal { border-radius: 18px; max-height: 72vh; }
}
.folder-modal-head { display: flex; align-items: center; gap: 10px; }
.folder-modal-titlewrap { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.folder-modal-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.folder-modal-ic svg { width: 22px; height: 22px; }
.folder-modal-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; border: none; background: transparent; color: var(--text); padding: 6px 4px; border-radius: 8px; }
.folder-modal-name:focus { outline: none; background: var(--surface-2); }
.folder-modal-close { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: 14px; }
.folder-modal-close:hover { color: var(--text); border-color: var(--text-soft); }
.folder-modal-sub { font-size: 12.5px; color: var(--text-soft); margin: 8px 2px 12px; }
/* �½��ļ��У���ѡ�б��������ţ�checkbox + ͼ�� + ���ƣ� */
.folder-create-list { display: flex; flex-direction: column; gap: 8px; }
.folder-create-list .folder-site-fav { width: 34px; height: 34px; border-radius: 9px; border: none; box-shadow: none; background: var(--surface); flex-shrink: 0; }
.folder-create-list .folder-site-fav .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; font-size: 15px; }
.folder-create-list .folder-site-fav .fav-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.folder-create-list .folder-site-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* �ļ��е�������Ա�������� */
.folder-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px 8px; padding: 2px 0 4px; }
.folder-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; transition: background .12s, border-color .12s, transform .08s; }
.folder-tile:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--primary) 55%, transparent); transform: translateY(-1px); }
.folder-tile-link { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); width: 100%; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.folder-tile-fav { width: 38px; height: 38px; border-radius: 10px; border: none; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.folder-tile-fav .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; font-size: 16px; color: #fff; }
.folder-tile-fav .fav-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.folder-tile-name { font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* �Ƴ��DZ꣺bimiseek ͬ�?�����£����༭ģʽ��ʾ���� .folder-modal.anchored.edit-mode ���򣩣�����Ƴ� */
.folder-tile-out { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--text) 78%, transparent); color: var(--surface); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .12s, transform .08s; }
.folder-tile-out:hover { background: #d23b53; color: #fff; }
/* ===== bimiseek ͬ��ê�����㣺͸������� + scale-in + �༭̬���ԡ�?��������ɾ����ť ===== */
.folder-modal-mask.anchored { display: block; background: transparent; padding: 0; }
.folder-modal.anchored { position: fixed; width: auto; max-width: none; border-radius: 22px; padding: 12px 10px; box-shadow: 0 12px 40px rgba(0,0,0,.28); transform: none; transition: none; animation: fmScaleIn .16s ease-out; }
.folder-modal-mask.show .folder-modal.anchored { transform: none; }
@keyframes fmScaleIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 768px) { .folder-modal.anchored { border-radius: 22px; max-height: 60vh; } }
.folder-modal.anchored .folder-modal-head { gap: 6px; }
.folder-modal.anchored .folder-modal-name { text-align: center; font-size: 15px; font-weight: 700; }
.folder-modal.anchored .folder-tile-out { opacity: 0; pointer-events: none; }
.folder-modal.anchored.edit-mode .folder-tile-out { opacity: 1; pointer-events: auto; }
.folder-modal.anchored .folder-modal-foot { display: none; }
.folder-modal.anchored.edit-mode .folder-modal-foot { display: block; }
.folder-modal-foot { margin-top: 14px; }
.folder-modal-foot .btn-danger {
  width: 100%; padding: 11px; border-radius: 12px; border: 1px solid color-mix(in srgb, #d23b53 40%, var(--border));
  background: color-mix(in srgb, #d23b53 8%, var(--surface)); color: #d23b53; font-size: 14px; font-weight: 700; cursor: pointer;
}
.folder-modal-foot .btn-danger:hover { background: color-mix(in srgb, #d23b53 16%, var(--surface)); }
/* �½��ļ��У���ѡ�б� */
.folder-create-list { max-height: 46vh; overflow: auto; }
.folder-create-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface-2); cursor: pointer; user-select: none; transition: background .12s, box-shadow .12s;
}
.folder-create-item:hover { background: var(--surface-3, var(--surface-2)); }
.folder-create-item.on { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.folder-create-cb { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.folder-create-foot { display: flex; gap: 10px; }
.folder-create-foot .btn-ghost, .folder-create-foot .btn-primary { flex: 1; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); }
.folder-create-foot .btn-ghost { background: var(--surface); color: var(--text-soft); }
.folder-create-foot .btn-ghost:hover { border-color: var(--text-soft); color: var(--text); }
.folder-create-foot .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.folder-create-foot .btn-primary:hover { filter: brightness(1.06); }
.folder-create-foot .btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* ��Ƭ���� Action Sheet���ƶ��˳�����ַͼ�����ֺ󵯵ײ������˵���
   ���� .folder-modal �ײ�������ʽ���ƶ��˵ײ����룬����˾��У������Զ������ݡ� */
.card-action-sheet { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.card-action-sheet .folder-modal-head { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; gap: 10px; }
.card-sheet-fav { width: 30px; height: 30px; border-radius: 8px; border: none; box-shadow: 0 2px 5px rgba(0,0,0,.08); flex-shrink: 0; }
.card-sheet-fav .fav-letter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); border-radius: inherit; font-size: 14px; color: #fff; }
.card-sheet-fav .fav-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.card-sheet-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sheet-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.card-sheet-item { display: flex; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; border: none; background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; width: 100%; font-family: inherit; transition: background .12s; }
.card-sheet-item:active { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); }
.card-sheet-item.danger { color: #d23b53; }
.card-sheet-item.danger:active { background: color-mix(in srgb, #d23b53 12%, var(--surface-2)); }
.card-sheet-ic { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.card-sheet-label { flex: 1; }
.card-sheet-cancel { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .12s; }
.card-sheet-cancel:active { background: var(--surface-2); }

/* �ҵķ��ࣺ�ҵ���ҳ�ײ����򣨲ο� linglu �ײ�������ʽ��������ർ������ */
/* v2 升级：分类区视觉与交�? */
.my-cat-section-title { font-size: 18px; letter-spacing: -.1px; }
.my-cat-section-title .my-cat-cnt-pill { font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); margin-left: 2px; }
.my-cat-section-title .my-cat-cnt-home { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.my-cat-section-title .my-cat-cnt-hint { font-size: 12.5px; font-weight: 500; color: var(--text-soft); margin-left: 4px; letter-spacing: 0; }
.my-cat-section-title .my-cat-expand-hint { font-size: 12px; color: var(--text-soft); margin-left: 6px; font-weight: 500; }
.my-cat-section.collapsed .my-cat-section-title::after { transform: rotate(-90deg); }
.my-cat-section:not(.collapsed) .my-cat-section-title::after { transform: rotate(0deg); }
/* v2 紧凑化：分类卡片 padding 减小，图�?/文字更协�? */
.mg-cat-row { padding: 10px 12px; gap: 10px; }
.mg-cat-ic { font-size: 18px; }
.mg-cat-nm { font-size: 14px; }
/* v2 折叠态：列表收起，提示语也收起，整块视觉清爽 */
.my-cat-section.collapsed .my-panel-tip,
.my-cat-section.collapsed .my-cat-list { display: none; }

.my-cat-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.my-cat-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.my-cat-section-title { font-size: 17px; font-weight: 900; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.my-cat-section-title::after { content: '\2304'; font-size: 15px; line-height: 1; color: var(--text-soft); transition: transform .15s ease; transform: rotate(0deg); }
.my-cat-section.collapsed .my-cat-section-title::after { transform: rotate(-90deg); }
.my-cat-section.collapsed .my-panel-tip,
.my-cat-section.collapsed .my-cat-list { display: none; }
.my-cat-section-head .my-side-addcat { margin-left: auto; margin-top: 0; }
.my-cat-section .my-panel-tip { margin: 0 0 12px; }

/* PC �ˣ����ҵķ��ࡹĬ���Ӿ�չ���������жοհ״�������������Կ��ֶ��۵�������ȥ�أ����� #/my ���ظ��ġ�������վ/AI/�Ż�ȯ/���졹��� */
@media (min-width: 1024px) {
  body.route-my .top-nav { display: none; }
}

/* ����������� */
.widget-picker-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-item {
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.wp-item:hover { border-color: var(--primary); }
.wp-item.added { opacity: .55; cursor: default; }
.wp-ic { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.wp-ic svg { width: 18px; height: 18px; display: block; }
.wp-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-name { font-weight: 800; font-size: 14px; }
.wp-desc { font-size: 11.5px; color: var(--text-soft); }
.wp-state { font-size: 12px; font-weight: 700; color: var(--primary); flex-shrink: 0; }
.wp-item.added .wp-state { color: var(--text-soft); }
/* �������ӡ�̬ǿ����ͼ��оƬת�̣���ȷ��������¼�� */
.wp-item.added .wp-ic { background: color-mix(in srgb, var(--emerald) 14%, transparent); color: var(--emerald); }

/* �ƶ��ˣ��ϸ� linglu �� �����Ĭ�ϲ���ʾ����Сͼ�껬������հ����� */
@media (max-width: 768px) {
  /* ���������У������ṩ���� */
  .my-start { flex-direction: column; align-items: stretch; min-height: 0; }

  /* ����������߳��룬Ĭ�ϲ�����Ļ�⣨icon-only����ǩ���أ����� linglu mxs:hidden�� */
  .my-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    width: 66px; flex-direction: column; align-items: center; gap: 4px;
    padding: 18px 0 20px; transform: translateX(-100%);
    transition: transform .24s ease;
    background: rgba(36, 36, 36, 0.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.32);
    min-height: 100vh; max-height: none; overflow-y: auto;
  }
  .my-sidebar.open { transform: translateX(0); }
  .my-side-logo { width: 40px; height: 40px; font-size: 16px; margin-bottom: 8px; }
  .my-side-item { width: 100%; padding: 9px 2px; font-size: 10.5px; }
  .my-side-lb { font-size: 10.5px; }                 /* �ֻ��ˣ�ͼ������ʾ���� */
  .my-side-divider { width: 26px; margin: 8px 0; }
  .my-side-foot { padding-top: 12px; }

  /* ��ʼҳ���������ƶ��ˣ�����ʾ�˵����أ��������򻬶��������ӿڶ��� */
  .my-topbar-inner { padding: 7px 10px; gap: 6px; }
  /* 移动端：左侧竖栏已回退为顶部横条且不再含 logo，品牌入口由 .my-tb-brand 承载 */
  .my-tb-toggle { display: none; }
  .my-tb-brand { display: flex; }
  .my-tb-link { padding: 7px 11px; font-size: 12.5px; }
  /* �ƶ��ˣ��Ҳ������ť��Ϊͼ��-only */
  .my-tb-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .my-tb-lb { display: none; }

  /* �������֣����������հ״����� */
  .my-side-backdrop {
    display: block; position: fixed; inset: 0; z-index: 190;
    background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .my-side-backdrop.show { opacity: 1; pointer-events: auto; }

  /* �������� */
  .my-board { padding: 0 12px 28px; }
  /* �ֻ��ˣ����У��� minmax(0,1fr) ��ֹ�����С���ݿ��Ȱ��г��Ƶ��º�������������ɻ�������򱣳�ͨ���� */
  /* 移动端：网格降级为单列流式（用 !important 覆盖 JS 写入的行内格位，
     保证任何自定义排布在窄屏都不会溢出或错位） */
  .my-widget-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  /* 移动端必须降级为 inline-size。
     container-type: size 会让 body 的固有高度恒为 0，于是 grid-auto-rows: auto 下卡片高度
     只能靠 min-height 兜底，超出部分被 .my-widget 的 overflow: hidden 整段裁掉
     —— 这就是「热搜只显示两条」的根因：光调 min-height / overflow 治不好，必须先解掉 size containment。
     降级后卡片高度重新由内容决定；宽度类容器查询（max-width: 168px）照常生效，
     只影响「拖到很矮」时的高度降级（移动端卡片是内容高，永远不会矮到要降级）。 */
  .my-widget-body { container-type: inline-size; }
  .my-widget {
    grid-column: 1 / -1 !important; grid-row: auto !important;
    /* 152px = 标题栏 26 + 上下内边距 24 + 内容区 ~80（含农历/年度进度、体感/湿度等次要行）。
       低于这个高度会触发卡片内的「矮容器降级」，把次要信息收起来，反而看不到东西。 */
    min-height: 152px; padding: 12px;
  }
  /* 单列下无需拖拽/缩放：隐藏把手并常驻显示操作按钮（触屏无 hover） */
  .my-widget-resize { display: none; }
  .my-widget-head { cursor: default; }
  .my-widget-acts { opacity: 1; }
  /* v2 移动端：2 列窄卡，大数字按比例缩放但仍保持「数据感�? */
  .mw-cal-day { font-size: 42px; letter-spacing: -1.5px; }
  .mw-weather-temp { font-size: 34px; letter-spacing: -1px; }
  /* 移动端卡片是满宽的，副信息没必要竖着堆三行——改横排一行放下，
     高度从 ~57px 压到 ~20px，农历和年度进度条才不会被卡片高度裁掉 */
  .mw-cal-side { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
  /* ������ַ���� */
  .my-links-section { margin-bottom: 14px; }
  .my-section-head { margin-bottom: 10px; }
  .my-section-title { font-size: 16px; }
  .my-links-grid .icon-grid { grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
  .my-links-grid .icon-card-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 19px; }
  /* v2 移动端：常用网址仍需是最醒目的区块，标题比通用标题�? 1 �? */
  .my-links-section .my-section-title { font-size: 17px; }
  .my-section-sub { font-size: 11.5px; padding: 2px 7px; }
  /* �ֻ��˳�����ַ��ͷ�����طDZ�Ҫ���꽺�ң�ѹ��˫��ť��ȷ�����в����� */
  .my-section-sub { display: none; }
  .my-section-head { flex-wrap: nowrap; gap: 8px; }
  .my-section-title { white-space: nowrap; }
  .my-section-actions { gap: 6px; flex-shrink: 0; }
  .my-section-manage { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
  .my-quick-head { margin-top: 8px; }
  .my-links-empty { padding: 14px; font-size: 12.5px; gap: 10px; }
  .my-links-empty .mle-ic { width: 34px; height: 34px; font-size: 17px; }
  .widget-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* խ�����Ƴ���ť�������Ӵ󣬱��ڵ㰴 */
  .my-widget-remove { width: 36px; height: 36px; }
  /* �ҵķ��ࣺ�ֻ���չ������ַ��Ϊ���У�����������ʾ������ʡ�ԺŽضϣ�������ʾСͼ�� */
  .mg-cat-wrap.mg-expanded .mg-site-wrap { grid-template-columns: 1fr; gap: 7px; }
  .mg-site-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; line-height: 1.35; }
}
/* ��խ������360px��������̫����������Ϊ���У����ױ��������� */
@media (max-width: 360px) {
  .my-widget-grid { grid-template-columns: 1fr; }
}

/* ������ֽ���� �� UI �ع���linglu ���ˮƽ tabs + ��ʵͼƬ����ͼ�� */
.wp-presets { margin: 4px 0 8px; padding: 0 22px; max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
.wp-presets::-webkit-scrollbar { width: 8px; }
.wp-presets::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 24%, transparent); border-radius: 8px; }
.wp-presets::-webkit-scrollbar-track { background: transparent; }
.wp-url-row { padding: 0 22px; }
.wp-actions { padding: 6px 22px 0; }
/* 实时预览：拟物桌面框，展示壁纸在「我的首页」上的实际效果 */
.wp-preview { margin: 2px 0 10px; }
.wp-preview-stage {
  position: relative; aspect-ratio: 16 / 8; border-radius: 18px; overflow: hidden;
  background: #1b1f2a; border: 1px solid color-mix(in srgb, var(--primary) 14%, #dfe2ea);
  box-shadow: 0 12px 30px rgba(20,24,38,.16), inset 0 0 0 1px rgba(255,255,255,.08);
}
.wp-preview-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity .35s, transform .6s cubic-bezier(.22,.61,.36,1); transform: scale(1.02);
}
/* 无壁纸（默认）预览：还原页面真实干净背景，跟随主题，并去掉压暗的 scrim */
.wp-preview-stage.no-wp { background: var(--bg); }
.wp-preview-stage.no-wp .wp-preview-scrim { opacity: 0; }
.wp-preview-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(0deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 40%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
}
.wp-preview-ui {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 16px;
}
.wp-preview-search {
  width: min(62%, 360px); display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; color: #4a4a5a;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.6);
}
.wp-preview-search-ic { font-size: 13px; opacity: .7; }
.wp-preview-dock { display: flex; gap: 12px; }
.wp-dot {
  width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.28); box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.wp-preview-sel {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(20,22,34,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 2px 10px rgba(0,0,0,.25);
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 壁纸弹窗整体：更宽更精致 */
.wallpaper-modal { max-width: 780px; }
.wallpaper-modal .wp-preview-stage { height: 230px; aspect-ratio: auto; }
/* 弹窗顶部：标题 + 副标题 + 关闭按钮 */
.wallpaper-modal .modal-body { padding: 0; overflow-y: auto; }
.wp-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 14px 22px 0;
}
.wp-title h3 {
  margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: .2px;
  color: var(--text);
}
.wp-title p {
  margin: 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.4;
}
.wp-header .modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text-soft); font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .1s;
  flex-shrink: 0;
}
.wp-header .modal-close:hover {
  background: var(--primary); color: #fff; transform: rotate(90deg);
}

/* 水平 tabs：简洁风格 + 滑动 indicator */
.wp-tabs {
  display: flex; gap: 4px; padding: 0 4px;
  border-bottom: 1px solid var(--border);
  margin: 8px 22px 8px;
  position: relative;
}
.wp-tab {
  flex: 1; min-width: 0; padding: 9px 6px 9px;
  border: none; background: transparent; color: var(--text-soft);
  border-radius: 10px 10px 0 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color .2s, background .2s;
  position: relative;
}
.wp-tab:hover { color: var(--text); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.wp-tab.active { color: var(--primary); font-weight: 700; }
.wp-tab-icon { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.wp-tab-icon svg { width: 15px; height: 15px; display: block; }
.wp-tab-label { font-size: 13.5px; font-weight: inherit; line-height: 1.2; }
.wp-tab-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary); font-size: 10px; font-weight: 700;
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.wp-tab.active .wp-tab-count { background: var(--primary); color: #fff; }
.wp-tab-indicator {
  position: absolute; bottom: -1px; left: 0; height: 2.5px;
  background: var(--primary); border-radius: 2px 2px 0 0;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), width .28s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -1px 8px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* 预览区上边距微调 */
.wp-preview { padding: 0 22px; margin: 8px 0 12px; }

/* panel：默认全隐藏，切换淡入上移 */
.wp-panel { display: none; animation: wpFadeIn .22s cubic-bezier(.22,.61,.36,1); }
.wp-panel.active { display: block; }
@keyframes wpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 网格：响应式子项，宽屏多列、窄屏自动减列，避免图片过多时撑爆弹窗 */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

/* 壁纸卡片：高级圆角、柔和阴影、悬停微浮 */
.wp-preset {
  aspect-ratio: 16 / 9; border-radius: 16px; border: 2px solid transparent; cursor: pointer; position: relative;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s, border-color .16s, outline-color .16s;
  box-shadow:
    0 2px 6px rgba(0,0,0,.08),
    0 6px 18px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(255,255,255,.12);
  background-color: color-mix(in srgb, var(--primary) 7%, transparent);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  overflow: hidden;
}
.wp-preset.is-solid {
  border-radius: 16px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.08),
    0 6px 18px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* 图片类卡片：双背景 fallback */
.wp-preset.is-image {
  background-size: cover, cover;
  background-position: center, center;
}
/* 未加载时的骨架微光 */
.wp-preset.is-image::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 5%, transparent) 0%, color-mix(in srgb, var(--primary) 16%, transparent) 50%, color-mix(in srgb, var(--primary) 5%, transparent) 100%);
  background-size: 200% 100%; animation: wpShimmer 1.4s linear infinite;
  opacity: 0; transition: opacity .25s;
}
.wp-preset.is-image:not(.img-loaded)::before { opacity: 1; }
@keyframes wpShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* 图片名称标签：常驻底部渐变遮罩，hover 时更明显 */
.wp-preset .wp-preset-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.65) 100%);
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  letter-spacing: .2px;
  text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
  opacity: .92;
  transform: translateY(0);
  transition: opacity .2s, transform .2s;
}
.wp-preset.is-solid .wp-preset-label {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 8px 10px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.25) 100%);
  border-radius: inherit;
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.wp-preset:hover .wp-preset-label { opacity: 1; }

/* 选中勾选标记：右上角小圆徽 */
.wp-preset .wp-preset-tick {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 0 0 1.5px rgba(255,255,255,.25);
  opacity: 0; transform: scale(.6); transition: opacity .18s, transform .18s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.wp-preset.active .wp-preset-tick { opacity: 1; transform: none; }

.wp-preset:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 10px 26px rgba(0,0,0,.15),
    0 4px 10px rgba(0,0,0,.08),
    inset 0 0 0 1px rgba(255,255,255,.18);
  z-index: 1;
}
.wp-preset.active {
  border-color: rgba(255,255,255,.9);
  outline: 2.5px solid var(--primary);
  outline-offset: 1.5px;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--primary) 22%, transparent),
    0 4px 12px rgba(0,0,0,.12);
}
.wp-preset.active:hover { transform: translateY(-3px) scale(1.015); }

/* 第2项：图片 tab 首项「无壁纸」占位卡片 */
.wp-preset.no-wallpaper {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border: 2px dashed var(--border);
  box-shadow: none;
}
.wp-preset.no-wallpaper .wp-preset-label {
  background: none; text-shadow: none; color: var(--text-soft); font-weight: 700;
}
.wp-preset.no-wallpaper:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.wp-preset.no-wallpaper.active {
  border-color: var(--primary); border-style: solid;
  outline: 2.5px solid var(--primary); outline-offset: 1.5px;
}

/* 第2项：自定义面板——URL 行移入 panel，上传区 */
.wp-panel-custom { padding: 6px 0 10px; }
.wp-panel-custom .wp-url-row { padding-left: 0; padding-right: 0; margin: 0 0 12px; }
.wp-upload-row { display: flex; gap: 8px; align-items: center; }
.wp-upload-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px dashed var(--border); background: color-mix(in srgb, var(--bg) 60%, var(--surface)); color: var(--text);
  border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wp-upload-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.wp-custom-hint { margin: 10px 0 0; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

.wp-url-row { display: flex; gap: 8px; margin-bottom: 12px; margin-top: 12px; }
.wp-url-input { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.wp-url-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.wp-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--primary) 22%, transparent); margin-top: 6px; }
.wp-actions .wp-actions-hint { font-size: 11.5px; color: var(--text-soft); }

@media (max-width: 1024px) {
  .wp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
  .my-hero { margin: 0 auto 16px; padding: 16px 4px 12px; }
  /* 移动端眉行：与搜索框同宽铺满，情境文字截断让位按钮 */
  .my-hero-subrow { max-width: none; margin: -4px auto 10px; padding: 0 2px; }
  .my-hero-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 移动端：顶栏与搜索栏间距缩小 + 搜索框文本输入区扩大（更大字号/更高输入框，周边按钮收窄让出宽度） */
  .my-hero .search-input { font-size: 17px; padding: 15px 6px; }
  .my-hero .engine-trigger .eng-name { display: none; }
  .my-hero .engine-trigger { padding: 0 4px; }
  .my-hero .scope-btn, .my-hero .cat-trigger { padding: 0 9px; }
  .my-search { max-width: none; gap: 6px; padding: 6px 6px 6px 8px; }
  .mscope { padding: 5px 9px; font-size: 12px; }
  .my-search-btn { padding: 8px 13px; font-size: 13px; }
  .my-engine-trigger { width: 32px; height: 32px; }
  .wp-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .wp-tabs { margin: 10px 18px 12px; }
  .wp-tab { padding: 8px 6px 9px; }
  .wp-tab-label { font-size: 12.5px; }
  .wp-tab-icon { font-size: 13px; }
  .wp-preset { border-radius: 14px; }
}

@media (max-width: 480px) {
  .wp-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
  .wp-tab-label { font-size: 12px; gap: 3px; }
  .wp-preset .wp-preset-label { font-size: 11px; padding: 16px 6px 6px; }
  .wp-presets { padding: 0 14px; }
  .wp-url-row { padding: 0 14px; }
}
@media (max-width: 480px) {
  .my-links-grid .icon-grid { grid-template-columns: repeat(4, 1fr); }
  .wp-tabs { margin: 8px 14px 10px; }
  .wp-tab { padding: 7px 4px 8px; gap: 4px; }
  .wp-tab-label { font-size: 12px; }
  .wp-tab-icon { font-size: 12px; }
  .wp-preview { padding: 0 14px; }
}

/* �໬��壨������� / �ҵ��ύ���Ӳ��������ij��룩 */
.side-panel-mask {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.42); backdrop-filter: blur(3px);
  display: flex; align-items: stretch; justify-content: flex-start;
  animation: fadeInPanel .15s ease;
}
@keyframes fadeInPanel { from { opacity: 0; } to { opacity: 1; } }
.side-panel {
  width: 340px; max-width: 92vw; height: 100%;
  background: var(--surface); color: var(--text);
  display: flex; flex-direction: column;
  box-shadow: 6px 0 28px rgba(0,0,0,.28);
  animation: slideInPanel .2s ease;
}
@keyframes slideInPanel { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.side-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.side-panel-close {
  border: none; background: transparent; color: var(--text-soft); font-size: 18px;
  cursor: pointer; padding: 8px 10px; min-width: 44px; min-height: 44px; border-radius: 8px;
}
.side-panel-close:hover { background: var(--surface-2); }
.side-panel-actions { display: flex; align-items: center; gap: 2px; }
.side-panel-clear {
  border: none; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 8px 12px; min-height: 44px; border-radius: 8px;
}
.side-panel-clear:hover { background: #ffe9ec; color: #d23b53; }
.side-panel-body { padding: 14px 18px; overflow-y: auto; flex: 1; }

/* ===== 我的首页内容�? UI 细节优化（不动主框架）：统一图标芯片语言 + 问候语 + 胶囊微交�? ===== */
/* 区块标题图标芯片：与「今日概览」信息块同一�? Lucide 线性图标语言 */
.my-sec-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.my-sec-ico svg { width: 19px; height: 19px; }
.my-sec-ico--sm { width: 30px; height: 30px; border-radius: 9px; }
.my-sec-ico--sm svg { width: 16px; height: 16px; }
/* 区块标题字重收一档，与图标芯片形成统一轻盈层级 */
.my-section-title { font-weight: 800; }
.my-cat-section-title { font-weight: 800; }
/* 起始页 Hero 品牌区：wordmark 字标 + slogan，搜索框上方第一视觉焦点 */
.my-hero-brand {
  display: flex; flex-direction: column; align-items: center; margin-bottom: 28px;
  animation: heroBrandIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.mhb-logo { height: 60px; width: auto; display: block; }
.mhb-logo.logo-dark { display: none; }
[data-theme="dark"] .mhb-logo.logo-light { display: none; }
[data-theme="dark"] .mhb-logo.logo-dark { display: block; }
@keyframes heroBrandIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .my-hero-brand { animation: none; } }
@media (max-width: 720px) {
  .my-hero-brand { margin-bottom: 20px; }
  .mhb-logo { height: 42px; }
}
/* 快速访问胶囊：hover 微抬 + 阴影 + favicon 圆角统一 */
.my-quick-pill:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  box-shadow: 0 6px 16px rgba(59, 130, 246, .14);
}
.my-quick-pill .qpic { border-radius: 10px; }
.my-quick-pill .qpic .fav-letter,
.my-quick-pill .qpic img { border-radius: 10px; }

/* 易用性修复：「我的分类」卡片展开后，行内操作按钮（首�?/隐藏/删除）常驻可见，
   不必逐行 hover 才显；折叠态下列表本就隐藏，不受影响。仅作用�? #/my 底部该区�? */
.my-cat-section:not(.collapsed) .mg-cat-acts { opacity: 1; }

/* ===== UX 无障碍修复批次一 ===== */

/* R4 键盘焦点可见性：为所有可交互元素补 :focus-visible 焦点环（补偿此前 outline:none 导致的焦点丢失） */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, [role="link"]:focus-visible, [role="button"]:focus-visible,
[role="option"]:focus-visible, [role="menuitem"]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
  border-radius: 4px;
}
/* 输入框聚焦改用主色 ring（若原有 outline:none 则被上面规则覆盖）
   这里对已去 outline 的输入框再给一层内部阴影强调，避免与通用焦点环叠加怪异 */
.search-input:focus-visible, .my-search-input:focus-visible,
.pick-search:focus-visible, .folder-modal-name:focus-visible,
.note-md-src textarea:focus-visible, #noteContent:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* R5 reduced-motion 全局收敛：偏好减少动效的用户跳过绝大多数动画/过渡/平滑滚动。
   拖拽进度环(.arming)在 reduce 下仍走完动画——它承担"建夹倒计时"的语义反馈，
   故在此专门放行（保持 .85s 而非瞬间 100%，否则拖动过程失去时长暗示）。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .icon-card.drop-target.arming::after,
  .icon-card.drop-target.arming::after * {
    animation-duration: .85s !important;
  }
}

/* ==================== 首页优化批次（20260880） ==================== */

/* 天气卡：失败态重试按钮 + 缓存标注 */
.mw-retry {
  margin-top: 8px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .14s, transform .12s;
}
.mw-retry:hover { background: color-mix(in srgb, var(--primary) 15%, var(--surface)); }
.mw-retry:active { transform: scale(.96); }

/* ===== 移动端发现流/首页 feed：单列大卡 → 两列紧凑卡（信息密度翻倍） ===== */
@media (max-width: 640px) {
  .discovery .grid, .home-feed-section .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .discovery .site-card, .home-feed-section .site-card {
    flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 10px; border-radius: 14px;
  }
  .discovery .site-icon, .home-feed-section .site-icon {
    width: 44px; height: 44px; border-radius: 13px; font-size: 16px;
  }
  .discovery .site-main, .home-feed-section .site-main { width: 100%; }
  .discovery .site-name, .home-feed-section .site-name { font-size: 13.5px; padding-right: 4px; }
  .discovery .site-desc, .home-feed-section .site-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 11px; line-height: 1.35; margin-top: 2px; color: var(--text-soft);
  }
  .discovery .site-card, .home-feed-section .site-card { gap: 6px; }
  .discovery .card-actions, .home-feed-section .card-actions {
    position: absolute; top: 9px; right: 9px; padding-left: 0;
    flex-direction: row; align-items: center; gap: 5px;
  }
  .discovery .heat-badge, .home-feed-section .heat-badge { padding: 2px 6px; }
  /* 广告卡保持全宽横条，不参与两列 */
  .discovery .ad-card, .home-feed-section .ad-card { grid-column: 1 / -1; }
}

/* ===== 移动端分类页（如办公）：单列大卡 → 两列紧凑卡，减少右侧空白 ===== */
@media (max-width: 640px) {
  .cat-section:not(.discovery):not(.home-feed-section) .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .cat-section:not(.discovery):not(.home-feed-section) .site-card {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 10px; border-radius: 14px;
  }
  .cat-section:not(.discovery):not(.home-feed-section) .site-icon {
    width: 44px; height: 44px; border-radius: 13px; font-size: 16px;
  }
  .cat-section:not(.discovery):not(.home-feed-section) .site-main { width: 100%; }
  .cat-section:not(.discovery):not(.home-feed-section) .site-name { font-size: 13.5px; padding-right: 4px; }
  .cat-section:not(.discovery):not(.home-feed-section) .site-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 11px; line-height: 1.35; margin-top: 2px; color: var(--text-soft);
  }
  .cat-section:not(.discovery):not(.home-feed-section) .card-actions {
    position: absolute; top: 9px; right: 9px; padding-left: 0;
    flex-direction: row; align-items: center; gap: 5px;
  }
}

/* ============ 全站首页优化批次二（20260882）：B2 搜索联想 / C1 按钮淡入 ============ */

/* B2 搜索直达式：站内站点联想下拉（锚定在搜索框正下方） */
.search-box { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 130;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
  overflow: hidden; max-height: 330px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-suggest[hidden] { display: none; }
/* ===== 搜索框下拉面板（2345.com / hao123.com 同款：聚焦即展开，无需输入） =====
   实测 2345 参数：面板宽=输入框、白底、下沿圆角 8px、padding 12px 16px 6px；
   区块标题 12px #c2c2c4；热搜条目 14px/20px #666；序号 1红 2橙 3黄 其余灰；热搜双列各 5 条。 */
.search-drop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 125;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 14px 36px rgba(15, 23, 42, .16);
  padding: 12px 16px 10px; text-align: left;
  max-height: min(60vh, 420px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: sdIn .16s ease-out;
  opacity: 1; /* 默认不透明，避免 reduced-motion / 动画未启动时被误以为未展开 */
}
.search-drop[hidden] { display: none; }
@keyframes sdIn { from { transform: translateY(-4px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .search-drop { animation: none; } }
.sd-block + .sd-block { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.sd-title {
  font-size: 12px; font-weight: 400; color: var(--text-muted);
  padding: 0 0 9px; letter-spacing: .3px;
}
/* 热搜榜：双列（2345 同款），每列 5 条 */
.sd-hot { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 2px; }
.sd-hot-col { min-width: 0; }
.sd-hot-item {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  height: 22px; line-height: 22px; font-size: 14px; color: var(--text-soft);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  transition: color .12s;
}
.sd-hot-item:hover { color: var(--primary); }
.sd-num {
  flex: 0 0 auto; min-width: 14px; font-size: 14px; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.sd-hot-col .sd-hot-item:nth-child(1) .sd-num { color: #f60101; } /* 2345 实测：第1名红 */
.sd-hot-col .sd-hot-item:nth-child(2) .sd-num { color: #ff5c04; } /* 第2名橙 */
.sd-hot-col .sd-hot-item:nth-child(3) .sd-num { color: #ffb000; } /* 第3名黄 */
.sd-hot-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sd-loading, .sd-empty { font-size: 12px; color: var(--text-muted); padding: 2px 0; }
/* 搜索发现：入口胶囊（热搜榜 / 省钱助手 收进下拉，不再占页面纵向空间） */
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
  -webkit-tap-highlight-color: transparent;
}
.sd-chip .svg-ic { width: 14px; height: 14px; opacity: .9; }
.sd-chip:hover {
  color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.sd-chip:active { transform: scale(.97); }
@media (max-width: 480px) {
  .sd-hot { grid-template-columns: 1fr; column-gap: 0; }
  .search-drop { padding: 10px 12px 8px; }
}
.search-suggest .ss-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font: inherit; text-align: left; transition: background .12s ease;
}
.search-suggest .ss-item:hover,
.search-suggest .ss-item.active { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.search-suggest .ss-ic {
  width: 27px; height: 27px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 13px; font-weight: 700;
}
.search-suggest .ss-name {
  font-weight: 600; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.search-suggest .ss-host { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--text-soft); }
/* 窄屏：下拉贴满搜索框两侧留白，项内边距收紧 */
@media (max-width: 640px) {
  .search-suggest { border-radius: 12px; max-height: 46vh; }
  .search-suggest .ss-item { padding: 11px 13px; }
}

/* C1 首页态悬浮按钮（进入我的首页）：滚动超过一屏才淡入 */
.fab.is-home {
  opacity: 0; transform: translateY(18px) scale(.92);
  pointer-events: none;
  animation: none;
  transition: opacity .26s ease, transform .26s cubic-bezier(.2, .8, .3, 1);
}
.fab.is-home.fab-scrolled { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .fab.is-home { transition: none; transform: none; }
}

/* ===== 组件最小化：右侧垂直居中的浮动停靠条（PC / 手机都可见，纵向排列） ===== */
.my-dock {
  position: fixed; right: 14px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 62;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 52px; max-width: 52px; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 7px 6px; border-radius: 16px; scrollbar-width: none;
  background: rgba(22, 24, 31, 0.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}
.my-dock::-webkit-scrollbar { display: none; }
.md-head {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 1px 1px 5px 1px;
  color: rgba(255, 255, 255, 0.62); font-size: 11px; font-weight: 700;
  border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.md-head .md-ic { font-size: 12px; line-height: 1; }
.md-head .md-cnt {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(45, 212, 191, 0.22); color: #5eead4; font-size: 10px;
}
.md-item {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 0;
  padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 11px;
  background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.82);
  cursor: pointer; transition: background .15s, color .15s, transform .08s, border-color .15s;
}
.md-item:hover { background: rgba(255, 255, 255, 0.18); color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.md-item:active { transform: scale(.93); }
.md-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.md-ic svg { width: 18px; height: 18px; display: block; }
/* 窄竖条形态：只留图标，名称靠 title 提示，避免为了文字把停靠条撑宽压住内容 */
.md-lb { display: none; }
.md-item.is-sticky .md-ic { color: #fcd34d; }
@media (max-width: 768px) {
  /* 移动端同款竖条：更窄、贴右，垂直居中 */
  .my-dock { right: 8px; top: 50%; bottom: auto; transform: translateY(-50%); width: 46px; max-width: 46px; padding: 6px 5px; gap: 5px; }
  .md-item { width: 34px; height: 34px; }
}

/* ===== 便签组件：嵌在首页内容区里，随页面一起滚动（不再固定悬浮在视口上） ===== */
.my-sticky-layer { position: absolute; inset: 0; min-height: 80vh; z-index: 60; pointer-events: none; }
.my-sticky-layer .my-widget { pointer-events: auto; }
.my-sticky {
  padding: 8px 9px 10px; border-radius: 12px;
  background: var(--st-bg, #fef3c7); color: var(--st-tx, #78350f);
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .22);
  overflow: visible;
}
/* 便签外观（头部「外观」按钮可切）：毛玻璃 = 便签配色半透明 + 模糊；无边框 = 透明仅留虚线 */
.my-sticky.frame-glass {
  background: color-mix(in srgb, var(--st-bg, #fef3c7) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .5);
}
.my-sticky.frame-plain {
  background: transparent; border: 1px dashed rgba(0, 0, 0, .22); box-shadow: none;
}
.my-sticky .my-widget-head { margin-bottom: 6px; cursor: grab; }
.my-sticky.is-dragging { cursor: grabbing; box-shadow: 0 16px 34px rgba(15, 23, 42, .3); }
.my-sticky .my-widget-title { font-size: 12px; color: var(--st-tx); opacity: .8; }
.my-sticky .my-widget-ic { background: var(--st-hd); color: var(--st-tx); }
.my-sticky .my-widget-act { color: var(--st-tx); opacity: .72; }
.my-sticky .my-widget-act:hover { background: rgba(0, 0, 0, .1); color: var(--st-tx); opacity: 1; }
/* 便签自带配色，「外观（卡片/毛玻璃/无边框）」对它没意义，去掉以腾出拖动区 */
.my-sticky .my-widget-title { flex: 1; min-width: 0; cursor: grab; }
.my-sticky .my-widget-body { padding: 0; }
.st-text {
  width: 100%; height: 100%; resize: none; border: none; outline: none;
  background: transparent; color: var(--st-tx);
  font-size: 13px; line-height: 1.55; font-family: inherit;
}
.st-text::placeholder { color: var(--st-tx); opacity: .45; }
.my-sticky .my-widget-resize { width: 14px; height: 14px; bottom: 2px; right: 2px; }
@media (max-width: 640px) {
  .my-sticky { box-shadow: 0 8px 20px rgba(15, 23, 42, .26); }
}

/* ===== SEO / 可访问性：跳转到主内容（默认隐藏，键盘聚焦时显示） ===== */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 5000;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* 无障碍：仅供读屏/SEO 的标题，不占布局（#/my、#/notes、#/todos 这类应用内页没有可见标题，
   但每页仍需且仅需一个 h1——之前它们因为首页 slogan 降级而变成 0 个） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- 笔记工具栏：图片下拉、行内输入条 ---- */
.note-md-bar { position: relative; }
.md-menu {
  position: absolute; top: 100%; right: 0; z-index: 20; min-width: 132px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.md-menu-item {
  border: none; background: transparent; text-align: left; padding: 8px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap;
}
.md-menu-item:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }

.note-md-inline {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 0 2px 8px;
}
.note-md-inline-t { font-size: 12px; font-weight: 700; color: var(--text-soft); flex-shrink: 0; }
.note-md-inline-input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; font-size: 12.5px; background: var(--surface-2); color: var(--text); outline: none;
}
.note-md-inline-input:focus { border-color: var(--primary); }
.mini-btn.primary { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

/* 待办清单：可勾选，勾上后划线（之前是 disabled，点了没反应） */
.note-ed-content ul.task-list { list-style: none; padding-left: 22px; }
.note-ed-content li.task-list-item { display: block; padding-left: 20px; margin: 3px 0; }
.note-ed-content li.task-list-item input[type="checkbox"] {
  margin-left: -20px; margin-right: 4px; width: 15px; height: 15px;
  vertical-align: -2px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
}
.note-ed-content li.task-list-item.done { text-decoration: line-through; opacity: .5; }
/* 编辑区里的图片别撑爆面板 */
.note-ed-content img { max-width: 100%; height: auto; }

/* ===== 日历：左右两栏布局（参考 2345 万年历：左月历 / 右黄历详情+本月节日） =====
   桌面容器宽度对齐首页 .content（1200px）；右栏由 1.12fr:1fr 收窄为 1.6fr:1fr，
   让月历网格获得更宽空间、右栏（黄历详情/本月节日）更紧凑。 */
.calendar-view { max-width: 1200px; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-main { min-width: 0; }
.cal-aside { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* 休假日标识：仅「官方放假日」（CN_HOLIDAYS.rest / 法定节日）标「休」并标红；
   常规周六日不再标注。调休补班日标「班」（蓝色，见下方 .cal-work）。 */
.cal-cell.rest:not(.today) .cal-cell-day { color: #ef4444; }
.cal-cell.rest:not(.today) .cal-cell-lunar { color: #ef4444; opacity: .9; }
.cal-rest { position: absolute; top: 4px; right: 5px; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 5px; background: #ef4444; color: #fff; font-weight: 800; letter-spacing: .5px; }
.cal-cell.today .cal-rest { background: rgba(255,255,255,.92); color: var(--primary); }
/* 调休补班「班」角标（蓝系，与「休」区分） */
.cal-work { position: absolute; top: 4px; right: 5px; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 5px; background: #2563eb; color: #fff; font-weight: 800; letter-spacing: .5px; }
.cal-cell.work:not(.today) .cal-cell-day { color: #2563eb; }
.cal-cell.work:not(.today) .cal-cell-lunar { color: #2563eb; opacity: .9; }
.cal-cell.today .cal-work { background: rgba(255,255,255,.92); color: #2563eb; }
/* 右侧详情：进入两栏后去掉原来的靠下外边距 */
.cal-detail { margin-top: 0; }
/* 本月节日 / 休假日列表 */
.cal-holiday-list { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; }
.cal-holiday-list-h { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.cal-holiday-empty { font-size: 13px; color: var(--text-soft); }
.cal-holiday-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-holiday-item { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; }
.cal-holiday-date { color: var(--text-soft); font-variant-numeric: tabular-nums; min-width: 44px; }
.cal-holiday-name { font-weight: 600; flex: 1; }
.cal-holiday-item.rest .cal-holiday-name { color: #ef4444; }
.cal-holiday-tag { background: #ef4444; color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; font-weight: 800; }
.cal-holiday-tag.work { background: #2563eb; }
.cal-holiday-item.work .cal-holiday-name { color: #2563eb; }
@media (max-width: 860px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-holiday-list { order: 2; }
}

/* 首页门面条：日期 / 天气 改为可点击链接（→ 日历页 / 天气页） */
.hdw-link { color: var(--text); text-decoration: none; border-radius: 999px; padding: 2px 9px; transition: background .14s, color .14s; }
.hdw-link:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.hdw-date .hdw-link, .hdw-weather .hdw-link { font-weight: 600; }

/* 我的首页眉行：日期 / 天气 可点击链接 */
.mhs-link { color: var(--text-soft); text-decoration: none; border-radius: 999px; padding: 1px 7px; transition: background .14s, color .14s; }
.mhs-link:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.mhs-date { font-weight: 600; color: var(--text); }
.mhs-wx { color: var(--text-soft); }

/* ============ 首页专题页签（2345 风格，后台「专题管理」可配置） ============ */
.topic-board {
  max-width: 1200px; margin: 14px auto 0; padding: 0 16px;
}
.topic-board-inner {
  /* 2345 .kz-tabs-v2：外层 8px 圆角卡片，tab 栏压在顶部、内容面板在下方 */
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); overflow: hidden;
}
/* 一级专题页签：严格按 2345 .kz-tabs-nav —— 浅色栏 35px 高、顶部 8px 圆角、底部 1px 分隔线、左对齐 */
.topic-tabs {
  display: flex; align-items: center; justify-content: safe center; gap: 0;
  height: 35px; padding: 0;
  background: var(--surface-2);
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x;
}
.topic-tabs::-webkit-scrollbar { display: none; }
/* 2345 .kz-tabs-nav-item：直角、14px/400、上下居中；
   未选中项右侧带 1px 竖分隔线；选中项白底蓝字 700 + 底部蓝色下划线 */
.topic-tab {
  appearance: none; background: transparent; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 14px; line-height: 21px; font-weight: 400; color: var(--text);
  height: 35px; padding: 0 33px;
  /* 2345：所有项统一预留 1px 透明边框 + 无下边框 + margin-top:1px，
     选中时只换边框颜色/底色/字色 → 切换不产生任何尺寸与位移跳变 */
  border: 1px solid transparent; border-bottom: none; margin: 1px 0 0;
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: color .15s, background .15s, border-color .15s;
}
.topic-tab:hover { color: var(--theme, var(--primary)); background: color-mix(in srgb, var(--theme, var(--primary)) 7%, transparent); }
/* 名字宽度固定按 700 字重撑开：切换字重时 tab 宽度不再跳变（消除整排闪缩） */
.topic-tab-txt { display: inline-block; }
.topic-tab-txt::after {
  content: attr(data-txt); display: block; font-weight: 700;
  height: 0; visibility: hidden; overflow: hidden; pointer-events: none;
}
/* 竖分隔线（2345 同款 1px 高 16px，选中项 no-divider） */
.topic-tab::after {
  content: ''; position: absolute; top: 50%; right: 0;
  transform: translateY(-50%);
  width: 1px; height: 16px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  pointer-events: none; transition: none;
}
/* 2345 is-active no-divider：选中项自身不画分隔线；
   选中项左侧相邻项也要去掉，否则那根竖线会漏在选中项左边缘 */
.topic-tab.no-divider::after { display: none; }
/* 选中态：白底 + 主题色字 + 700 + 上/左/右 1px 边框、下开口（与面板连通） */
.topic-tab.active {
  background: var(--surface);
  color: var(--theme, var(--primary));
  font-weight: 700;
  border-color: var(--border); border-bottom: none;
}
/* 顶部 2px 主题色线（2345 .kz-tabs-nav-item.is-active::before：top:0 全宽） */
.topic-tab.active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--theme, var(--primary));
  pointer-events: none; transition: none;
}
/* 底部下划线（选中项 ::after 复用为下划线，不再画分隔线） */
.topic-tab.active::after {
  display: block; top: auto; right: auto; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - 68px); height: 2px;
  background: var(--theme, var(--primary));
  border-radius: 2px 2px 0 0;
}
.topic-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px;
}
.topic-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  -webkit-touch-callout: none; touch-action: manipulation;
}
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--theme, var(--primary)); }
.topic-card-cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--bg);
}
.topic-card-ph {
  display: flex; align-items: center; justify-content: center;
  background-image: var(--tile); color: #fff;
  font-size: 40px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.topic-card-body { padding: 11px 13px 13px; }
.topic-card-title { font-weight: 700; font-size: 15px; line-height: 1.35;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topic-card-desc {
  font-size: 12.5px; color: var(--text-soft); line-height: 1.5; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 「立即使用」：2345 式卡片底部通栏浅色条 + 右侧圆形箭头；PC 悬停整卡才显示，触屏常显 */
.topic-card-go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--text); background: color-mix(in srgb, var(--theme, #3b82f6) 7%, var(--bg));
  border-radius: 10px; white-space: nowrap;
  /* 隐藏态折叠不占位，悬停/聚焦后展开，保留过渡动画 */
  max-height: 0; padding: 0 7px 0 12px; margin-top: 0; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease,
              max-height .18s ease, padding .18s ease, margin-top .18s ease,
              background .16s, color .16s;
}
.topic-card-go::after {
  content: '›'; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 0; padding-bottom: 2px;
  color: var(--theme, #3b82f6); background: var(--surface); border: 1px solid var(--border);
  transition: background .16s, color .16s, border-color .16s;
}
.topic-card:hover .topic-card-go,
.topic-card:focus-within .topic-card-go {
  max-height: 40px; padding: 7px 7px 7px 12px; margin-top: 9px;
  opacity: 1; visibility: visible; transform: translateY(0);
  background: var(--theme, #3b82f6); color: #fff;
}
.topic-card:hover .topic-card-go::after,
.topic-card:focus-within .topic-card-go::after {
  color: #fff; background: rgba(255,255,255,.18); border-color: transparent;
}
@media (hover: none) {
  .topic-card-go {
    max-height: 40px; padding: 7px 7px 7px 12px; margin-top: 9px;
    opacity: 1; visibility: visible; transform: none;
  }
}
.topic-card:not(.hot) .topic-card-title { justify-content: flex-start; }
@media (max-width: 1024px) { .topic-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .topic-tabs { justify-content: flex-start; }
  .topic-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
  .topic-tab { font-size: 14px; padding: 0 16px; }
}

/* ===== 专题二级页签（叠加过滤层，参考 2345） ===== */
.topic-panel { padding: 14px 16px 16px; }
.topic-subtabs {
  display: flex; gap: 8px; flex-wrap: wrap; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.topic-subtabs::-webkit-scrollbar { display: none; }
.topic-subtab {
  appearance: none; border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-soft); border-radius: 999px; padding: 6px 14px; transition: all .15s;
}
.topic-subtab:hover { color: var(--theme, var(--primary)); border-color: var(--theme, var(--primary)); }
.topic-subtab.active { color: #fff; background: var(--theme, var(--primary)); border-color: var(--theme, var(--primary)); }

/* 角标（新 / HOT / 广告） */
.topic-badge {
  position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 11px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, #ff7a45, #f5222d); border-radius: 6px;
  padding: 2px 7px; box-shadow: 0 2px 8px rgba(245,34,45,.35); pointer-events: none;
}
.topic-card { position: relative; }
.topic-card-cover { background: var(--bg); }

/* ===== iconwall：图标墙 / 小工具卡 ===== */
.topic-iconwall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.topic-iw-card {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 12px; transition: transform .15s, box-shadow .15s, border-color .15s;
  -webkit-touch-callout: none; touch-action: manipulation;
}
.topic-iw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--theme, var(--primary)); }
.topic-iw-icon {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px; object-fit: cover;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
}
.topic-iw-body { min-width: 0; flex: 1; }
.topic-iw-title { font-weight: 700; font-size: 14px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-iw-desc { font-size: 12px; color: var(--text-soft); line-height: 1.4; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-iw-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 700; color: var(--theme, var(--primary));
  opacity: 0; visibility: hidden; transform: translateX(-3px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.topic-iw-go::after {
  content: '›'; font-size: 15px; font-weight: 800; line-height: 1;
}
.topic-iw-card:hover .topic-iw-go,
.topic-iw-card:focus-within .topic-iw-go {
  opacity: 1; visibility: visible; transform: none;
}
@media (hover: none) {
  .topic-iw-go { opacity: 1; visibility: visible; transform: none; }
}

/* ===== list：列表 / 榜单 ===== */
.topic-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.topic-li {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 13px; transition: transform .14s, border-color .14s, box-shadow .14s;
  -webkit-touch-callout: none; touch-action: manipulation;
}
.topic-li:hover { transform: translateX(2px); border-color: var(--theme, var(--primary)); box-shadow: var(--shadow-hover); }
.topic-li-rank {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 13px; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border);
}
.topic-li-rank.top { color: #fff; background: linear-gradient(135deg, #ff7a45, #f5222d); border-color: transparent; }
.topic-li-icon {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff;
}
.topic-li-body { min-width: 0; flex: 1; }
.topic-li-title { font-weight: 600; font-size: 14px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-li-desc { font-size: 12px; color: var(--text-soft); line-height: 1.4; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-li-heat { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #f5222d; }
.topic-li-go {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; line-height: 0; padding-bottom: 1px;
  color: var(--theme, var(--primary)); background: var(--bg); border: 1px solid var(--border);
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.topic-li:hover .topic-li-go { color: #fff; background: var(--theme, var(--primary)); border-color: transparent; transform: translateX(2px); }

/* 专题卡片「添加到我的首页」按钮：hover 显示，已收藏常显 */
.topic-card, .topic-iw-card, .topic-li { position: relative; }
.topic-pin {
  position: absolute; top: 3px; right: 3px; z-index: 4;
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: var(--surface); color: var(--text-soft);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
  opacity: 0; transform: translateY(-2px) scale(.94);
  transition: opacity .15s, transform .15s, background .15s, color .15s;
}
.topic-card:hover .topic-pin,
.topic-iw-card:hover .topic-pin,
.topic-li:hover .topic-pin,
.tcb-item:hover .topic-pin,
.tls-item:hover .topic-pin,
.topic-app:hover .topic-pin { opacity: 1; transform: translateY(0) scale(1); }
/* 左下应用小图标网格：pin 按钮置于卡片外右上，避免遮挡 40px 图标 */
.topic-app .topic-pin { top: -6px; right: -4px; }
.topic-pin:hover { color: var(--primary); }
.topic-pin.pinned { background: var(--primary); color: #fff; opacity: 1; transform: none; }
.topic-pin svg { width: 12px; height: 12px; display: block; }
.topic-pin.pinned { font-size: 12px; line-height: 1; }
@media (hover: none) {
  .topic-pin { opacity: 1; transform: none; }
}

/* ===== split：左右分栏（参考 2345：左栏白卡问答框 + 左下独立面板；右栏纯文字垂直导航 + 卡片网格等高对齐） ===== */
.topic-split { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 2.18fr); gap: 14px; align-items: stretch; }
.topic-split-left { display: flex; flex-direction: column; gap: 10px; }
.topic-split-hero {
  position: relative; display: block; text-decoration: none; color: #fff; overflow: hidden;
  border-radius: 16px; min-height: 168px; transition: transform .16s, box-shadow .16s;
  background: var(--theme, #3b82f6);
}
.topic-split-hero:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.topic-split-hero-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.topic-split-hero-cover.topic-card-ph { display: flex; align-items: flex-end; justify-content: flex-start; }
.topic-split-hero-body {
  position: relative; z-index: 1; margin-top: auto; padding: 78px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); border-radius: 0 0 16px 16px;
}
.topic-split-hero-title { font-weight: 800; font-size: 18px; }
.topic-split-hero-desc {
  font-size: 12.5px; opacity: .92; margin-top: 3px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Hero 回退 CTA：2345 式深色实心圆角按钮 */
.topic-split-hero-go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1;
  background: rgba(15, 18, 34, .82); border-radius: 999px; padding: 8px 16px;
  transition: background .16s, transform .16s;
}
.topic-split-hero-go::after { content: '›'; font-size: 15px; font-weight: 800; line-height: 0; padding-bottom: 1px; }
.topic-split-hero:hover .topic-split-hero-go { background: rgba(15, 18, 34, .95); transform: translateX(2px); }
/* 左下角独立面板：2345 式白色圆角卡（纯文字标题 + 应用图标一行，紧凑不抢高度） */
.topic-split-panel {
  flex: 0 0 auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 11px 13px 11px;
}
.topic-split-panel-title { font-size: 14px; font-weight: 800; color: var(--text); margin: 0 0 8px; line-height: 1.4; }
.topic-split-apps { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 10px 4px; }
.topic-app { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; border-radius: 10px; transition: transform .14s; -webkit-touch-callout: none; touch-action: manipulation; position: relative; }
.topic-app:hover { transform: translateY(-2px); }
.topic-app-icon {
  width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.08);
}
.topic-app-name { max-width: 100%; font-size: 11px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-app:hover .topic-app-name { color: var(--theme, var(--primary)); }

/* 右栏：2345 式垂直分类导航（无边框纯文字，选中浅色底+主题色字）+ 一行 4 列卡片（尺寸适中，比例 16:9） */
.topic-split-right { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; min-width: 0; align-items: stretch; }
.topic-split-right-body { min-width: 0; display: flex; flex-direction: column; }
/* 卡片区随右栏（=左栏高度）纵向撑满，消除底部空白 */
.topic-split-right-body .topic-cards {
  padding: 0; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; align-content: stretch; grid-auto-rows: minmax(0, 1fr);
}
/* 子分类卡片较少时自动减少列数，避免 4 列网格末位空位，让内容更饱满 */
.topic-split-right-body .topic-cards.cards-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.topic-split-right-body .topic-cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic-split-right-body .topic-cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topic-split-right-body .topic-card { height: 100%; }
.topic-split-right-body .topic-card-body { padding: 9px 10px 10px; flex: 0 0 auto; }
.topic-split-right-body .topic-card-title { font-size: 13.5px; }
.topic-split-right-body .topic-card-desc { font-size: 11.5px; margin-top: 3px; }
/* 封面撑满卡片剩余高度（object-fit 保证图片不变形、不拉伸） */
.topic-split-right-body .topic-card-cover { flex: 1 1 auto; width: 100%; min-height: 96px; aspect-ratio: auto; height: auto; }
/* 4 张以上：第 5 张起跨两列做横向推荐卡（保持网格饱满） */
.topic-split-right-body .topic-card.wide { grid-column: span 2; flex-direction: row; align-items: stretch; }
.topic-split-right-body .topic-card.wide .topic-card-cover { width: 42%; flex: 0 0 42%; aspect-ratio: auto; height: auto; min-height: 96px; }
.topic-split-right-body .topic-card.wide .topic-card-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 11px 13px; }
@media (max-width: 1200px) {
  .topic-split-right-body .topic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .topic-split-right-body .topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.topic-vtabs { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; touch-action: pan-x pan-y; }
.topic-vtab {
  appearance: none; display: flex; align-items: center; gap: 4px; width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--text-soft);
  border-radius: 9px; padding: 9px 12px; transition: background .14s, color .14s;
  white-space: nowrap;
}
.topic-vtab-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.topic-vtab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-vtab:hover { color: var(--text); background: color-mix(in srgb, var(--theme, #3b82f6) 7%, transparent); }
.topic-vtab.active {
  color: var(--theme, var(--primary)); font-weight: 800;
  background: color-mix(in srgb, var(--theme, #3b82f6) 12%, transparent);
}
/* ===== split 左栏：严格对齐 2345.com「AI创意应用」热门推荐模块实测值 =====
   左栏 388 宽 · 浅蓝渐变容器 · 卡片 112×52 白卡 · 图标 absolute 凸出上边缘 8px
   名称 padding-left:40px（让位图标）；描述不缩进，左边缘与图标对齐 */
.topic-split.left-hot { grid-template-columns: minmax(388px, 0.9fr) minmax(0, 2.1fr); }
.topic-split-left-section {
  display: flex; flex-direction: column; height: 100%; min-width: 0;
  background: linear-gradient(131deg,
    color-mix(in srgb, var(--theme, var(--primary)) 5%, var(--surface)),
    color-mix(in srgb, var(--theme, var(--primary)) 15%, var(--surface)));
  border-radius: 8px; padding: 12px 16px;
}
.tls-head { display: flex; align-items: center; gap: 6px; padding-bottom: 18px; min-width: 0; }
.tls-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 20px; flex: 0 0 auto; margin-right: 6px; }
.tls-sub { font-size: 12px; color: var(--text-muted); line-height: 16px; min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3 列卡片：列间距 10px、行间距 16px（对齐 2345 margin:0 10px 16px 0） */
.tls-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 10px; align-content: start; flex: 1 1 0;
}
@media (max-width: 1024px) { .tls-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tls-item {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 52px; padding: 8px 6px 6px;
  background: var(--surface); border-radius: 8px;
  text-decoration: none; color: inherit;
  box-shadow: 0 2px 6px rgba(171, 186, 216, .2);
  transition: transform .14s, box-shadow .14s;
}
/* 悬停浮层：完整名称 + 描述（2345 只做截断无提示，这里补上以便看全） */
.tls-tip {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 150px; max-width: 220px; padding: 7px 9px; border-radius: 6px;
  background: rgba(17, 20, 30, .95); color: #fff; font-size: 12px; line-height: 1.5;
  white-space: normal; word-break: break-word; pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.tls-item:hover .tls-tip { display: block; }
.tls-item:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(171, 186, 216, .3); }
/* 图标：绝对定位，凸出卡片上边缘 8px（2345 实测 top:-8px / left:8px / 34×34） */
.tls-ico {
  position: absolute; top: -8px; left: 8px;
  width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
  overflow: hidden; word-break: break-all;
}
.tls-ico img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tls-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
/* 名称：缩进 40px 让位左侧凸起的图标 */
.tls-name {
  padding-left: 40px; font-size: 13px; font-weight: 400; color: var(--text);
  line-height: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 描述：不缩进，左边缘与图标左对齐（2345 实测 padding:2px 0 0） */
.tls-desc {
  padding: 2px 0 0; font-size: 12px; font-weight: 400; color: var(--text-muted);
  line-height: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* AI 创意应用（左栏热门推荐块）头部「更多 ›」入口 → 一级分类页（/ai 或 topic.moreLink） */
.tls-more {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px;
  font-size: 12.5px; font-weight: 600; color: var(--theme, var(--primary)); text-decoration: none; white-space: nowrap;
}
.tls-more:hover { text-decoration: underline; }
.tls-more .tcb-more-ar { font-weight: 800; line-height: 0; padding-bottom: 1px; }
/* ===== 酷站精选（cats 布局）：分组分类卡片墙 + 展开/收起 ===== */
.topic-cats { display: block; }
.tcb-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 14px; }
.topic-cat-block {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 14px;
}
.tcb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.tcb-title { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); min-width: 0; }
.tcb-title:hover { color: var(--theme, var(--primary)); }
.tcb-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.tcb-name { font-size: 14px; font-weight: 800; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcb-more {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px;
  font-size: 12.5px; font-weight: 600; color: var(--theme, var(--primary)); text-decoration: none; white-space: nowrap;
}
.tcb-more:hover { text-decoration: underline; }
.tcb-more-ar { font-weight: 800; line-height: 0; padding-bottom: 1px; }
.tcb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 6px; align-content: start; }
/* 移动端：子分类卡片改用 flex 拉伸，卡片按 flex:1 自动撑满整行宽度
   （自适应到最合适的占用宽度），彻底消除居中导致的左右留白；
   5 个卡片正好一行铺满，卡片自然等宽，无右侧空白 */
@media (max-width: 640px) {
  .topic-cats .tcb-body { gap: 10px; }
  .topic-cat-block { padding: 10px 12px 12px; border-radius: 12px; }
  .tcb-head { margin-bottom: 8px; }
  .tcb-grid { display: flex; flex-wrap: wrap; gap: 10px 6px; }
  .tcb-item { flex: 1 1 56px; min-width: 56px; }
}
.tcb-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; color: inherit; border-radius: 10px; padding: 6px 2px; transition: transform .14s, background .14s;
}
.tcb-item { position: relative; }
.tcb-item:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--theme, #3b82f6) 7%, transparent); }
.tcb-item:hover .topic-pin { opacity: 1; transform: translateY(0) scale(1); }
.tcb-item-ic {
  width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 auto;
  background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 17px; overflow: hidden;
}
.tcb-item-name { max-width: 100%; font-size: 11.5px; color: var(--text-soft); line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tcb-item:hover .tcb-item-name { color: var(--theme, var(--primary)); }
/* 移动端图标网格：给右上角收藏角标留出干净角落，避免压住图标 */
@media (max-width: 480px) {
  .tcb-item { padding-top: 8px; padding-bottom: 7px; }
  .tcb-item-ic { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
  .tcb-item-name { font-size: 11px; line-height: 14px; }
}
.tcb-empty { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); padding: 8px 2px; }
/* 默认显示前 9 个分类，超出折叠；.tcb-all 时展开全部 */
.tcb-collapsed { display: none; }
.topic-cats.tcb-all .tcb-collapsed { display: flex; }
/* 展开/收起按钮：小图标居中，降低视觉影响 */
.tcb-expand {
  display: flex; align-items: center; justify-content: center;
  width: max-content;
  margin: 8px auto 4px; padding: 5px 16px;
  border-radius: 999px; cursor: pointer;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background .14s, transform .14s, color .14s, border-color .14s;
}
.tcb-expand:hover {
  color: var(--theme, var(--primary));
  border-color: color-mix(in srgb, var(--theme, var(--primary)) 35%, var(--border));
  background: color-mix(in srgb, var(--theme, var(--primary)) 6%, var(--surface));
  transform: translateY(-1px);
}
.tcb-expand svg { width: 14px; height: 14px; display: block; stroke-width: 2.2; }
/* 右栏当前子分类标题 */
.topic-sub-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 16px; font-weight: 800; color: var(--text);
}
.topic-sub-header-ico { font-size: 17px; line-height: 1; }
.topic-sub-header-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 2345.com 首页专题「酷站精选」同款文字链布局 =====
   一行两列：每列 = 左侧彩色分类名 + 右侧横向站点文字链
   无圆角标签底色，紧凑排列，链接文本不截断 */
.topic-textlinks { display: flex; flex-direction: column; gap: 4px; padding: 6px 16px; } /* 收紧纵向：省出空间给下方导航/网址 */
/* 文字链布局更紧凑：收掉专题面板上下多余留白 */
.topic-panel:has(> .topic-textlinks) { padding-top: 8px; padding-bottom: 6px; }
.topic-text-body { display: flex; flex-direction: column; gap: 12px; } /* 2345 实测行间距约 16px；收紧到 12px 省纵向空间 */
.topic-text-row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
  gap: 12px 24px; min-height: 19px; line-height: 19px; /* 列间距 24px：两栏各居其位、左右留白对称，展开箭头落在两栏正中 */
}
.topic-text-col {
  display: flex; align-items: baseline; gap: 14px; /* 2345 分类名 margin-right:14px */
  min-width: 0;
}
.topic-text-label {
  flex: 0 0 60px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 14px; font-weight: 400;
  color: var(--tlc, #0c6ad4); text-decoration: none; line-height: 19px;
  transition: opacity .12s;
}
.topic-text-label:hover { opacity: .75; }
.topic-text-label-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-text-list {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: baseline; column-gap: 4px; min-width: 0;
  /* 5 等分固定栅格：每个网址占一个等宽格子并左对齐 → 上下多行网址纵向对齐成列；
     左右两栏格子同宽、col 也是 1fr 1fr，所以两栏空间完全对称 */
}
.topic-text-link {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  justify-self: start; max-width: 100%; min-width: 0;
  font-size: 14px; line-height: 19px; color: var(--tc, #222); text-decoration: none;
  transition: color .12s; white-space: nowrap;
}
.topic-text-link:hover { color: var(--tc, var(--theme, var(--primary))); text-decoration: underline; }
.topic-text-link.hot { color: var(--tc, #ff4d4f); font-weight: 700; }
.topic-text-link.hot:hover { color: #ff7875; }
/* 深色模式：文字链默认回退色改为浅灰（否则 #222 在暗底近乎不可见）；分类名提亮为浅蓝 */
[data-theme="dark"] .topic-text-link { color: var(--tc, #c7ccd9); }
[data-theme="dark"] .topic-text-link.hot { color: var(--tc, #ff7875); }
[data-theme="dark"] .topic-text-label { color: var(--tlc, #6ea8fe); }
.topic-text-link-ico {
  width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; border-radius: 2px;
}
/* 「添加到首页」按钮：平时隐藏，指向（hover/聚焦）链接时在右上角浮出「+」 */
.topic-text-link .topic-pin {
  position: absolute; top: -7px; right: -8px;
  width: 14px; height: 14px; min-width: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-soft);
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .12s, color .12s, border-color .12s;
}
.topic-text-link .topic-pin svg { width: 9px; height: 9px; display: block; stroke-width: 3; }
.topic-text-link .topic-pin.pinned { font-size: 9px; line-height: 1; }
.topic-text-link:hover .topic-pin,
.topic-text-link:focus-within .topic-pin { opacity: 1; pointer-events: auto; }
.topic-text-link .topic-pin:hover { color: var(--primary); border-color: var(--primary); }
.topic-text-link-ico.emoji { font-size: 12px; line-height: 1; }
/* 站名在所属栅格内自适应收缩：宽屏多显示、窄屏省略，不再写死像素，避免溢出/留白失控 */
.topic-text-link-txt {
  white-space: nowrap; min-width: 0; max-width: 100%; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis;
  display: inline-block; vertical-align: bottom;
}
.topic-text-badge {
  display: inline-block; padding: 0 3px; border-radius: 2px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit; font-size: 10px; font-weight: 700; line-height: 13px; transform: scale(.9);
}
.topic-text-empty { font-size: 12px; color: var(--text-muted); }
/* 默认显示前 8 个分类（4 行），超出折叠；.topic-text-all 时展开全部 */
.topic-text-collapsed { display: none; }
.topic-text-all .topic-text-collapsed { display: grid; }
/* 展开/收起：2345 同款——容器底部水平居中的 7x7 像素风箭头，无边框底色 */
.topic-text-expand {
  display: flex; align-items: center; justify-content: center;
  width: max-content; margin: 2px auto 0; padding: 2px 10px;
  color: var(--text-soft, #222); background: transparent; border: none; cursor: pointer;
  transition: color .14s;
}
.topic-text-expand:hover { color: var(--theme, var(--primary)); }
.topic-text-expand svg { width: 7px; height: 7px; display: block; }
.topic-text-expand svg.up { transform: rotate(180deg); }
@media (max-width: 768px) {
  .topic-textlinks { padding: 12px 14px; }
  .topic-text-row { grid-template-columns: 1fr; gap: 10px 0; }
  .topic-text-col { gap: 8px; }
  .topic-text-label { max-width: none; font-size: 14px; line-height: 24px; min-width: 56px; }
  /* 手机端：每个分类默认显示 3 个站点，文字链两端对齐 */
  .topic-text-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 0; }
  .topic-text-link { line-height: 24px; padding: 3px 0; font-size: 14px; }
  .topic-text-link-ico { width: 18px; height: 18px; }
  .topic-text-col .topic-text-link:nth-child(n + 4) { display: none; }
}

/* ===== 2345 式 AI 问答框（紧凑白卡 + 浅色胶囊输入行 + 主题渐变圆按钮，聚焦无内部线条只留柔光） ===== */
.topic-ask {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 11px 14px 11px; display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
}
.topic-ask-greet { font-size: 15px; font-weight: 800; letter-spacing: .2px; color: var(--text); line-height: 1.35; }
.topic-ask-sub { font-size: 11px; color: var(--text-soft); margin-top: -3px; }
.topic-ask-row {
  display: flex; align-items: center; gap: 8px; margin-top: 1px;
  background: color-mix(in srgb, var(--theme, #3b82f6) 6%, var(--bg)); border: 1px solid transparent;
  border-radius: 999px; padding: 3px 3px 3px 13px; transition: background .15s, box-shadow .15s;
}
.topic-ask-row:focus-within {
  background: color-mix(in srgb, var(--theme, #3b82f6) 9%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme, #3b82f6) 15%, transparent);
}
/* 输入行左侧圆形 AI 图标（对应 provider 图标，兜底为渐变星光） */
.topic-ask-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--surface); border: 1px solid var(--border);
}
.topic-ask-ico-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-ask-ico.topic-ask-ico-fallback {
  border-color: transparent;
  background: linear-gradient(135deg, var(--theme, #3b82f6), color-mix(in srgb, var(--theme, #3b82f6) 55%, #7c3aed));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--theme, #3b82f6) 32%, transparent);
}
.topic-ask-ico svg { display: block; }
.topic-ask-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}
.topic-ask-input::placeholder { color: var(--text-soft); }
.topic-ask-btn {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  color: #fff; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--theme, #3b82f6), color-mix(in srgb, var(--theme, #3b82f6) 55%, #7c3aed));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--theme, #3b82f6) 30%, transparent);
  transition: transform .14s, box-shadow .14s;
}
.topic-ask-btn:hover { transform: scale(1.06); box-shadow: 0 6px 14px color-mix(in srgb, var(--theme, #3b82f6) 38%, transparent); }
.topic-ask-btn:active { transform: scale(.96); }
/* 推荐问题：一行横向轻扫，压住问答框高度 */
.topic-ask-chips { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 0; overflow-x: auto; scrollbar-width: none; }
.topic-ask-chips::-webkit-scrollbar { display: none; }
.topic-ask-chip {
  appearance: none; cursor: pointer; flex: 0 0 auto; font: inherit; font-size: 11.5px;
  color: var(--text-soft); background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; transition: color .14s, border-color .14s, background .14s;
}
.topic-ask-chip:hover { color: var(--theme, var(--primary)); border-color: var(--theme, var(--primary)); background: color-mix(in srgb, var(--theme, #3b82f6) 6%, var(--bg)); }

/* ===== 响应式：split 退化为单列堆叠、list 单列、iconwall 缩列 ===== */
@media (max-width: 1024px) {
  .topic-iconwall { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .topic-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topic-panel { padding: 12px; }
  .topic-subtabs { flex-wrap: nowrap; }
  .topic-split { grid-template-columns: 1fr; }
  .topic-split.left-hot { grid-template-columns: 1fr; }
  .topic-split-right { grid-template-columns: 1fr; }
  .topic-vtabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; touch-action: pan-x; }
  .topic-vtabs::-webkit-scrollbar { display: none; }
  .topic-vtab { width: auto; flex: 0 0 auto; }
  .topic-split-hero { min-height: 150px; }
  .topic-iconwall { grid-template-columns: repeat(2, 1fr); }
  .topic-list { grid-template-columns: 1fr; }
  .topic-ask { padding: 15px 14px 13px; }
  .topic-ask-greet { font-size: 18px; }
  .topic-split-panel { padding: 12px 12px 13px; }
  /* 左下应用网格：移动端由 auto-fill 改为 flex 拉伸，避免容器被均分成 6 列
     而只有 5 个卡片时末尾空出一列，导致右侧留白 */
  .topic-split-apps { display: flex; flex-wrap: wrap; gap: 10px 8px; }
  .topic-app { flex: 1 1 46px; min-width: 46px; }
}

/* ============ PWA：安装到桌面 / 添加到主屏幕引导 ============ */
.pwa-install-item,
.pwa-install-item .svg-ic { color: #3b82f6; }

.pwa-guide { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.pwa-guide[hidden] { display: none; }
.pwa-guide-mask { position: absolute; inset: 0; background: rgba(10,14,26,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pwa-guide-sheet {
  position: relative; width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: 18px 18px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(20,28,48,.22); animation: pwaUp .26s ease;
}
@keyframes pwaUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.pwa-guide-close {
  position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none;
  background: #eef1f7; color: #5b6273; border-radius: 50%; font-size: 15px; cursor: pointer;
}
.pwa-title { margin: 2px 0 14px; font-size: 18px; font-weight: 700; color: #1c2230; }
.pwa-tip { font-size: 14px; line-height: 1.7; color: #4a5163; margin: 0 0 14px; }
.pwa-tip b, .pwa-step b { color: #2a3142; }
.pwa-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pwa-step { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #3a4153; }
.pwa-num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #3b82f6; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pwa-ic { color: #3b82f6; }
.pwa-hint { font-size: 12.5px; color: #8a90a0; line-height: 1.6; margin: 6px 0 0; background: #f5f7fb; padding: 10px 12px; border-radius: 10px; }
.pwa-phone { background: #0e1016; border-radius: 16px; overflow: hidden; max-width: 240px; margin: 4px auto 0; }
.pwa-phone-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #cfd6e4; font-size: 13px; }
.pwa-back { color: #6b7689; font-size: 18px; }
.pwa-url { flex: 1; text-align: center; font-weight: 600; }
.pwa-share { margin-left: auto; color: #3b82f6; display: flex; }
.pwa-phone-arrow { text-align: center; color: #9aa3b5; font-size: 12.5px; padding: 6px 0 12px; }

/* 暗色主题 */
[data-theme="dark"] .pwa-guide-sheet { background: #1a1f2b; }
[data-theme="dark"] .pwa-title { color: #eef1f7; }
[data-theme="dark"] .pwa-tip { color: #c2c8d6; }
[data-theme="dark"] .pwa-tip b, [data-theme="dark"] .pwa-step b { color: #fff; }
[data-theme="dark"] .pwa-step { color: #cdd3e0; }
[data-theme="dark"] .pwa-hint { background: #232a38; color: #9aa3b5; }
[data-theme="dark"] .pwa-guide-close { background: #2a3140; color: #aab2c4; }

@media (min-width: 600px) {
  .pwa-guide { align-items: center; }
  .pwa-guide-sheet { border-radius: 18px; max-width: 420px; }
  @keyframes pwaUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* ===================== 用户反馈页（#/feedback） ===================== */
.feedback-page { max-width: 880px; padding-top: 26px; }
.fb-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 26px 28px; margin: 0 0 18px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--theme, var(--primary)) 6%, transparent);
}
/* 关于本站 */
.fb-about-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
/* logo 包在渐变圆角 chip 中，作为 about 头部主视觉（图标为方形，正好填满） */
.fb-about-logo-wrap {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 24px; padding: 14px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface)), color-mix(in srgb, var(--primary-2) 13%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 16%, transparent);
}
.fb-about-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.fb-about-id { min-width: 0; }
.fb-about-title { margin: 0; font-size: 27px; font-weight: 800; color: var(--text); letter-spacing: .2px; line-height: 1.2; }
/* deskzx 字标：zx 用强调色，与页脚品牌区呼应 */
.fb-zx-accent { color: var(--zx, #f59e0b); }
.fb-about-sub { margin: 5px 0 0; font-size: 13.5px; color: var(--text-muted); }
.fb-about-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.fb-feats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fb-feats li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px;
  background: var(--bg, #fff); border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.fb-feats li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.06); border-color: color-mix(in srgb, var(--primary) 22%, var(--border)); }
.fb-feat-ic {
  font-size: 17px; line-height: 1.4; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.fb-feats b { display: block; font-size: 13.5px; color: var(--text); font-weight: 700; }
.fb-feats li > div span { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
/* 反馈表单 */
.fb-card-title { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--text); }
.fb-card-tip { margin: 0 0 18px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.fb-form { display: flex; flex-direction: column; gap: 16px; }
.fb-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.fb-label { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.fb-req { color: #ef4444; margin-left: 2px; }
.fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fb-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  color: var(--text); background: var(--bg, #fff); border: 1px solid var(--border);
  border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.fb-input:focus { border-color: var(--theme, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme, var(--primary)) 16%, transparent); }
.fb-textarea { min-height: 120px; resize: vertical; line-height: 1.6; font-family: inherit; }
.fb-counter { align-self: flex-end; font-size: 12px; color: var(--text-muted); }
.fb-types { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-type {
  padding: 7px 14px; font-size: 13px; border-radius: 999px; cursor: pointer;
  color: var(--text-soft); background: var(--bg, #fff); border: 1px solid var(--border);
  transition: color .15s, background .15s, border-color .15s;
}
.fb-type:hover { border-color: color-mix(in srgb, var(--theme, var(--primary)) 55%, var(--border)); }
.fb-type.active { color: #fff; background: var(--theme, var(--primary)); border-color: var(--theme, var(--primary)); font-weight: 700; }
.fb-submit {
  align-self: flex-start; margin-top: 2px; padding: 11px 26px; font-size: 14.5px; font-weight: 700;
  color: #fff; background: var(--theme, var(--primary)); border: none; border-radius: 11px; cursor: pointer;
  transition: transform .12s, box-shadow .15s, opacity .15s;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--theme, var(--primary)) 28%, transparent);
}
.fb-submit:hover { transform: translateY(-1px); }
.fb-submit:active { transform: translateY(0); }
.fb-submit:disabled { opacity: .6; cursor: default; transform: none; }
@media (max-width: 600px) {
  .fb-feats { grid-template-columns: 1fr; }
  .fb-grid { grid-template-columns: 1fr; }
  .fb-card { padding: 18px 16px 20px; border-radius: 14px; }
}

/* ===================== 页脚品牌区（左 logo / 右 deskzx 字标 + slogan） ===================== */
.sf-brand-top { gap: 13px; }
.sf-logo { width: 44px; height: 44px; border-radius: 12px; }
.sf-name {
  font-size: 17px; font-weight: 800; letter-spacing: .4px;
  color: var(--text);
}
.sf-slogan { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }

/* ===================== 关于本站页入口链接（#/about） ===================== */
.fb-about-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fb-about-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--text-soft);
  background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 12px;
  transition: color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.fb-about-link:hover {
  color: var(--theme, var(--primary)); border-color: color-mix(in srgb, var(--theme, var(--primary)) 45%, var(--border));
  transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--theme, var(--primary)) 14%, transparent);
}
@media (max-width: 600px) {
  .fb-card { padding: 20px 18px 22px; }
  .fb-about-head { flex-direction: column; text-align: center; gap: 14px; }
  .fb-about-logo-wrap { width: 78px; height: 78px; padding: 12px; border-radius: 20px; }
  .fb-about-title { font-size: 23px; }
  .fb-feats { grid-template-columns: 1fr; }
  .fb-about-links { justify-content: center; }
}

/* ===================== 省钱助手（严格复刻 bimiseek：双色定价卡列表 + Contact us 弹窗） ===================== */
.sa-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(4px);
  display: flex; align-items: stretch; justify-content: flex-end; /* 紧贴页面右侧弹出 */
  animation: saFade .18s ease;
}
@keyframes saFade { from { opacity: 0; } to { opacity: 1; } }
.sa-panel {
  width: 420px; max-width: 94vw; height: 100%;
  background: #fff; color: var(--text);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(15, 23, 42, .2);
  animation: saSlide .3s cubic-bezier(.22, .61, .36, 1);
}
@keyframes saSlide { from { transform: translateX(48px); opacity: .4; } to { transform: none; opacity: 1; } }
/* 头部：左上关闭钮 + 居中大标题（仿 bimiseek pricing 页版式） */
.sa-head { position: relative; padding: 22px 18px 10px; text-align: center; flex-shrink: 0; background: #fff; }
.sa-close {
  position: absolute; left: 14px; top: 16px; width: 34px; height: 34px; border: none;
  background: transparent; color: var(--text-soft); font-size: 17px; cursor: pointer;
  border-radius: 50%; transition: background .15s;
}
.sa-close:hover { background: var(--surface-2, #f1f3f7); }
.sa-head-title { font-size: 23px; font-weight: 800; color: #111827; letter-spacing: .3px; }
.sa-head-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
/* 列表：白底 + bimiseek 式双色定价卡（细彩边 + 极浅渐变底 + 悬浮徽章 + 对勾清单 + 渐变 CTA） */
.sa-body { flex: 1; overflow-y: auto; padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 18px; background: #fff; }
.sa-card {
  position: relative; border-radius: 18px; padding: 22px 18px 18px;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .15s;
}
.sa-card--teal { border: 1px solid #99f6e4; background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 55%); }
.sa-card--amber { border: 1px solid #fde68a; background: linear-gradient(180deg, #fffbeb 0%, #ffffff 55%); }
.sa-card:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.sa-badge {
  position: absolute; top: -13px; left: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 6px; font-size: 12px; font-weight: 800; color: #374151; background: #fff;
  border-radius: 999px; box-shadow: 0 3px 10px rgba(15, 23, 42, .12);
}
.sa-badge .sa-tile { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
.sa-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  overflow: hidden; line-height: 1; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.sa-tile img { width: 62%; height: 62%; object-fit: contain; display: block; }
.sa-card-title { font-size: 16.5px; font-weight: 800; color: #111827; line-height: 1.4; }
.sa-card-line { height: 1px; background: #f3f4f6; margin: 12px 0; }
.sa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sa-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #4b5563; line-height: 1.55; }
.sa-check {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; margin-top: 1px;
}
.sa-card--teal .sa-check { background: #14b8a6; }
.sa-card--amber .sa-check { background: #f59e0b; }
.sa-cta {
  margin-top: 14px; width: 100%; padding: 12px; border: none; border-radius: 13px;
  font-size: 14.5px; font-weight: 800; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .12s, box-shadow .15s;
}
.sa-cta-arrow { transition: transform .15s; }
.sa-card--teal .sa-cta { background: linear-gradient(90deg, #0d9488, #22d3ee); box-shadow: 0 6px 16px rgba(20, 184, 166, .3); }
.sa-card--amber .sa-cta { background: linear-gradient(90deg, #ea580c, #f59e0b); box-shadow: 0 6px 16px rgba(234, 88, 12, .28); }
.sa-cta:hover { transform: translateY(-1px); }
.sa-cta:hover .sa-cta-arrow { transform: translateX(3px); }
.sa-empty { text-align: center; color: var(--text-muted); padding: 50px 18px; }
.sa-empty-ic { font-size: 38px; margin-bottom: 8px; }
.sa-empty-sub { font-size: 12.5px; margin-top: 6px; }
/* ===================== 领取弹窗（二维码 + 品牌标签 + 主次操作） ===================== */
.sa-modal-mask {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(15, 23, 42, .5); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: saMFade .18s ease;
}
@keyframes saMFade { from { opacity: 0; } to { opacity: 1; } }
.sa-modal {
  width: 420px; max-width: 92vw; background: #fff; color: var(--text);
  border-radius: 20px; padding: 24px 26px 20px; position: relative;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
  animation: saMPop .26s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes saMPop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.sam-close-btn {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  display: grid; place-items: center; border: none; background: transparent;
  color: #9ca3af; font-size: 20px; line-height: 1; border-radius: 50%;
  cursor: pointer; transition: background .15s, color .15s;
}
.sam-close-btn:hover { background: #f3f4f6; color: #4b5563; }
.sam-header { text-align: center; margin-bottom: 14px; padding-top: 2px; }
.sam-logo-wrap { display: flex; justify-content: center; margin-bottom: 12px; }
.sam-logo-wrap .sa-tile { width: 54px; height: 54px; font-size: 26px; border-radius: 15px; }
.sam-title { font-size: 18px; font-weight: 800; color: #111827; line-height: 1.4; padding: 0 28px; }
.sam-sub { font-size: 12.5px; color: #9ca3af; text-align: center; margin-top: 6px; }
.sam-tags { display: flex; gap: 7px; justify-content: center; margin-top: 9px; flex-wrap: wrap; }
.sam-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.sam-tag--platform { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.sam-tag--cat { color: #6b7280; background: #f3f4f6; }
/* 扫描卡片区：更柔和的包装 */
.sam-scan-card {
  background: #fff; border: 1px solid #f0f0f0; border-radius: 20px;
  padding: 16px; box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sam-qrbox { display: flex; justify-content: center; }
.sam-qr-img { width: 170px; height: 170px; object-fit: contain; background: #fff; border-radius: 12px; }
.sam-qr-error { font-size: 12.5px; color: #9ca3af; text-align: center; line-height: 1.6; display: none; }
.sam-qr-tip { font-size: 12px; color: #6b7280; text-align: center; line-height: 1.5; }
.sam-noqr-icon { color: #d1d5db; display: flex; align-items: center; justify-content: center; }
.sam-desc { font-size: 12.5px; color: #6b7280; line-height: 1.65; text-align: center; margin-top: 14px; }
.sam-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.sam-btn {
  width: 100%; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.sam-btn:active { transform: translateY(0); }
.sam-btn--primary {
  background: var(--primary); color: #fff; border: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent);
}
.sam-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 36%, transparent); }
.sam-btn--primary:disabled { background: #d1d5db; box-shadow: none; cursor: default; transform: none; }
.sam-btn--secondary {
  background: #fff; color: #374151; border: 1px solid #e5e7eb;
}
.sam-btn--secondary:hover { background: #f9fafb; border-color: #d1d5db; }
.sam-btn--text {
  width: auto; padding: 8px 14px; margin: 0 auto; font-size: 13px; font-weight: 600;
  color: #9ca3af; background: transparent; border: none;
}
.sam-btn--text:hover { color: #4b5563; }
.sam-footer { font-size: 11px; color: #9ca3af; text-align: center; margin-top: 12px; }
@media (max-width: 480px) {
  .sa-panel { width: 100vw; max-width: 100vw; }
  .sa-modal { padding: 22px 20px 18px; }
  .sam-title { font-size: 17px; padding: 0 26px; }
}

/* ============================================================
   我的首页：分类标签 + 滚轮整页切换 + 自动填充网格
   ============================================================ */
/* 固定视口：顶栏 + 起始区作为列，起始区占满剩余高度，分类页在内部滚动/翻页 */
body.route-my .my-home-view { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
body.route-my .my-topbar { flex: 0 0 auto; position: relative; z-index: 3; }
body.route-my .my-home-deco { display: none; }
body.route-my .my-start { flex: 1 1 auto; min-height: 0; align-items: stretch; height: auto; }

/* 看板区：左侧分类竖栏 + 右侧分页容器，横向行；竖栏已 fixed，主内容左留 72px */
.my-board.my-board-top { display: flex; flex-direction: row; height: 100%; min-height: 0; padding: 0 0 0 72px; transition: padding-left .25s ease; }
/* PC：点击 Logo 收起导航栏 —— 主内容左留白归零、顶栏内容左移贴近 Logo、竖栏滑出视口 */
body.route-my.nav-collapsed .my-board.my-board-top { padding-left: 0; }
body.route-my.nav-collapsed .my-topbar-inner { padding-left: 56px; }
body.route-my.nav-collapsed .my-home-tabs { transform: translateX(-100%); }

/* 分类标签栏：左侧纵向玻璃栏（参考 360 aitab 侧栏：窄竖栏 + icon/文字 + 激活纯白 + 左侧强调条） */
.my-home-tabs {
  position: fixed; left: 0; top: 0; bottom: 0; width: 72px; z-index: 50;
  display: flex; flex-direction: column; align-items: stretch;
  /* 竖栏自身不滚动：只有中间的分类页签列表滚动，顶部 logo 与底部按钮固定 */
  gap: 4px; padding: 56px 8px 14px; overflow: hidden;
  background: rgba(20, 20, 24, 0.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform .25s ease;
}
.my-home-tabs::-webkit-scrollbar { display: none; }
/* 分类页签列表：竖栏内唯一可滚动区域（min-height:0 是 flex 子项可滚动的关键） */
.my-home-tabs-list {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  /* 顶部与第一个页签（主页）之间留一格间距，让「主页」整体下移、避开悬浮 Logo */
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.my-home-tabs-list::-webkit-scrollbar { display: none; }
/* 独立悬浮 Logo：脱离导航栏，固定在页面左上、与顶栏文字视觉对齐；点击切换导航栏显隐 */
.my-home-logo {
  position: fixed; top: 5px; left: 14px; z-index: 210;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.my-home-logo img { width: 30px; height: 30px; display: block; border-radius: 9px; box-shadow: 0 2px 8px rgba(62, 111, 176, .35); }
.my-home-logo:hover { background: rgba(255, 255, 255, 0.16); }
.my-home-logo:active { transform: scale(0.94); }
.my-home-logo.is-active { background: rgba(45, 212, 191, 0.22); border-color: rgba(45, 212, 191, 0.55); }
/* 友好提示气泡：悬浮显示当前动作（收起 / 展开导航栏） */
.my-home-logo::after {
  content: attr(data-hint); position: absolute; left: 50px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(20, 20, 24, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.my-home-logo:hover::after { opacity: 1; }
/* 首次进入时的轻脉冲，引导用户点击 Logo */
@keyframes myLogoPulse { 0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, .5); } 70% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); } 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); } }
.my-home-logo.is-pulsing { animation: myLogoPulse 1.8s ease-out infinite; }

/* ===== 添加分类浮层（左下角卡片，贴近竖栏「＋」；桌面 fixed / 移动端居中模态）===== */
.mht-add[hidden] { display: none !important; }
.mht-add {
  position: fixed; left: 80px; bottom: 16px; top: auto; width: 360px;
  max-height: min(480px, calc(100vh - 120px)); z-index: 70;
  margin: 0; padding: 16px; border-radius: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: rgba(30, 30, 34, 0.62); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 10px;
}
.mht-add-head { display: flex; align-items: flex-start; gap: 8px; }
.mht-add-close {
  position: static; flex: 0 0 auto; align-self: flex-start; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: rgba(255,255,255,.7);
  font-size: 16px; line-height: 1; cursor: pointer; transition: background .14s; z-index: 5;
}
.mht-add-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mht-add-seg { display: flex; flex: 1 1 auto; min-width: 0; gap: 4px; background: rgba(0, 0, 0, 0.28); border-radius: 10px; padding: 3px; }
.mht-add-seg button {
  flex: 1; border: none; background: transparent; color: rgba(255, 255, 255, 0.7);
  font-size: 12px; font-weight: 700; padding: 6px 4px; border-radius: 8px; cursor: pointer; transition: all .14s;
}
.mht-add-seg button.active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mht-add-field { display: flex; flex-direction: column; gap: 4px; }
.mht-add-field span { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
.mht-add-field input {
  width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.28);
  color: #fff; border-radius: 9px; padding: 8px 10px; font-size: 13px; outline: none;
}
.mht-add-field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.mht-add-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.cat-add-ic-label { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.65); margin: 2px 0; }
.cat-add-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; max-height: 132px; overflow-y: auto; scrollbar-width: thin; }
.cat-add-icon {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 9px;
  background: rgba(0, 0, 0, 0.22); cursor: pointer; padding: 0; transition: all .12s ease;
}
.cat-add-icon:hover { border-color: var(--primary); transform: translateY(-1px); }
.cat-add-icon.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 22%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.pick-search-wrap { position: relative; display: flex; align-items: center; }
.pick-search-ic { position: absolute; left: 10px; font-size: 13px; opacity: .6; pointer-events: none; }
.mht-add .pick-search {
  width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.28);
  color: #fff; border-radius: 9px; padding: 8px 10px 8px 30px; font-size: 13px; outline: none;
}
.mht-add .pick-search::placeholder { color: rgba(255, 255, 255, 0.4); }
.mht-add .pick-search:focus { border-color: var(--primary); }
.cat-import-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px;
  max-height: 168px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; scrollbar-width: thin;
}
.cat-import-list::-webkit-scrollbar { width: 6px; }
.cat-import-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
.cat-import-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 11px; background: rgba(0, 0, 0, 0.22);
  cursor: pointer; text-align: left; transition: all .14s ease;
}
.cat-import-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.cat-import-card.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.cat-import-ic { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; font-size: 17px; line-height: 1; flex-shrink: 0; }
.cat-import-name { font-size: 13px; font-weight: 700; color: #fff; }
.cat-import-ai { font-style: normal; font-size: 10px; font-weight: 700; color: #c7d2fe; background: rgba(99, 102, 241, 0.22); border: 1px solid rgba(129, 140, 248, 0.4); padding: 0 4px; border-radius: 4px; margin-left: 2px; vertical-align: middle; }
.cat-import-count { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.cat-import-tip { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); margin: 4px 2px 0; }
.cat-import-empty { grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, 0.55); padding: 16px 0; font-size: 12.5px; }
.mht-add-actions { display: flex; gap: 6px; margin-top: 2px; }
.mht-add-actions button {
  flex: 1; border: none; border-radius: 9px; padding: 8px 10px; cursor: pointer;
  font-size: 13px; font-weight: 700; transition: all .14s;
}
.mht-add-confirm { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.mht-add-confirm:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent); }
.mht-add-cancel { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
.mht-add-cancel:hover { background: rgba(255, 255, 255, 0.18); }

.my-home-tab {
  width: 100%; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 2px; border: none; background: transparent; border-radius: 14px;
  color: rgba(255, 255, 255, 0.62); cursor: pointer; text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.15;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.my-home-tab .mht-ic { font-size: 21px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.my-home-tab img.mht-ic { width: 34px; height: 34px; object-fit: cover; border-radius: 10px; font-size: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.my-home-tab .mht-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.my-home-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.my-home-tab:active { transform: scale(.95); }
.my-home-tab.active { background: rgba(255, 255, 255, 0.14); color: #fff; }
.my-home-tab.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: #2dd4bf;
}
/* 编辑态：重命名/删除小控件浮在 tab 右上角（仅 edit 模式由 JS 渲染） */
.my-home-tab .mht-acts { position: absolute; top: 1px; right: 1px; display: inline-flex; gap: 1px; }
.my-home-tab .mht-rename, .my-home-tab .mht-remove, .my-home-tab .mht-icon {
  cursor: pointer; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.5); color: rgba(255, 255, 255, .9);
}
.my-home-tab .mht-rename:hover { background: rgba(255, 255, 255, .25); }
.my-home-tab .mht-icon:hover { background: rgba(255, 255, 255, .25); }
.my-home-tab .mht-remove:hover { color: #fff; background: rgba(255, 69, 58, .7); }
/* 编辑态：分类页签的「改名/换图标/删除」小控件轻微摇动（与网址卡编辑态同款提示，但更快）；
   悬停/聚焦时停摆归位便于点按。仅编辑态渲染这些控件，故规则天然只在编辑态生效。 */
@keyframes mhtBadgeWiggle {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.my-home-tab .mht-rename,
.my-home-tab .mht-icon,
.my-home-tab .mht-remove {
  animation: mhtBadgeWiggle .6s ease-in-out infinite;
  transform-origin: 50% 62%;
}
.my-home-tab .mht-rename:hover,
.my-home-tab .mht-icon:hover,
.my-home-tab .mht-remove:hover,
.my-home-tab .mht-rename:focus-visible,
.my-home-tab .mht-icon:focus-visible,
.my-home-tab .mht-remove:focus-visible {
  animation-play-state: paused; transform: scale(1.1) rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
  .my-home-tab .mht-rename,
  .my-home-tab .mht-icon,
  .my-home-tab .mht-remove { animation: none; }
}
/* 就地图标选择器：页签「换图标」用，避免为改一个 emoji 弹系统输入框 */
.icon-picker {
  position: fixed; z-index: 200; width: 292px; max-width: calc(100vw - 24px);
  padding: 10px; border-radius: 14px; overflow: visible;
  background: rgba(30, 30, 34, .92); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .42);
}
.ip-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 216px; overflow-y: auto; }
.ip-item {
  height: 30px; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .06); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ip-item:hover { background: rgba(255, 255, 255, .18); }
.ip-item.active { border-color: #2dd4bf; background: rgba(45, 212, 191, .18); }
/* 编辑态：分类页标题可直接点击重命名 */
.my-cat-head.is-editable .my-cat-title { cursor: pointer; border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.my-cat-head.is-editable .my-cat-title:hover { color: #5eead4; }

/* 底部「＋ 新建」与「编辑」开关（同为固定区，不随页签滚动） */
.my-home-tab-add, .my-home-edit {
  flex: none; width: 100%; margin-top: 4px;
  border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 12px; font-weight: 600; transition: all .15s ease;
}
.my-home-tab-add { height: 40px; font-size: 20px; line-height: 1; }
.my-home-edit { height: 34px; }
.my-home-tab-add:hover, .my-home-edit:hover { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.my-home-edit.active { background: #2dd4bf; color: #09181a; border-color: transparent; }
/* 品牌 logo 已放进左侧导航竖栏顶部，顶栏不再重复渲染，避免两个 logo */
body.route-my .my-tb-brand { display: none; }

/* 分页容器：每页一个分类，整页吸附切换 */
.my-home-pager { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.my-cat-page {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden; padding: 8px 24px 48px;
  scroll-behavior: smooth;
}
/* 在新版固定视口内，顶栏已随文档流，Hero 不需要再预留 56px */
.my-cat-page .my-hero { padding-top: 28px; }
.my-cat-page .my-hero::after { display: none; }
.my-cat-page::-webkit-scrollbar { width: 8px; }
/* 右侧中部停靠条显示时，内容区右侧留出等宽通道，避免 dock 压住卡片/便签。
   仅桌面生效：窄屏留给内容的宽度本就紧张，移动端让 dock 半透明浮在上层即可 */
/* 右侧中部停靠条显示时，内容区右侧留出通道，避免 dock 压住卡片/便签。
   dock 已是 52px 窄竖条（+14px 右边距），留 76px 即可，别再为它挤掉一整列卡片。
   仅桌面生效：窄屏留给内容的宽度本就紧张，移动端让 dock 半透明浮在上层即可 */
@media (min-width: 641px) {
  body.route-my.has-dock .my-cat-page { padding-right: 76px; }
}
.my-cat-page::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
/* 分类页内容包装层：position:relative 建立便签定位上下文，便签随页面内容一起滚动（不再是固定视口） */
.my-cat-inner { position: relative; min-height: 100%; }
/* 便签层：嵌在分类页内容里，铺满内容区；便签 absolute 其中，随页面滚动 */
.my-cat-stickies { position: absolute; inset: 0; min-height: 80vh; z-index: 60; pointer-events: none; }
.my-cat-stickies .my-widget { pointer-events: auto; }
.my-cat-page.is-empty .my-cat-sites,
.my-cat-page.is-empty .my-cat-widgets { display: none; }
.my-cat-head { margin: 6px 0 14px; }
/* 分类页编辑态的「＋ 组件」小按钮（原网格内大占位卡已移除，此为添加组件入口） */
.cat-add-widget {
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text-soft);
  font-size: 12px; font-weight: 700; line-height: 1.4; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.cat-add-widget:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.my-cat-title { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
/* 分类页网址网格：自动填充对齐（CSS grid 原生回流，移动图标即自动对齐） */
.my-cat-sites .icon-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 16px 10px; }
.my-cat-sites .icon-grid .icon-card { width: auto; }
.my-cat-widgets { margin-top: 24px; }
.my-cat-widget-grid {
  display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 12px; justify-content: stretch;
}
.my-cat-widget-grid .my-widget { grid-column: span 4; grid-row: span 3; min-height: 132px; }
.my-cat-widget-grid .cat-widget { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent); }
.my-cat-widget-grid .my-widget-head { cursor: default; }
.my-cat-widget-add {
  grid-column: span 4; min-height: 132px; border-radius: 16px; cursor: pointer;
  border: 2px dashed var(--border); background: var(--surface); color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; transition: all .15s ease;
}
.my-cat-widget-add:hover { color: var(--primary); border-color: var(--primary); }
/* 默认主页（dashboard）编辑态暴露「添加组件」入口 */
.my-dash-addwidget {
  display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 0;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
  background: transparent; color: var(--primary); font-size: 14px; font-weight: 600; transition: all .15s ease;
}
.my-dash-addwidget:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
/* 分类页空态引导 */
.my-cat-empty {
  text-align: center; color: var(--text-soft); padding: 40px 16px; font-size: 14px;
}
/* 分类页标题图标（与导航同款风格） */
.cat-head-row { display: flex; align-items: center; gap: 10px; }
.cat-head-ic { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; font-size: 22px; line-height: 1; flex-shrink: 0; }

/* ===== 分类页顶部固定搜索框（sticky，参考 360 aitab：分类页顶栏常驻搜索）===== */
/* 分类页顶部搜索：无背景条，与壁纸/页面融合，仅保留 sticky 吸顶 */
.my-cat-search {
  position: sticky; top: 0; z-index: 6;
  margin: 0 auto 16px; padding: 8px 0 10px;
  background: transparent;
}
.my-cat-search .search-box { max-width: 920px; margin: 0 auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
/* 移动端导航按钮 / 遮罩：桌面端隐藏，仅 ≤640 抽屉态显示 */
.my-mobile-nav { display: none; }
.my-mobile-nav-backdrop { display: none; }
@media (max-width: 640px) {
  .my-cat-sites .icon-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 14px 8px; }
  .my-cat-widget-grid .my-widget, .my-cat-widget-add { grid-column: span 6; }
  /* 移动端：顶部栏与 PC 一致，保留横向文字导航链接（网站/AI/待办/笔记）+ 操作按钮；悬浮 Logo 点击唤起左侧竖栏（与 PC 同款窄竖栏，仅默认收起） */
  body.route-my .my-topbar-inner { padding-left: 52px; }
  .my-mobile-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 195;
    background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .my-mobile-nav-backdrop.show { opacity: 1; pointer-events: auto; }
  .my-board.my-board-top { flex-direction: column; padding-left: 0; padding-top: 20px; }
  /* 竖栏在移动端为左侧滑入抽屉，但宽度与 PC 一致（72px 窄竖栏、icon+文字纵向），仅默认移出屏幕，点击 Logo 滑入；起点位于顶栏之下，避免遮挡顶部文字链接 */
  .my-home-tabs {
    position: fixed; left: 0; top: 56px; bottom: 0; width: 72px; z-index: 200;
    flex-direction: column; transform: translateX(-100%); padding: 12px 8px 14px;
    transition: transform .25s ease; overflow: hidden;
    background: rgba(18, 18, 22, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none;
  }
  .my-home-tabs.open { transform: translateX(0); }
  /* 移动端页签沿用 PC 纵向布局（icon + 文字，窄竖栏内自然居中），无需单独覆盖 */
  .my-home-logo { top: 6px; left: 10px; width: 38px; height: 38px; }
  .my-home-logo img { width: 28px; height: 28px; }
  .my-cat-page { padding: 8px 12px 40px; }
  .my-cat-search { margin: 0 0 14px; padding: 6px 0 8px; }
  .my-cat-search .search-box { max-width: none; }
  /* 移动端：添加分类面板回退为居中模态 */
  .mht-add {
    left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
    width: min(92vw, 400px); max-height: 80vh; padding: 14px;
  }
}

/* ===== 记账本外观：对标 360 aitab —— 暗色玻璃拟态（圆角 + 半透明深底 + 白字）===== */
/* 组件卡片（首页账本页）整体转暗色玻璃卡。
   注意：必须覆盖 .my-widget.wg-tint.frame-glass（0,3,0）的浅色背景，
   因此主选择器用 .my-widget.wg-tint-ledger.frame-glass（0,3,0，靠后生效）。 */
.my-widget.wg-tint-ledger.frame-glass {
  background: linear-gradient(155deg, rgba(32,35,48,.74), rgba(18,20,30,.82));
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.38); overflow: hidden;
}
/* 纯色外观下的账本：同为白字设计，底色转不透明深色实底（去玻璃透明度，其余一致） */
.my-widget.wg-tint-ledger.frame-solid {
  background: linear-gradient(155deg, #262a3a, #151824);
  border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.38); overflow: hidden;
}
.my-widget[data-type="ledger"] .my-widget-head { color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.my-widget[data-type="ledger"] .my-widget-title { color: #fff; }
.my-widget[data-type="ledger"] .my-widget-act { color: rgba(255,255,255,.78); }
.my-widget[data-type="ledger"] .my-widget-act:hover { color: #fff; }

.my-widget[data-type="ledger"] .lg-bal-label,
.my-widget[data-type="ledger"] .lg-io,
.my-widget[data-type="ledger"] .lg-row-mid i,
.my-widget[data-type="ledger"] .lg-label,
.my-widget[data-type="ledger"] .lg-empty,
.my-widget[data-type="ledger"] .lg-item-mid i,
.my-widget[data-type="ledger"] .lg-loan-badge,
.my-widget[data-type="ledger"] .lg-repay-hist,
.my-widget[data-type="ledger"] .lg-repay-line { color: rgba(255,255,255,.66); }
.my-widget[data-type="ledger"] .lg-bal,
.my-widget[data-type="ledger"] .lg-row-mid b { color: #fff; }

.my-widget[data-type="ledger"] .lg-recent,
.my-widget[data-type="ledger"] .lg-row-item { background: rgba(255,255,255,.06); border-radius: 10px; }
.my-widget[data-type="ledger"] .lg-row-ic { background: rgba(255,255,255,.12); }

.my-widget[data-type="ledger"] .lg-filter { background: transparent; }
.my-widget[data-type="ledger"] .lg-ft { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.16); }
.my-widget[data-type="ledger"] .lg-ft.active { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
/* 搜索条：整体做成暗色玻璃药丸，输入框融入其中 */
.my-widget[data-type="ledger"] .lg-kw-row { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.my-widget[data-type="ledger"] .lg-kw-row:focus-within { border-color: rgba(255,255,255,.32); }
.my-widget[data-type="ledger"] .lg-search-input { background: transparent; border-color: transparent; color: #fff; }
.my-widget[data-type="ledger"] .lg-search-input::placeholder { color: rgba(255,255,255,.45); }
.my-widget[data-type="ledger"] .lg-search-ic { color: rgba(255,255,255,.7); }
.my-widget[data-type="ledger"] .lg-search-clear { color: rgba(255,255,255,.55); }
.my-widget[data-type="ledger"] .lg-search-clear:hover { background: rgba(255,255,255,.14); color: #fff; }

.my-widget[data-type="ledger"] .lg-acts .lg-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
.my-widget[data-type="ledger"] .lg-acts .lg-btn:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.my-widget[data-type="ledger"] .lg-acts .lg-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border: none; }
.my-widget[data-type="ledger"] .lg-acts .lg-btn.primary:hover { color: #fff; opacity: .92; }

.my-widget[data-type="ledger"] .lg-del { color: rgba(255,255,255,.5); }
.my-widget[data-type="ledger"] .lg-del:hover { color: #fff; }
.my-widget[data-type="ledger"] .lg-repay-btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; }
.my-widget[data-type="ledger"] .lg-repay-btn:hover { background: rgba(255,255,255,.18); }
.my-widget[data-type="ledger"] .lg-detail { background: rgba(255,255,255,.05); }
.my-widget[data-type="ledger"] .lg-detail-row span { color: rgba(255,255,255,.6); }
.my-widget[data-type="ledger"] .lg-detail-row b { color: #fff; }
/* ===== 2×2 组件卡：「上卡片 + 下名称」，与网址卡片/文件夹卡片同构 =====
   外层 .my-widget.wg-2x2 只作网格单元（透明无边框），内部 .wg-tile-box 承载
   原卡片的全部视觉（背景/边框/圆角/内容），名称行 .wg-tile-name 位于方块之外的下方。 */
.my-widget.wg-2x2 {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0; background: none; border: none; box-shadow: none; overflow: visible;
}
.my-widget.wg-2x2.frame-glass,
.my-widget.wg-2x2.frame-glass:hover { background: none; border-color: transparent; box-shadow: none; }
.my-widget.wg-2x2.frame-plain,
.my-widget.wg-2x2.frame-plain:hover { background: none; border-color: transparent; box-shadow: none; }
.my-widget.wg-2x2.frame-solid,
.my-widget.wg-2x2.frame-solid:hover { background: none; border-color: transparent; box-shadow: none; }
.my-widget.wg-2x2.wg-tint.frame-glass,
.my-widget.wg-2x2.wg-tint.frame-glass:hover { background: none; border-color: transparent; box-shadow: none; }
.my-widget.wg-2x2.wg-solid,
.my-widget.wg-2x2.wg-solid.frame-glass,
.my-widget.wg-2x2.wg-solid.frame-glass:hover { background: none; border-color: transparent; box-shadow: none; }
/* 内容方块：原 .my-widget 的视觉整体落在这里 */
.my-widget.wg-2x2 .wg-tile-box {
  position: relative; flex: 1 1 auto; width: 100%; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 14px; padding: 4px 10px; overflow: hidden;
}
.my-widget.wg-2x2.frame-glass .wg-tile-box {
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.my-widget.wg-2x2.frame-plain .wg-tile-box { background: transparent; border: 1px solid transparent; }
.my-widget.wg-2x2.wg-tint.frame-glass .wg-tile-box {
  background: color-mix(in srgb, var(--surface) 36%, transparent);
  border-color: color-mix(in srgb, var(--wg-accent) 16%, transparent);
}
.my-widget.wg-2x2.wg-solid .wg-tile-box,
.my-widget.wg-2x2.wg-solid.frame-glass .wg-tile-box { padding: 0; background: var(--surface); border-color: transparent; box-shadow: 0 6px 22px rgba(15, 23, 42, .16); }
/* 名称行：方块外下方一行（字号/字重与网址卡 .icon-card-name 完全一致：12px/700/margin-top 2px） */
.my-widget.wg-2x2 > .wg-tile-name {
  flex-shrink: 0; max-width: 100%;
  font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center;
  margin-top: 2px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 2×2 卡整体上移 2px：与网址卡图标基线对齐（消除视觉上的「靠下」） */
.my-widget.wg-2x2 { margin-top: -2px; }
/* 3）色条位置修复：外层已透明，tint 顶部色条必须挂在 .wg-tile-box 上（原挂外层 -> 飘到方块外/错位） */
.my-widget.wg-2x2 .wg-tile-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--wg-accent), var(--wg-accent-2));
  border-radius: 14px 14px 0 0;
  opacity: .9; pointer-events: none;
}
/* 实色卡（日期/天气）不需要顶部色条 */
.my-widget.wg-2x2.wg-solid .wg-tile-box::before { display: none; }
/* 待办/笔记 2×2 去掉顶部色条（用户反馈「多了个横条」） */
.my-widget.wg-2x2.wg-tint-todo .wg-tile-box::before,
.my-widget.wg-2x2.wg-tint-notes .wg-tile-box::before,
.my-widget.wg-2x2.wg-tint-todo::before,
.my-widget.wg-2x2.wg-tint-notes::before { display: none; }
/* 2）新增「纯背景色」外观：不透明纯色卡片（wg-solid 满铺卡除外，其内容自带满铺视觉） */
.my-widget.wg-2x2.frame-solid:not(.wg-solid) .wg-tile-box {
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .10);
}
.my-widget.wg-2x2.wg-tint.frame-solid:not(.wg-solid) .wg-tile-box {
  background: color-mix(in srgb, var(--wg-accent) 8%, var(--surface-2));
  border-color: color-mix(in srgb, var(--wg-accent) 20%, transparent);
}
/* 4）暗色壁纸下：实色卡（日期/天气）去掉可见黑边框 */
[data-theme="dark"] .my-widget.wg-2x2.wg-solid .wg-tile-box,
[data-theme="dark"] .my-widget.wg-2x2.wg-solid.frame-glass .wg-tile-box { border: 1px solid transparent; }
/* 暗色壁纸下：组件卡大扩散蓝黑阴影会呈「黑边框」观感，一律去除（亮色主题不受影响） */
[data-theme="dark"] .my-widget.wg-solid,
[data-theme="dark"] .my-widget.wg-solid:hover { box-shadow: none !important; }
[data-theme="dark"] .my-widget.wg-2x2 .wg-tile-box { box-shadow: none !important; }
/* 2×2 内部内容微收（抵消名称行占用，内容显示与原来保持一致） */
.my-widget.wg-2x2 .mw-todo-list, .my-widget.wg-2x2 .mw-note-list { gap: 3px; }
.my-widget.wg-2x2 .mw-widget-more { margin-top: 2px; }
.my-widget.wg-2x2 .mw-todo-stat { padding: 1px 2px 1px; }
.my-widget.wg-2x2 .my-widget-head { margin-bottom: 2px; }
.my-widget.wg-2x2.wg-tint-notes .mw-note-item { padding: 3px 4px; }

/* 待办/笔记 2×2：常驻「图标芯片 + 卡片名」品牌头（用户诉求：空卡片不能空洞），
   操作按钮（外观/最小化）仍悬浮右上角 hover 出现 —— 故只隐藏 .my-widget-acts，不隐藏标题。
   注：3×2 等更大尺寸沿用原有「标题在左、操作在右」的头布局。 */
.my-widget.wg-2x2.wg-tint-todo .my-widget-head,
.my-widget.wg-2x2.wg-tint-notes .my-widget-head {
  position: static; inset: auto; z-index: auto;
  margin: 0 0 6px; padding: 0; opacity: 1;
  background: none; border-radius: 0;
}
.my-widget.wg-2x2.wg-tint-todo .my-widget-acts,
.my-widget.wg-2x2.wg-tint-notes .my-widget-acts {
  position: absolute; top: 6px; right: 6px; z-index: 4;
}
/* 悬浮头内按钮颜色与热搜卡保持一致 */
.my-widget.wg-2x2.wg-tint-todo .my-widget-head .my-widget-act,
.my-widget.wg-2x2.wg-tint-notes .my-widget-head .my-widget-act { color: #fff; }
/* 2×2 统计区/标题栏紧凑化：环形 40→30、大数字上限 30、标题图标 24→20，
   保证 4 行待办 + 底部「查看全部」行在 172px 方块内完整可见（不裁切） */
.my-widget.wg-2x2 .mw-todo-num b { font-size: clamp(20px, 5.2cqh, 30px); }
.my-widget.wg-2x2 .mw-todo-ring { width: 30px; height: 30px; }
.my-widget.wg-2x2 .mw-todo-ring::before { inset: 3px; }
.my-widget.wg-2x2 .mw-todo-ring span { font-size: 8.5px; }
.my-widget.wg-2x2 .my-widget-ic { width: 20px; height: 20px; border-radius: 6px; }
/* 2×2 待办/笔记空状态：图标 + 主文案 + 行动按钮，填满卡片不空洞（用户诉求） */
.my-widget.wg-2x2 .mw-empty {
  padding: 0; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  text-align: center;
}
.my-widget.wg-2x2 .mw-empty-ic {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--wg-accent);
  background: color-mix(in srgb, var(--wg-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wg-accent) 22%, transparent);
}
.my-widget.wg-2x2 .mw-empty-tt {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  line-height: 1.3; max-width: 100%;
}
.my-widget.wg-2x2 .mw-empty-sub {
  font-size: 11px; color: var(--text-soft); line-height: 1.35; max-width: 92%;
}
.my-widget.wg-2x2 .mw-empty-btn {
  margin-top: 3px; border: none; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, var(--wg-accent), var(--wg-accent-2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wg-accent) 34%, transparent);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.my-widget.wg-2x2 .mw-empty-btn:hover { transform: translateY(-1px); filter: saturate(1.08); box-shadow: 0 6px 16px color-mix(in srgb, var(--wg-accent) 42%, transparent); }
.my-widget.wg-2x2 .mw-empty-btn:active { transform: translateY(0) scale(.97); }

/* 拖拽占位落在内容方块上（外层卡已透明） */
.my-widget.wg-2x2.wg-ph { background: none; border: none; }
.my-widget.wg-2x2.wg-ph .wg-tile-box {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  border: 2px dashed color-mix(in srgb, var(--primary) 42%, transparent);
}
/* 2×2 组件卡操作按钮：默认隐藏，悬停/聚焦/拖拽/编辑态才浮出 */
.my-widget.wg-2x2 .my-widget-acts { opacity: 0; transition: opacity .15s ease; }
.my-widget.wg-2x2:hover .my-widget-acts,
.my-widget.wg-2x2:focus-within .my-widget-acts,
.my-widget.wg-2x2.is-dragging .my-widget-acts,
.my-unified-grid.is-edit .my-widget.wg-2x2 .my-widget-acts,
.my-cat-unified-grid.is-edit .my-widget.wg-2x2 .my-widget-acts { opacity: 1; }
.my-widget[data-type="ledger"] .lg-mini-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }

/* 统计区：用暗色玻璃面板把结余/收支/借款包起来，层级更分明 */
.my-widget[data-type="ledger"] .lg-top {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.my-widget[data-type="ledger"] .lg-bal { letter-spacing: -.8px; text-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; }
.my-widget[data-type="ledger"] .lg-io { margin-top: 6px; flex-wrap: wrap; row-gap: 3px; }
.my-widget[data-type="ledger"] .lg-io-item { white-space: nowrap; }
.my-widget[data-type="ledger"] .lg-io-loan { padding-top: 5px; border-top: 1px solid rgba(255,255,255,.10); margin-top: 5px; }

/* 列表行：卡片化 + 悬停/展开反馈 */
.my-widget[data-type="ledger"] .lg-item {
  background: rgba(255,255,255,.05);
  border-bottom: none;
  border-radius: 10px;
  padding: 8px 9px;
  margin-bottom: 4px;
}
.my-widget[data-type="ledger"] .lg-item:hover { background: rgba(255,255,255,.10); }
.my-widget[data-type="ledger"] .lg-item.open { background: rgba(255,255,255,.12); }
.my-widget[data-type="ledger"] .lg-item-ic { background: rgba(255,255,255,.10); }

/* 记一笔 / 看明细 弹窗：薄荷绿暗色玻璃（第四十一轮：与首页账本卡的薄荷绿体系统一） */
.ledger-modal {
  --lm: #14b8a6;        /* 青绿主色 */
  --lm-2: #5eead4;      /* 青绿亮端 */
  --lm-ink: #0f2e2b;    /* 深色字（AA 对比） */
  --lm-card: #f0fdfa;   /* 卡片底 */
  --lm-border: #d4f3ee; /* 卡片边框 */
  --lm-soft: #5a6e6c;   /* 次要文字 */
  --primary: #14b8a6;   /* 让按钮 / 激活态统一青绿 */
  width: min(520px, calc(100vw - 24px));
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
  border: 1px solid var(--lm-border); border-radius: 20px; color: #0f2e2b;
  box-shadow: 0 24px 60px rgba(15,46,43,.18);
}
.ledger-modal .modal-header { border-bottom: 1px solid var(--lm-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ledger-modal .modal-header h3 { color: #0f2e2b; font-size: 18px; }
.ledger-modal .modal-close { color: #5a6e6c; }
.ledger-modal .modal-close:hover { color: #0f2e2b; }
.ledger-modal .modal-body { color: #0f2e2b; padding-top: 14px; }

/* 标题 + 副标题 */
.lg2-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.lg2-sub { margin: 2px 0 0; font-size: 12px; color: var(--lm-soft); }

/* 顶部 4 pill 标签 */
.lg2-tabs { display: flex; gap: 8px; margin: 2px 0 14px; }
.lg2-tab {
  flex: 1 1 0; min-width: 60px; padding: 9px 6px; border: 1px solid var(--lm-border);
  background: #fff; color: #0f2e2b; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.lg2-tab:hover { border-color: var(--lm); }
.lg2-tab.active { background: linear-gradient(135deg, var(--lm), var(--lm-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--lm) 28%, transparent); }

.lg2-pane { display: flex; flex-direction: column; gap: 14px; }

/* 汇总卡网格 */
.lg2-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lg2-sc { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; gap: 4px; text-align: center; min-width: 0; }
.lg2-sc i { font-style: normal; font-size: 11px; color: var(--lm-soft); }
.lg2-sc b { font-size: 14px; font-weight: 800; color: #0f2e2b; word-break: break-all; line-height: 1.2; }
.lg2-sc b.pos { color: #0f9d76; }
.lg2-sc b.neg { color: #e5484d; }
.lg2-sc b.asset { color: var(--lm); }

/* 预算进度 */
.lg2-budget { display: flex; flex-direction: column; gap: 6px; }
.lg2-budget-hint { font-size: 12px; color: var(--lm-soft); background: var(--lm-card); border: 1px dashed var(--lm-border); border-radius: 10px; padding: 8px 10px; }
.lg2-budget-top { display: flex; justify-content: space-between; font-size: 13px; }
.lg2-budget-top b { font-weight: 700; }
.lg2-budget-track { height: 10px; border-radius: 6px; background: #e2f3ef; overflow: hidden; }
.lg2-budget-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--lm), var(--lm-2)); transition: width .3s ease; }
.lg2-budget-fill.over { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.lg2-budget-pct { font-size: 12px; color: var(--lm-soft); }

/* 表单 */
.lg2-form { display: flex; flex-direction: column; gap: 12px; background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 14px; padding: 14px; }
.lg2-form-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }
.lg2-list-wrap { display: flex; flex-direction: column; gap: 10px; }

/* 表单内部元素（覆盖全局 .lg-* 浅色） */
.ledger-modal .lg-kind-seg { background: #e2f3ef; border-color: var(--lm-border); }
.ledger-modal .lg-kind { color: #0f2e2b; }
.ledger-modal .lg-kind.active { background: linear-gradient(135deg, var(--lm), var(--lm-2)); color: #fff; font-weight: 800; box-shadow: 0 3px 10px color-mix(in srgb, var(--lm) 28%, transparent); }
.ledger-modal .lg-cur { color: #0f2e2b; }
.ledger-modal .lg-amount { color: #0f2e2b; font-size: 24px; }
.ledger-modal .lg-amount::placeholder { color: #9bbdb6; }
.ledger-modal .lg-label { color: #0f2e2b; }
.ledger-modal .lg-cats { gap: 8px; }
.ledger-modal .lg-cat { background: #fff; border-color: var(--lm-border); }
.ledger-modal .lg-cat:hover { transform: translateY(-1px); border-color: var(--lm); }
.ledger-modal .lg-cat-name { color: #0f2e2b; }
.ledger-modal .lg-cat.active { background: color-mix(in srgb, var(--lm) 16%, #fff); border-color: var(--lm); box-shadow: 0 3px 10px color-mix(in srgb, var(--lm) 18%, transparent); }
.ledger-modal .lg-cat.active .lg-cat-name { color: #0f2e2b; font-weight: 800; }
.ledger-modal .lg-date, .ledger-modal .lg-note, .ledger-modal .lg-month-input, .ledger-modal .lg-search-input, .ledger-modal .lg-input { background: #fff; border-color: var(--lm-border); color: #0f2e2b; }
.ledger-modal .lg-date:focus, .ledger-modal .lg-note:focus, .ledger-modal .lg-search-input:focus, .ledger-modal .lg-month-input:focus, .ledger-modal .lg-input:focus { border-color: var(--lm) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lm) 18%, transparent) !important; }
.ledger-modal .lg-row .lg-label { color: #0f2e2b; }
.ledger-modal .lg-error { color: #e5484d; }

/* 筛选栏 */
.ledger-modal .lg-filter { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ledger-modal .lg-filter-lab { color: var(--lm-soft); }
.ledger-modal .lg-tilde { color: var(--lm-soft); }
.ledger-modal .lg-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ledger-modal .lg-qchip { border: 1px solid var(--lm-border); color: #0f2e2b; background: #fff; border-radius: 9px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.ledger-modal .lg-qchip:hover { border-color: var(--lm); }
.ledger-modal .lg-qchip.active { border-color: var(--lm); background: color-mix(in srgb, var(--lm) 16%, #fff); color: var(--lm); font-weight: 700; }
.ledger-modal .lg-filter-reset { color: var(--lm-soft); background: none; border: none; cursor: pointer; font-size: 12.5px; }
.ledger-modal .lg-filter-row.lg-types .lg-ft { color: #0f2e2b; border: 1px solid var(--lm-border); background: #fff; border-radius: 9px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.ledger-modal .lg-filter-row.lg-types .lg-ft.active { color: #fff; background: linear-gradient(135deg, var(--lm), var(--lm-2)); border-color: transparent; font-weight: 700; }
.ledger-modal .lg-cat-chip { border: 1px solid var(--lm-border); color: #0f2e2b; background: #fff; border-radius: 9px; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.ledger-modal .lg-cat-chip.active { border-color: var(--lm); background: color-mix(in srgb, var(--lm) 16%, #fff); color: var(--lm); font-weight: 700; }

/* 概览 */
.ledger-modal .lg-overview { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.ledger-modal .lgo-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ledger-modal .lgo-item { display: flex; flex-direction: column; gap: 2px; }
.ledger-modal .lgo-item i { font-style: normal; font-size: 11px; color: var(--lm-soft); }
.ledger-modal .lgo-item b { font-weight: 800; }
.ledger-modal .lgo-item b.pos { color: #0f9d76; }
.ledger-modal .lgo-item b.neg { color: #e5484d; }
.ledger-modal .lgo-item b.loan-out { color: #f59e0b; }
.ledger-modal .lgo-item b.loan-in { color: #6366f1; }
.ledger-modal .lgo-loan { border-top: 1px solid var(--lm-border); padding-top: 6px; margin-top: 2px; }

/* 明细列表 */
.ledger-modal .lg-list-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #0f2e2b; border-top: 1px solid var(--lm-border); padding-top: 8px; }
.ledger-modal .lg-count { color: var(--lm-soft); font-weight: 600; }
.ledger-modal .lg-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ledger-modal .lg-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--lm-border); border-radius: 12px; cursor: pointer; }
.ledger-modal .lg-item.open { border-color: var(--lm); }
.ledger-modal .lg-item-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--lm-card); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.ledger-modal .lg-item-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ledger-modal .lg-item-mid b { font-size: 13px; font-weight: 700; color: #0f2e2b; }
.ledger-modal .lg-item-mid i { font-style: normal; font-size: 11px; color: var(--lm-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-modal .lg-item-date { font-size: 10.5px; color: #9bbdb6; margin-left: 6px; }
.ledger-modal .lg-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.ledger-modal .lg-item-amt { font-size: 13.5px; font-weight: 800; font-family: var(--font-mono); }
.ledger-modal .lg-item-amt.in { color: #0f9d76; }
.ledger-modal .lg-item-amt.out { color: #e5484d; }
.ledger-modal .lg-loan-tag { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: color-mix(in srgb, #6366f1 14%, #fff); color: #6366f1; font-weight: 700; }
.ledger-modal .lg-loan-tag.done { background: color-mix(in srgb, #0f9d76 14%, #fff); color: #0f9d76; }
.ledger-modal .lg-loan-badge { font-size: 10px; padding: 0 5px; border-radius: 6px; background: #fef3c7; color: #b45309; margin-left: 4px; }
.ledger-modal .lg-del { background: none; border: none; color: #c0ccca; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.ledger-modal .lg-del:hover { color: #e5484d; }
.ledger-modal .lg-repay-btn { border: 1px solid var(--lm-border); background: #fff; color: #0f2e2b; border-radius: 9px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.ledger-modal .lg-repay-btn:hover { border-color: var(--lm); }
.ledger-modal .lg-detail { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.ledger-modal .lg-detail-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.ledger-modal .lg-detail-row span { color: var(--lm-soft); }
.ledger-modal .lg-detail-row b { color: #0f2e2b; }
.ledger-modal .lg-detail-acts { margin-top: 4px; }
.ledger-modal .lg-mini-btn { background: #fff; color: #0f2e2b; border: 1px solid var(--lm-border); border-radius: 9px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ledger-modal .lg-mini-btn:hover { border-color: var(--lm); }
.ledger-modal .lg-empty { padding: 18px; text-align: center; color: var(--lm-soft); font-size: 13px; }

/* 编辑提示条 */
.ledger-modal .lg-editing { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: color-mix(in srgb, #f59e0b 14%, #fff); border: 1px solid #fcd34d; border-radius: 10px; padding: 7px 10px; font-size: 12.5px; color: #92400e; }
.ledger-modal .lg-editing-cancel { background: none; border: none; color: #b45309; cursor: pointer; font-size: 12.5px; font-weight: 700; }

/* 看板页 */
.lg2-board-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg2-range-lab { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--lm-soft); }
.lg2-range-in { width: auto; }
.lg2-range-tilde { color: var(--lm-soft); }
.lg2-view-btn { padding: 8px 16px; }
.lg2-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.lg2-q { border: 1px solid var(--lm-border); color: #0f2e2b; background: #fff; border-radius: 10px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.lg2-q:hover { border-color: var(--lm); }
.lg2-q.active { background: linear-gradient(135deg, var(--lm), var(--lm-2)); color: #fff; border-color: transparent; }
.lg2-charts { display: flex; flex-direction: column; gap: 12px; }
.lg2-chart-card { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 14px; padding: 12px; }
.lg2-chart-title { font-size: 13px; font-weight: 700; color: #0f2e2b; margin-bottom: 8px; }
.lg2-svg-trend { width: 100%; height: auto; display: block; }
.lg2-pie-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lg2-svg-pie { width: 130px; height: 130px; flex-shrink: 0; }
.lg2-pie-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.lg2-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.lg2-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.lg2-legend-name { color: #0f2e2b; flex: 1; }
.lg2-legend-val { color: var(--lm-soft); font-weight: 600; }

/* 资产 / 预算 字段 */
.lg2-field { display: flex; flex-direction: column; gap: 6px; }
.lg2-input { padding: 11px 12px; border: 1px solid var(--lm-border); border-radius: 12px; font-size: 16px; background: #fff; color: #0f2e2b; }
.lg2-hint { font-size: 12px; color: var(--lm-soft); margin: 0; line-height: 1.5; }

/* footer */
.ledger-modal .modal-footer { border-top: 1px solid var(--lm-border); display: flex; justify-content: flex-end; gap: 12px; }
.ledger-modal .btn-primary { color: #fff; border: none; background: linear-gradient(135deg, var(--lm), var(--lm-2)); box-shadow: 0 4px 14px color-mix(in srgb, var(--lm) 30%, transparent); }
.ledger-modal .btn-primary:hover { filter: saturate(1.08) brightness(1.04); }

/* 还款核销弹窗：随主弹窗浅色青绿（HTML 上已挂 ledger-modal 类） */
.lg-repay-modal .lg-repay-info { background: var(--lm-card); border: 1px solid var(--lm-border); border-radius: 12px; }

/* ============ 第十五轮：移动端自适应（参考 linglu 手机版） ============ */
@media (max-width: 768px) {
  /* 组件卡紧凑内边距；缩放把手隐藏（触屏拖拽缩放体验差，属桌面能力） */
  .my-unified-grid .my-widget, .my-cat-unified-grid .my-widget { padding: 9px 10px; }
  .my-widget-resize { display: none; }
  /* 热搜卡：悬浮操作钮仅在编辑态出现（避免常驻压住平台 tab 行）；榜单行紧凑 */
  .my-unified-grid .my-widget[data-type="hot"] .my-widget-head,
  .my-cat-unified-grid .my-widget[data-type="hot"] .my-widget-head { opacity: 0; pointer-events: none; }
  .my-unified-grid.is-edit .my-widget[data-type="hot"] .my-widget-head,
  .my-cat-unified-grid.is-edit .my-widget[data-type="hot"] .my-widget-head { opacity: 1; pointer-events: auto; background: none; }
  .mw-hot-bar { margin-bottom: 6px; }
  .mw-hot-tab { padding: 3px 9px; font-size: 11.5px; }
  .mw-hot-item { font-size: 12.5px; padding: 4px 3px; gap: 8px; }
}
@media (max-width: 640px) {
  /* 统一网格：linglu 手机版 4 列流式轨道（替代固定 70px）+ 自适应行高。
     桌面单元 70×90、文件夹卡 2×2 近似 0.885 宽高比；手机端 4 列流式后若仍用 78px
     固定行高，文件夹卡会被压成扁平宽条、内部 2×2 格子变矩形。改用 minmax(86px, 23.5vw)
     让行高随列宽等比增长，使移动端文件夹卡比例与 PC 端一致且自适应视口。 */
  .my-unified-grid, .my-cat-unified-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(86px, 23.5vw);
    gap: 12px 10px;
    justify-content: stretch;
  }
  .my-unified-grid .icon-card-icon, .my-cat-unified-grid .icon-card-icon {
    width: 54px; height: 54px; border-radius: 13px; font-size: 21px;
  }
  .my-unified-grid .icon-card-name, .my-cat-unified-grid .icon-card-name { font-size: 11px; }
  /* 添加弹窗：页签缩小、分类页签改单行横滚（原换行占三屏高）、网址卡单列 */
  .mtab { padding: 7px 13px; font-size: 12.5px; }
  .pick-cat-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 2px 10px; scrollbar-width: none; }
  .pick-cat-bar::-webkit-scrollbar { display: none; }
  .pick-cat { padding: 4px 9px; font-size: 12.5px; }
  .pick-results { grid-template-columns: 1fr; }
  /* 卡片组件大卡：窄屏单列到两列自适应收窄 */
  .wp-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}

/* ============================================================
   全站移除聚焦反显边框/ring（用户反馈：搜索框红边框等）
   ============================================================ */
*:focus,
*:focus-visible,
*:focus-within { outline: none !important; }

/* 取消输入框/搜索框/表单 focus 时的 primary 色边框与 glow（弹窗内搜索/表单除外，需保留可见焦点） */
.my-search:focus-within,
.field input:focus, .field select:focus,
.filter-input:focus,
.todo-input:focus, .todo-date:focus,
.note-search:focus,
.note-ed-title-input:focus, .note-ed-content:focus,
.quick-picker .quick-picker-search:focus,
.weather-city-input:focus,
.lg-date:focus, .lg-note:focus,
.wp-url-input:focus,
.note-md-inline-input:focus,
.search-input:focus-visible, .my-search-input:focus-visible,
#noteContent:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 弹窗内搜索框与表单：保留柔和焦点样式，确保选中可见 */
.pick-search:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent) !important;
}
.lf-ctl:focus-within {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent) !important;
}

/* 首页搜索框单独保留默认浅边框（只去掉变红和 glow） */
.my-search:focus-within { border-color: color-mix(in srgb, var(--text-soft) 25%, var(--border)) !important; }

/* ============================================================
   用户中心（#/account）：登录态专属个人中心
   设计基调：与「我的首页/待办/笔记」同一套外壳语言（fixed 应用外壳 + 侧栏 + 内容区），
   视觉上用「渐变横幅 + KPI 条 + 卡片列表」建立个人感与数据感。
   颜色全部走现有令牌（--primary / --text / --surface / --border），不新增色轨。
   ============================================================ */
.uc-app {
  display: flex; position: fixed !important;
  top: var(--topbar-height, 56px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  max-width: 1560px; margin: 0 auto; width: 100%;
  background: var(--bg); overflow: hidden; z-index: 50;
}
/* ---- 左侧：身份卡 + 导航 ---- */
.uc-side {
  width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 10px; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto;
}
.uc-side::-webkit-scrollbar { width: 4px; }
.uc-side::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.uc-side-card {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: var(--radius-md); background: var(--surface-2);
}
.uc-avatar-lg, .uc-avatar {
  position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; color: #fff; font-weight: 800; letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(20, 30, 60, .18); user-select: none;
}
.uc-avatar-lg { width: 40px; height: 40px; font-size: 16px; }
.uc-avatar { width: 60px; height: 60px; font-size: 22px; border: 3px solid var(--surface); }
.uc-avatar-lg .avatar-img, .uc-avatar .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.uc-side-txt { min-width: 0; }
.uc-side-email { font-size: 12.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-side-state { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 11.5px; color: var(--text-soft); }
.uc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.uc-dot.on { background: var(--accent-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-emerald) 22%, transparent); }
.uc-nav { display: flex; flex-direction: column; gap: 2px; }
.uc-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 38px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left;
  color: var(--text-soft); font: inherit; font-size: 13.5px; font-weight: 600;
  transition: background .18s, color .18s; -webkit-tap-highlight-color: transparent;
}
.uc-nav-item .svg-ic { width: 17px; height: 17px; flex-shrink: 0; }
.uc-nav-item:hover { background: var(--surface-2); color: var(--text); }
.uc-nav-item.active { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.uc-nav-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-nav-cnt {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
}
.uc-nav-item.active .uc-nav-cnt { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.uc-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.uc-foot-btn {
  height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-soft); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s;
}
.uc-foot-btn:hover { background: var(--border); color: var(--text); }
.uc-foot-btn.primary { background: var(--primary); border-color: transparent; color: #fff; }
.uc-foot-btn.primary:hover { background: color-mix(in srgb, var(--primary) 88%, #000); color: #fff; }
.uc-foot-btn.danger { color: var(--accent-red); }
.uc-foot-btn.danger:hover { background: color-mix(in srgb, var(--accent-red) 12%, transparent); color: var(--accent-red); }

/* ---- 右侧：主内容 ---- */
.uc-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 32px; }
.uc-main::-webkit-scrollbar { width: 8px; }
.uc-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
/* 渐变横幅 */
.uc-hero {
  position: relative; margin: 16px 16px 0; padding: 20px 22px 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--primary) 18%, var(--surface)) 0%,
    color-mix(in srgb, var(--primary-2) 14%, var(--surface)) 52%,
    var(--surface) 100%);
}
.uc-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(360px 160px at 88% -20%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
    radial-gradient(260px 140px at 4% 120%, color-mix(in srgb, var(--primary-2) 26%, transparent), transparent 70%);
}
.uc-hero-top { position: relative; display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.uc-hero-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.uc-hero-txt { min-width: 0; }
.uc-hero-name { margin: 0; font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: .2px; }
.uc-hero-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-soft); }
.uc-hero-badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.uc-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; color: var(--text-soft); backdrop-filter: blur(6px);
}
.uc-badge.ok { color: var(--accent-emerald); border-color: color-mix(in srgb, var(--accent-emerald) 32%, transparent); }
.uc-badge.warn { color: var(--accent-amber); border-color: color-mix(in srgb, var(--accent-amber) 34%, transparent); }
/* KPI 条 */
.uc-kpis {
  position: relative; margin-top: 18px; padding-bottom: 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.uc-kpi {
  padding: 12px 14px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); backdrop-filter: blur(6px);
}
.uc-kpi-v { font-family: var(--font-mono); font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.15; }
.uc-kpi-v small { font-size: 12px; font-weight: 700; color: var(--text-soft); margin-left: 2px; }
.uc-kpi-l { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); }
/* 面板 */
.uc-panels { padding: 16px; }
.uc-panel { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-panel[data-panel="overview"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.uc-panel[data-panel="security"], .uc-panel[data-panel="favs"], .uc-panel[data-panel="ledger"], .uc-panel[data-panel="notes"], .uc-panel[data-panel="todos"], .uc-panel[data-panel="data"] { grid-template-columns: minmax(0, 1fr); }
.uc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow);
}
.uc-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.uc-card-tt { font-size: 14px; font-weight: 800; color: var(--text); }
.uc-card-sub { font-size: 11.5px; color: var(--text-muted); }
.uc-card-act { margin-left: auto; display: flex; gap: 6px; }
.uc-mini-btn {
  height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-soft); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.uc-mini-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 34%, transparent); }
/* 环形进度（待办完成率） */
.uc-ring-wrap { display: flex; align-items: center; gap: 16px; }
.uc-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.uc-ring svg { transform: rotate(-90deg); display: block; }
.uc-ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.uc-ring-n { font-family: var(--font-mono); font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; }
.uc-ring-l { margin-top: 2px; font-size: 10.5px; color: var(--text-muted); }
.uc-ring-side { min-width: 0; display: grid; gap: 6px; }
.uc-ring-line { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.uc-ring-line b { font-family: var(--font-mono); font-size: 16px; color: var(--text); }
/* 列表行 */
.uc-list { display: flex; flex-direction: column; gap: 2px; }
.uc-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md);
  cursor: pointer; transition: background .16s;
}
.uc-row:hover { background: var(--surface-2); }
.uc-check {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; border: 1.8px solid var(--border);
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 11px; font-weight: 900; padding: 0; transition: all .16s;
}
.uc-row.done .uc-check { background: var(--accent-emerald); border-color: var(--accent-emerald); color: #fff; }
.uc-row-tt { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-row.done .uc-row-tt { color: var(--text-muted); text-decoration: line-through; }
.uc-row-meta { flex-shrink: 0; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.uc-tag { flex-shrink: 0; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--surface-2); color: var(--text-soft); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.uc-tag.star { background: color-mix(in srgb, var(--accent-amber) 18%, transparent); color: var(--accent-amber); }
.uc-tag.over { background: color-mix(in srgb, var(--accent-red) 16%, transparent); color: var(--accent-red); }
/* 笔记卡 */
.uc-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.uc-note {
  padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer; transition: border-color .16s, background .16s;
}
.uc-note:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--surface); }
.uc-note-tt { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-note-ex { margin-top: 5px; font-size: 12px; color: var(--text-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.uc-note-ft { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
/* 收藏网格 */
.uc-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.uc-fav {
  display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; transition: border-color .16s;
}
.uc-fav:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.uc-fav-ic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; object-fit: contain; background: var(--surface); }
.uc-fav-nm { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-fav-ur { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 收藏行内编辑（点 ✎ 进入） */
.uc-fav-edit {
  flex-shrink: 0; width: 26px; height: 26px; margin-left: auto; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s, color .16s, background .16s;
}
.uc-fav-edit:hover { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.uc-fav-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .16s, color .16s, background .16s;
}
.uc-fav-del:hover { border-color: color-mix(in srgb, var(--accent-red) 45%, transparent); color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 10%, transparent); }
.uc-fav-confirm { grid-column: 1 / -1; cursor: default; align-items: stretch; padding: 12px; border-color: color-mix(in srgb, var(--accent-red) 35%, var(--border)); }
.uc-fav-confirm:hover { border-color: color-mix(in srgb, var(--accent-red) 35%, var(--border)); }
.uc-fav-cfm { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.uc-fav-edit-actions .uc-mini-btn.danger { background: var(--accent-red); border-color: var(--accent-red); color: #fff; }
.uc-fav-edit-actions .uc-mini-btn.danger:hover { filter: brightness(.94); }
.uc-fav-editing { grid-column: 1 / -1; cursor: default; align-items: stretch; padding: 12px; }
.uc-fav-editing:hover { border-color: var(--border); }
.uc-fav-edit-form { display: grid; grid-template-columns: 48px 1fr; gap: 6px 8px; align-items: center; width: 100%; }
.uc-fav-lb { font-size: 12px; color: var(--text-muted); }
.uc-fav-edit-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.uc-fav-edit-actions .uc-mini-btn { height: 30px; padding: 0 14px; }
.uc-fav-edit-actions .uc-mini-btn:first-child { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 账本 */
.uc-led-rows { display: flex; flex-direction: column; gap: 2px; }
.uc-led-tt { display: flex; gap: 14px; margin-bottom: 10px; }
.uc-led-stat { flex: 1 1 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.uc-led-stat .v { font-family: var(--font-mono); font-size: 19px; font-weight: 800; }
.uc-led-stat .l { margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.uc-amt { font-family: var(--font-mono); font-weight: 800; font-size: 13.5px; }
.uc-amt.out { color: var(--accent-red); }
.uc-amt.in { color: var(--accent-emerald); }
/* 安全项 */
.uc-sec-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--radius-md); }
.uc-sec-item + .uc-sec-item { border-top: 1px solid var(--border); }
.uc-sec-ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 16px; }
.uc-sec-tt { font-size: 13.5px; font-weight: 700; color: var(--text); }
.uc-sec-ds { margin-top: 2px; font-size: 11.5px; color: var(--text-soft); }
/* 空状态 */
.uc-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.uc-empty-ic { font-size: 26px; opacity: .5; margin-bottom: 6px; }
/* 未登录遮罩 */
.uc-guest { padding: 60px 20px; text-align: center; }
.uc-guest h3 { margin: 0 0 8px; font-size: 17px; color: var(--text); }
.uc-guest p { margin: 0 0 16px; font-size: 13px; color: var(--text-soft); }

/* 个人资料卡：头像选择器 + 昵称内联编辑 */
.uc-profile-body { display: flex; align-items: center; gap: 18px; }
.uc-profile-av { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.uc-profile-card #ucProfileAvatar { width: 72px; height: 72px; font-size: 26px; }
.uc-profile-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.uc-field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.uc-field-lb { width: 40px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.uc-field-val { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-link { border: 0; background: transparent; color: var(--primary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.uc-link:hover { text-decoration: underline; }
/* 账号设置面板：字段行（方案B） */
.uc-field-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.uc-field-row:last-child { border-bottom: 0; }
.uc-field-row .uc-field-k { width: 96px; flex: 0 0 auto; font-size: 12.5px; color: var(--text-muted); }
.uc-field-row .uc-field-v { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-field-row .uc-link { flex: 0 0 auto; }
.uc-sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.uc-sec-grid > .uc-card { min-width: 0; }
@media (max-width: 900px) {
  .uc-sec-grid { grid-template-columns: 1fr; }
}
.uc-nick-edit { display: flex; align-items: center; gap: 6px; }
.uc-nick-edit[hidden] { display: none; }
.uc-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; }
.uc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.uc-av-picker { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.uc-av-picker[hidden] { display: none; }
.uc-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 10px; }
.uc-av-opt {
  width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--border);
  background: var(--surface-2); cursor: pointer; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; transition: border-color .16s, transform .12s;
}
.uc-av-opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.uc-av-opt.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.uc-av-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uc-av-opt.upload { font-size: 18px; color: var(--text-soft); }

/* ---- 移动端：侧栏变横向 Tab，横幅收紧 ---- */
@media (max-width: 860px) {
  .uc-app { flex-direction: column; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; min-height: calc(100vh - var(--topbar-height, 56px)); overflow: visible; }
  .uc-side {
    width: 100%; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px;
    border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden;
    position: sticky; top: 0; z-index: 20; background: var(--surface);
  }
  .uc-side-card, .uc-side-foot { display: none; }
  .uc-nav { flex-direction: row; gap: 6px; }
  .uc-nav-item { width: auto; flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); }
  .uc-nav-item.active { border-color: transparent; }
  .uc-nav-cnt { margin-left: 4px; }
  .uc-main { overflow: visible; padding-bottom: 24px; }
  .uc-hero { margin: 12px 12px 0; padding: 16px 16px 0; border-radius: var(--radius-lg); }
  .uc-avatar { width: 50px; height: 50px; font-size: 18px; }
  .uc-hero-name { font-size: 17px; }
  .uc-hero-badges { margin-left: 0; width: 100%; }
  .uc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .uc-kpi-v { font-size: 18px; }
  .uc-panels { padding: 12px; }
  .uc-panel, .uc-panel[data-panel="overview"] { grid-template-columns: minmax(0, 1fr); }
  .uc-note-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-fav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-led-tt { flex-direction: column; gap: 8px; }
}

/* 账号弹层 → 用户中心 主入口按钮 */
.uc-enter-btn { width: 100%; height: 40px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; }

/* ============================================================
   用户中心 · 双布局（B 工作台 / C 个人主页）—— 与原型预览对齐
   B work：卡片式悬浮侧栏 + 面包屑大标题 + 同步提示条 + 内容网格
   C home：浓郁渐变横幅 + 悬浮统计条 + 760px 窄栏 + 白色凸起分段控件
   两套共用同一批数据与面板，布局偏好存 syw:ucLayout
   ============================================================ */
.uc-main { position: relative; }
/* ---- 通用组件：与原型观感对齐（轻阴影 / 主色勾选 / 分隔线列表）---- */
.uc-card { padding: 18px; border-radius: 18px; box-shadow: 0 2px 8px rgba(40, 44, 80, .06); }
[data-theme="dark"] .uc-card { box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.uc-row {
  padding: 11px 0; border-radius: 0; border-bottom: 1px solid var(--border);
}
.uc-row:hover { background: transparent; }
.uc-row:last-child { border-bottom: 0; }
.uc-row.done .uc-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.uc-check { border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted)); background: var(--surface); }
.uc-check:hover { border-color: var(--primary); }
/* ---- 布局切换器（两布局共用，浮在内容区右上角）---- */
.uc-switch {
  position: absolute; top: 14px; right: 30px; z-index: 30;
  display: inline-flex; padding: 3px; border-radius: 999px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(40, 44, 80, .08);
}
.uc-switch button {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--text-soft); font: inherit; font-size: 12px; font-weight: 600;
  transition: background .18s, color .18s; -webkit-tap-highlight-color: transparent;
}
.uc-switch button .svg-ic { width: 14px; height: 14px; }
.uc-switch button:hover { color: var(--text); }
.uc-switch button.on {
  background: var(--surface); color: var(--primary);
  box-shadow: 0 1px 4px rgba(40, 44, 80, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* ---- B 工作台：面包屑 + 大标题 + 提示条 ---- */
.uc-work-head { display: none; padding: 18px 2px 0; }
.uc-crumb { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.uc-head-tt { margin: 6px 0 0; font-size: 19px; font-weight: 700; letter-spacing: .2px; color: var(--text); }
.uc-head-ds { margin: 5px 0 0; font-size: 12.5px; color: var(--text-muted); }
.uc-banner-note {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; margin-top: 14px;
  background: color-mix(in srgb, var(--accent-sky) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-sky) 26%, transparent);
  font-size: 12.5px; color: var(--text-soft);
}
.uc-banner-note b { color: var(--text); font-weight: 700; }
.uc-banner-note .svg-ic { width: 16px; height: 16px; color: var(--accent-sky); flex-shrink: 0; }
/* B：KPI 三连卡（图标 + 数字 + 迷你进度条） */
.uc-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.uc-kpi3 .uc-card { display: flex; align-items: center; gap: 12px; padding: 14px; }
.uc-kpi-ic {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.uc-kpi-ic .svg-ic { width: 18px; height: 18px; }
.uc-kpi-n { font-size: 22px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; color: var(--text); }
.uc-kpi-l2 { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.uc-kpi-bar { height: 4px; border-radius: 999px; background: var(--surface-2); margin-top: 7px; overflow: hidden; }
.uc-kpi-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* ============ B 工作台布局 ============ */
.uc-app[data-layout="work"] { padding: 18px; background: var(--bg); }
.uc-app[data-layout="work"] .uc-side {
  width: 250px; align-self: flex-start; border: 1px solid var(--border); border-right: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 2px 8px rgba(40, 44, 80, .06); overflow: hidden;
}
[data-theme="dark"] .uc-app[data-layout="work"] .uc-side { box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.uc-app[data-layout="work"] .uc-main { overflow-y: auto; padding-left: 18px; }
.uc-app[data-layout="work"] .uc-hero, .uc-app[data-layout="work"] .uc-kpis,
.uc-app[data-layout="work"] .uc-hero-acts, .uc-app[data-layout="work"] .uc-seg-wrap { display: none; }
.uc-app[data-layout="work"] .uc-work-head { display: block; }
.uc-app[data-layout="work"] .uc-panels { padding: 14px 2px 0; }
.uc-app[data-layout="work"] .uc-panel[data-panel="overview"] { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* ============ C 个人主页布局 ============ */
.uc-app[data-layout="home"] .uc-side, .uc-app[data-layout="home"] .uc-work-head { display: none; }
.uc-app[data-layout="home"] .uc-hero {
  height: 172px; margin: 16px 16px 0; padding: 0; border-radius: 22px; border-color: transparent;
  background: linear-gradient(125deg, var(--primary) 0%, var(--primary-2) 45%,
    color-mix(in srgb, var(--primary) 55%, #7c6cf6) 100%);
  box-shadow: 0 18px 44px rgba(40, 44, 80, .14);
}
[data-theme="dark"] .uc-app[data-layout="home"] .uc-hero { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
.uc-app[data-layout="home"] .uc-hero-bg {
  background:
    radial-gradient(circle at 6% -34%, rgba(255, 255, 255, .16), transparent 58%),
    radial-gradient(circle at 97% 132%, rgba(255, 255, 255, .12), transparent 60%);
}
.uc-app[data-layout="home"] .uc-hero-top { height: 100%; align-items: center; padding: 0 22px; }
.uc-app[data-layout="home"] .uc-avatar {
  width: 72px; height: 72px; font-size: 26px;
  border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.uc-app[data-layout="home"] .uc-hero-name {
  color: #fff; font-size: 21px; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.uc-app[data-layout="home"] .uc-hero-sub { color: #fff; opacity: .9; }
.uc-app[data-layout="home"] .uc-hero-badges { margin-left: auto; }
.uc-app[data-layout="home"] .uc-badge,
.uc-app[data-layout="home"] .uc-badge.ok,
.uc-app[data-layout="home"] .uc-badge.warn {
  background: rgba(255, 255, 255, .2); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
}
.uc-app[data-layout="home"] .uc-hero-acts { flex-direction: row; align-items: center; }
.uc-app[data-layout="home"] .uc-hero-acts .uc-mini-btn {
  background: rgba(255, 255, 255, .2); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.uc-app[data-layout="home"] .uc-hero-acts .uc-mini-btn:hover { background: rgba(255, 255, 255, .3); color: #fff; }
/* 悬浮统计条：压在横幅下沿 */
.uc-app[data-layout="home"] .uc-kpis {
  margin: -26px 30px 0; position: relative; z-index: 2; padding: 14px 6px; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.uc-app[data-layout="home"] .uc-kpi {
  padding: 0 6px; text-align: center; background: transparent; border: 0;
  border-right: 1px solid var(--border); border-radius: 0; backdrop-filter: none;
}
.uc-app[data-layout="home"] .uc-kpi:last-child { border-right: 0; }
.uc-app[data-layout="home"] .uc-kpi-v { font-size: 19px; letter-spacing: -.4px; }
/* 内容限宽 + 白色凸起分段控件 */
.uc-app[data-layout="home"] .uc-panels { max-width: 760px; margin: 0 auto; padding: 14px 16px 0; }
.uc-app[data-layout="home"] .uc-seg-wrap { position: static; background: transparent; padding: 16px 16px 0; }
.uc-app[data-layout="home"] .uc-seg {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; padding: 4px;
  border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); backdrop-filter: none;
}
.uc-app[data-layout="home"] .uc-seg-ind { display: none; }
.uc-app[data-layout="home"] .uc-seg-b { height: 32px; border-radius: 9px; font-size: 13px; }
.uc-app[data-layout="home"] .uc-seg-b.on {
  background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(40, 44, 80, .06);
}
[data-theme="dark"] .uc-app[data-layout="home"] .uc-seg-b.on { box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.uc-app[data-layout="home"] .uc-panel, .uc-app[data-layout="home"] .uc-panel[data-panel="overview"] { grid-template-columns: minmax(0, 1fr); }
.uc-app[data-layout="home"] .uc-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- 移动端 ---- */
@media (max-width: 860px) {
  .uc-switch { top: 8px; right: 16px; }
  .uc-switch button { height: 26px; padding: 0 9px; font-size: 11.5px; }
  .uc-app[data-layout="work"] { padding: 12px; }
  .uc-app[data-layout="work"] .uc-side { width: 100%; align-self: auto; }
  .uc-app[data-layout="work"] .uc-main { padding-left: 0; }
  .uc-app[data-layout="work"] .uc-panel[data-panel="overview"] { grid-template-columns: minmax(0, 1fr); }
  .uc-kpi3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-work-head { padding: 12px 2px 0; }
  .uc-app[data-layout="home"] .uc-hero { height: 158px; margin: 12px 12px 0; }
  .uc-app[data-layout="home"] .uc-hero-top { padding: 0 16px; gap: 13px; }
  .uc-app[data-layout="home"] .uc-avatar { width: 56px; height: 56px; font-size: 20px; }
  .uc-app[data-layout="home"] .uc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; margin: -26px 22px 0; }
  .uc-app[data-layout="home"] .uc-kpi:nth-child(2) { border-right: 0; }
  .uc-app[data-layout="home"] .uc-note-grid { grid-template-columns: minmax(0, 1fr); }
  .uc-hero-acts { margin-left: 0; width: 100%; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
}

/* ---- 修复：分段控件基础规则（border/background 复位到按钮默认之外）---- */
.uc-seg-wrap { padding: 12px 16px 2px; }
.uc-seg {
  position: relative; padding: 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface) 72%, #000));
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
}
.uc-seg-ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 6); border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .36s cubic-bezier(.34, 1.48, .5, 1);
}
.uc-seg-b {
  position: relative; z-index: 1; min-width: 0; height: 30px; padding: 0 6px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--text-soft); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: color .2s; -webkit-tap-highlight-color: transparent;
}
.uc-seg-b.on { color: #fff; }
/* ---- 修复：个人主页布局整体限宽 760（横幅/统计条/分段/内容同轴），切换器贴横幅右上 ---- */
.uc-app[data-layout="home"] .uc-hero {
  max-width: 760px; margin: 16px auto 0; width: calc(100% - 32px);
}
.uc-app[data-layout="home"] .uc-kpis {
  max-width: 760px; margin: -26px auto 0; width: calc(100% - 60px);
}
.uc-app[data-layout="home"] .uc-seg-wrap {
  max-width: 760px; margin: 0 auto; width: calc(100% - 32px);
}
.uc-app[data-layout="home"] .uc-switch {
  top: 30px; right: max(16px, calc(50% - 380px + 16px));
}
@media (max-width: 860px) {
  .uc-app[data-layout="home"] .uc-hero, .uc-app[data-layout="home"] .uc-kpis, .uc-app[data-layout="home"] .uc-seg-wrap { width: calc(100% - 24px); }
  .uc-app[data-layout="home"] .uc-kpis { margin: -26px auto 0; }
  .uc-app[data-layout="home"] .uc-switch { top: 22px; right: max(12px, calc(50% - 178px + 12px)); }
}