/* Sean's Nav — 前端样式，仿 XiaoWork Nav（2026-11-08 从 nav.xiaoworks.com 实测）。
   三个主题，各自独立、各有味道：锦鲤池塘（默认，暖色深水渐变 #171410、橙色点缀、米色方块、像素大锦鲤）、
   雾蓝（雾更浓的淡蓝白雾底 #e6f0fd、深蓝点缀 #1d4ed8，带漂移雾层和更强的液态玻璃）和墨金（近黑暖墨底 #0a0908、亮金点缀 #f2c14e）。
   :root 的默认值就是池塘配色；雾蓝 / 墨金用 [data-theme] 覆盖全部变量。
   主题存在 localStorage 的 xn-theme，旧值 dark 映射到墨金，旧值 light / morning 映射到雾蓝，未知值落到池塘。
   打磨标准：干净精致 — 系统字体、8pt 间距（8/16/24/32）、轻字重、柔和阴影、
   克制的点缀色；锦鲤是像素大鱼（见 app.js），只在池塘主题下出现。 */
*,*:before,*:after{box-sizing:border-box}
:root{
  --radius-sm:10px;--radius:14px;--radius-lg:20px;
  --page-width:1200px;--tile-size:60px;--tile-gap-x:26px;--tile-gap-y:20px;
  --transition:.2s cubic-bezier(.2,.8,.2,1);--rail-width:212px;--rail-width-collapsed:60px;
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;
  --rail-inset:12px;--shell-topbar-h:64px;--shell-gutter:clamp(14px,2.4vw,40px);
}
:root{color-scheme:dark;
  --bg-base:#171410;--bg-1:#221c13;--bg-2:#1a1510;--bg-3:#131009;--bg-4:#0e0c08;
  --surface:rgba(34,33,32,.65);--surface-strong:rgba(42,41,40,.86);--surface-solid:#282723;
  --border:rgba(255,247,240,.14);--border-strong:rgba(255,247,240,.33);
  --text-main:#fff7f0;--text-sub:#d0c8c0;--text-dim:#9b958e;
  --accent:#e6a878;--accent-2:#d98758;--accent-contrast:#1a1917;
  --danger:#ff5f6d;--success:#34d399;--warning:#fbbf24;
  --input-bg:rgba(27,26,25,.9);--tile-bg:#e9e3da;
  --shadow-soft:0 1px 2px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.24);--shadow-card:0 1px 3px rgba(0,0,0,.20),0 4px 12px rgba(0,0,0,.20);
  --rail-bg:rgba(26,25,23,.83);--rail-border:rgba(255,247,240,.11);--rail-hover:rgba(255,247,240,.08);
  --rail-active:rgba(230,168,120,.15);--rail-chip:rgba(255,247,240,.08);--rail-scroll-thumb:rgba(255,247,240,.15);
}
/* ---------- 雾蓝：浅蓝底 + 深蓝点缀，蓝得清楚，和暖调的池塘/墨金完全不同 ---------- */
[data-theme=mist]{color-scheme:light;
  --bg-base:#e6f0fd;--bg-1:#eaf2fe;--bg-2:#dfeafc;--bg-3:#d7e5fb;--bg-4:#d3e2fa;
  --surface:rgba(255,255,255,.55);--surface-strong:rgba(255,255,255,.72);--surface-solid:#ffffff;
  --border:rgba(29,78,216,.18);--border-strong:rgba(29,78,216,.38);
  --text-main:#0f2a5c;--text-sub:#2c4a7a;--text-dim:#5b7aa8;
  --accent:#1d4ed8;--accent-2:#2563eb;--accent-contrast:#ffffff;
  --danger:#dc2626;--success:#16a34a;--warning:#d97706;
  --input-bg:rgba(255,255,255,.62);--tile-bg:rgba(255,255,255,.55);
  --shadow-soft:0 1px 2px rgba(29,78,216,.10),0 10px 28px rgba(29,78,216,.12),0 0 24px rgba(255,255,255,.45);--shadow-card:0 1px 3px rgba(29,78,216,.13),0 4px 12px rgba(29,78,216,.10);
  --rail-bg:rgba(227,238,253,.55);--rail-border:rgba(29,78,216,.14);--rail-hover:rgba(29,78,216,.09);
  --rail-active:rgba(29,78,216,.16);--rail-chip:rgba(29,78,216,.10);--rail-scroll-thumb:rgba(29,78,216,.28);
}
/* ---------- 深色：墨金，近黑暖墨底 + 亮金点缀 ---------- */
[data-theme=inkgold]{color-scheme:dark;
  --bg-base:#0a0908;--bg-1:#0a0908;--bg-2:#0a0908;--bg-3:#0a0908;--bg-4:#0a0908;
  --surface:rgba(45,36,20,.62);--surface-strong:rgba(56,45,26,.88);--surface-solid:#2b2416;
  --border:rgba(242,193,78,.22);--border-strong:rgba(242,193,78,.48);
  --text-main:#faf3e3;--text-sub:#d8c9a3;--text-dim:#9a8a68;
  --accent:#f2c14e;--accent-2:#ffd970;--accent-contrast:#141210;
  --danger:#ff6b5e;--success:#4ade80;--warning:#fbbf24;
  --input-bg:rgba(20,16,10,.92);--tile-bg:#2b2416;
  --shadow-soft:0 1px 2px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.5),0 0 18px rgba(242,193,78,.07);--shadow-card:0 1px 3px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.45);
  --rail-bg:rgba(10,9,8,.82);--rail-border:rgba(242,193,78,.18);--rail-hover:rgba(242,193,78,.10);
  --rail-active:rgba(242,193,78,.22);--rail-chip:rgba(242,193,78,.12);--rail-scroll-thumb:rgba(242,193,78,.3);
}
html{min-height:100%;background-color:var(--bg-base)}
body{margin:0;min-height:100vh;color:var(--text-main);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Hiragino Sans GB","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  font-feature-settings:"tnum" 0;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;background-color:var(--bg-base);
  background-image:radial-gradient(ellipse 900px 620px at 88% -6%,color-mix(in srgb,var(--bg-4) 82%,transparent),transparent 62%),
    radial-gradient(ellipse 820px 560px at 6% 104%,color-mix(in srgb,var(--bg-3) 72%,transparent),transparent 60%),
    linear-gradient(158deg,var(--bg-1) 0%,var(--bg-2) 42%,var(--bg-3) 74%,var(--bg-4) 100%);
  background-repeat:no-repeat;background-size:cover}
/* 池塘水面：暖色深水，有光从右上洒下来、左下一点青色水深，读得出是水不是平板黑 */
[data-theme=pond] body{
  background-color:#171410;
  background-image:
    radial-gradient(ellipse 1000px 620px at 85% -8%, rgba(255,196,120,.15), transparent 62%),
    radial-gradient(ellipse 900px 640px at 8% 108%, rgba(64,120,110,.17), transparent 60%),
    radial-gradient(ellipse 700px 420px at 50% 42%, rgba(230,168,120,.05), transparent 70%),
    linear-gradient(168deg,#221c13 0%,#1a1510 46%,#12100b 78%,#0d0b08 100%);
  background-repeat:no-repeat;background-size:cover}
[data-theme=pond] .tile__label{text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 14px rgba(0,0,0,.5)}
[data-theme=pond] .clock__time{text-shadow:0 2px 20px rgba(0,0,0,.55)}
[data-theme=pond] .clock__date,[data-theme=pond] .category__title{text-shadow:0 1px 6px rgba(0,0,0,.65)}
[data-theme=mist] body{background:#e6f0fd}
[data-theme=inkgold] body{background:#0a0908}
[data-theme=mist] canvas#pond-canvas,[data-theme=inkgold] canvas#pond-canvas{display:none}
[data-theme=mist] .tile__letter,[data-theme=mist] .tile__text,[data-theme=mist] .tile__fallback{color:#1d4ed8}
[data-theme=inkgold] .tile__letter,[data-theme=inkgold] .tile__text,[data-theme=inkgold] .tile__fallback{color:#f2c14e;text-shadow:0 0 12px rgba(242,193,78,.35)}
[data-theme=inkgold] .tile__icon{border-color:rgba(242,193,78,.28);box-shadow:0 1px 3px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.45),0 0 14px rgba(242,193,78,.08)}
[data-theme=inkgold] .tile:hover .tile__icon{border-color:rgba(242,193,78,.55);box-shadow:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(242,193,78,.22)}
[data-theme=mist] .search__box{box-shadow:0 0 0 1px rgba(29,78,216,.14),var(--shadow-soft)}
[data-theme=inkgold] .search__box{box-shadow:0 0 0 1px rgba(242,193,78,.20),var(--shadow-soft)}
[data-theme=pond] #app{position:relative;z-index:1}
canvas#pond-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;image-rendering:pixelated}

/* ---------- 液态玻璃：所有面板都带磨砂透光 + 顶部高光 + 细亮边 ---------- */
/* 顶部高光 + 内发光是液态玻璃的关键：上亮下暗，边缘有一圈细亮线 */
.glass-hi{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),var(--shadow-soft)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 整体骨架：左侧分类栏 + 右侧内容 ---------- */
.shell{display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr);align-items:stretch;min-height:100vh}
.shell.is-collapsed{grid-template-columns:var(--rail-width-collapsed) minmax(0,1fr)}
.shell__main{display:flex;flex-direction:column;min-width:0}
.shell__topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;flex-shrink:0;height:var(--shell-topbar-h);padding:0 var(--shell-gutter);
  background:color-mix(in srgb,var(--bg-base) 55%,transparent);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid var(--border);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.shell__content{padding:2px var(--shell-gutter) 72px}
.shell__brand{display:none}
.page{width:min(100%,var(--page-width));margin:0 auto;padding:18px clamp(14px,3.4vw,40px) 64px}
.page--tabs{background-image:radial-gradient(ellipse 780px 460px at 50% -12%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 68%);background-repeat:no-repeat;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
[data-theme=pond] .page--tabs{background-image:none}

/* ---------- 左侧栏 ---------- */
.rail{position:sticky;top:0;display:flex;flex-direction:column;height:100vh;background:var(--rail-bg);
  border-right:1px solid var(--rail-border);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset -1px 0 0 rgba(255,255,255,.06);overflow:hidden}
.rail__brand{display:flex;align-items:center;gap:9px;padding:14px 14px 8px}
.rail__head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 8px}
.rail__title{font-size:.78rem;font-weight:700;color:var(--text-dim)}
.rail__toggle{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-sub);cursor:pointer;padding:2px 8px;font-size:.8rem}
.rail__list{display:flex;flex-direction:column;gap:2px;padding:0 10px 16px;overflow-y:auto}
.rail__item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text-sub);
  font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;transition:background var(--transition),color var(--transition)}
.rail__item:hover{background:var(--rail-hover);color:var(--text-main)}
.rail__item.is-active{background:var(--rail-active);color:var(--text-main);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.rail__icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--rail-chip);font-size:.76rem;line-height:1}
.rail__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail__count{font-size:.72rem;font-weight:700;color:var(--text-dim)}
.shell.is-collapsed .rail__brand{justify-content:center;padding:0}
.shell.is-collapsed .rail__brand .brand__title{display:none}
.shell.is-collapsed .rail__head{justify-content:center;padding:2px 0 8px}
.shell.is-collapsed .rail__item{grid-template-columns:1fr;justify-items:center;padding:8px 0}
.shell.is-collapsed .rail__title,.shell.is-collapsed .rail__label,.shell.is-collapsed .rail__count{display:none}

/* ---------- 顶栏：标志 + 布局切换 + 主题 + 登录 ---------- */
.brand{display:flex;align-items:center;gap:9px;min-width:0;font-size:1.02rem;font-weight:800;letter-spacing:.01em;text-decoration:none}
.brand__mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast);font-size:.82rem;font-weight:800;line-height:1}
.brand__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.layout-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.layout-switch__item{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 8px;border:0;border-radius:8px;
  background:transparent;color:var(--text-sub);font-size:.8rem;font-weight:600;cursor:pointer}
.layout-switch__item:hover{color:var(--text-main)}
.layout-switch__item.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)}
.theme-picker__select{flex-shrink:0;min-height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-main);font-size:.82rem;font-weight:600;cursor:pointer;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.theme-picker__select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 16px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface-strong);color:var(--text-main);
  font-size:.88rem;font-weight:500;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:transform var(--transition),background var(--transition),box-shadow var(--transition);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow-soft)}
.btn--sm{min-height:32px;padding:0 11px;font-size:.8rem;border-radius:var(--radius-sm)}
.btn--primary{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)}
.btn--danger{border-color:transparent;background:var(--danger);color:#fff}

/* ---------- 时钟 ---------- */
.clock{padding:var(--space-3) 0 var(--space-1);text-align:center}
.clock__time{display:inline-block;padding:6px 30px;border-radius:999px;font-size:clamp(2.5rem,7vw,4rem);font-weight:300;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-main);
  background:color-mix(in srgb,var(--surface) 42%,transparent);border:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-soft)}
.clock__date{margin-top:var(--space-1);color:var(--text-dim);font-size:.82rem;font-weight:500;letter-spacing:.02em}


/* ---------- AI 快捷入口 ---------- */
.ai-hero{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:var(--space-2) auto var(--space-3);padding:0 8px}
.ai-hero__label{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--accent)}
.ai-hero__item{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface-strong);color:var(--text-main);font-size:.88rem;font-weight:600;
  text-decoration:none;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow-soft)}
.ai-hero__item:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow-soft)}
.ai-hero__item--muse{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)}

/* ---------- 搜索 ---------- */
.search{width:min(100%,720px);margin:var(--space-2) auto var(--space-4)}
.search__box{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06),0 20px 52px #0a0c2c42;
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.search__box:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),var(--shadow-soft)}
[data-theme=pond] .search__box{box-shadow:0 0 0 1px rgba(230,168,120,.18),var(--shadow-soft)}
.search__engine{min-height:40px;max-width:120px;padding:0 10px;border:0;border-radius:999px;background:var(--surface);color:var(--text-main);font-size:.85rem;font-weight:600;cursor:pointer}
.search__input{flex:1;min-width:0;border:0;background:transparent;color:var(--text-main);font-size:1rem;outline:none}
.search__input::placeholder{color:var(--text-dim)}

/* ---------- 分类横条（手机端） / 标签模式 ---------- */
.chipbar{display:none;gap:8px;margin-bottom:16px;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.chipbar::-webkit-scrollbar{display:none}
.chipbar__item{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface-strong);color:var(--text-sub);
  font-size:.82rem;font-weight:600;white-space:nowrap;cursor:pointer;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.chipbar__item.is-active{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)}
.tabs{display:flex;align-items:center;gap:6px;margin-bottom:18px;padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs__item{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-sub);
  font-size:.86rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.tabs__item.is-active{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-contrast)}

/* ---------- 分组 ---------- */
.category{margin-bottom:var(--space-4)}
.category__head{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding-bottom:8px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.category__icon{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-strong);font-size:.95rem;line-height:1;
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.category__title{margin:0;font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface-strong);font-size:.72rem;font-weight:700;line-height:1.6;
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dim{color:var(--text-dim)}
.empty{color:var(--text-dim);font-size:.9rem}

/* ---------- 链接方块 ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,var(--tile-size));gap:var(--tile-gap-y) var(--tile-gap-x);justify-content:start}
.tile{width:var(--tile-size);display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:var(--radius);text-decoration:none;position:relative}
.tile__icon{position:relative;display:flex;align-items:center;justify-content:center;width:var(--tile-size);height:var(--tile-size);
  overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:16px;
  background:color-mix(in srgb,var(--tile-bg) 62%,transparent);
  backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.12),var(--shadow-card);
  transition:transform var(--transition),box-shadow var(--transition)}
.tile__icon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--transition);
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 32%,transparent 55%)}
.tile:hover .tile__icon{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.1),var(--shadow-soft)}
.tile:hover .tile__icon::after{opacity:1}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius)}
.tile__letter{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:1.25rem;font-weight:800;color:var(--accent);opacity:1;transition:opacity var(--transition)}
.tile__letter.is-covered{opacity:0}
.tile__img{position:relative;z-index:1;width:68%;height:68%;object-fit:contain;opacity:0;transition:opacity var(--transition)}
.tile__img.is-loaded{opacity:1}
.tile__text{max-width:84%;font-size:.8rem;font-weight:800;line-height:1.15;text-align:center;color:var(--accent);overflow-wrap:anywhere}
.tile__fallback{font-size:1.25rem;font-weight:800;color:var(--accent)}
[data-theme=pond] .tile__letter,[data-theme=pond] .tile__text,[data-theme=pond] .tile__fallback{color:#7a4a24}
/* 池塘图标要清晰：液态玻璃的半透明 + 模糊会把游动的锦鲤/水光透进来，图标发灰看不清。
   所以池塘的图标块改回实心米色底、不模糊，图标本身才锐利饱满；只留顶部高光和细亮边，
   保留一点玻璃框的感觉。墨金/雾蓝不动。 */
[data-theme=pond] .tile__icon{background:#e9e3da;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(122,74,36,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(122,74,36,.12),0 1px 3px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.28)}
[data-theme=pond] .tile:hover .tile__icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(122,74,36,.12),0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.32)}
[data-theme=pond] .tile:hover .tile__icon::after{opacity:.35}
[data-theme=pond] .tile__img{filter:drop-shadow(0 1px 2px rgba(60,40,20,.25))}
.tile__label{width:100%;font-size:.75rem;font-weight:500;line-height:1.33;letter-spacing:0;text-align:center;color:var(--text-main);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  word-break:keep-all;overflow-wrap:break-word;min-height:2.6em}
.tile .ops{position:absolute;top:-6px;right:-6px;display:flex;gap:2px;z-index:2}
.tile .ops button{width:20px;height:20px;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--surface-solid);color:var(--text-main);font-size:.65rem;cursor:pointer}
.sec-del{margin-left:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-dim);cursor:pointer;padding:2px 8px}

/* ---------- 列表视图（顶栏第二个切换按钮） ---------- */
body.list-view .tiles{display:flex;flex-direction:column;gap:6px}
body.list-view .tile{width:100%;flex-direction:row;gap:10px;align-items:center}
body.list-view .tile__icon{width:34px;height:34px;border-radius:10px;flex-shrink:0}
body.list-view .tile__label{width:auto;min-height:0;text-align:left;font-size:.9rem;-webkit-line-clamp:1;line-clamp:1}

/* ---------- 弹窗 / 管理员 ---------- */
.modal-wrap{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:50;padding:16px}
.modal-wrap.open{display:flex}
.modal{width:min(100%,540px);max-height:calc(100vh - 40px);overflow-y:auto;padding:var(--space-3);border:1px solid var(--border);
  border-radius:20px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow-soft);
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)}
.modal h3{margin:0 0 12px;font-size:1.05rem}
.modal label{display:block;margin:10px 0 4px;font-size:.85rem;color:var(--text-sub)}
.modal input,.modal select{width:100%;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--input-bg);color:var(--text-main);font:inherit;font-size:.95rem;
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.modal .row{display:flex;gap:8px;margin-top:16px}
.modal .err{color:var(--danger);font-size:.85rem;min-height:1.2em}
.foot{margin-top:28px;text-align:center;color:var(--text-dim);font-size:.8rem}
.spinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 响应式 ---------- */
@media(max-width:1080px){
  .shell,.shell.is-collapsed{grid-template-columns:var(--rail-width-collapsed) minmax(0,1fr)}
  .rail__brand{justify-content:center;padding:0}
  .rail__brand .brand__title{display:none}
  .rail__head{justify-content:center;padding:2px 0 8px}
  .rail__item{grid-template-columns:1fr;justify-items:center;padding:8px 0}
  .rail__title,.rail__label,.rail__count{display:none}
}
@media(max-width:1000px){.shell__brand{display:flex}}
@media(max-width:700px){
  :root{--tile-size:56px;--tile-gap-x:14px;--tile-gap-y:16px}
  .page{padding-bottom:48px}
  .shell,.shell.is-collapsed,.shell--norail{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .shell__brand{display:flex}
  .shell__content{padding-top:0}
  .chipbar{display:flex;position:sticky;top:0;z-index:20;margin:0 0 14px;padding:8px 0;
    background:color-mix(in srgb,var(--bg-base) 60%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tile{width:100%}
  .clock{padding-top:10px}
  .clock__time{font-size:1.5rem}
  .clock__date{font-size:.78rem}
  .search{margin:10px auto 20px}
  .search__box{padding:5px}
  .search__engine{max-width:92px;font-size:.8rem}
  .search__input{font-size:.9rem}
  .category{margin-bottom:22px}
  .category__title{font-size:.94rem}
  .brand{font-size:.96rem}
  .brand__title{display:none}
  .layout-switch__label{display:none}
  .layout-switch__item{padding:0 7px}
  .theme-picker__select{padding:0 4px;font-size:.78rem}
  .header-actions{gap:6px}
  .header-actions .btn--sm{padding:0 9px}
    .tabs{margin-bottom:14px}
  .tabs__item{min-height:34px;padding:0 11px;font-size:.82rem}
  .modal{max-height:calc(100vh - 20px);border-radius:18px}
}
@media(max-width:380px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clock__time{font-size:1.35rem}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}

/* ---------- 雾蓝加雾：更朦胧的雾气 + 更强的液态玻璃（仅 mist，池塘/墨金不动） ---------- */
/* 雾底变量已在上方 [data-theme=mist] 块里改成淡蓝白雾底 #e6f0fd + 更透的玻璃面；文字仍是深蓝，照样清晰 */
[data-theme=mist] body{
  background-color:#e6f0fd;
  background-image:
    radial-gradient(ellipse 900px 560px at 82% -10%,rgba(255,255,255,.85),transparent 65%),
    radial-gradient(ellipse 820px 520px at 8% 108%,rgba(190,214,250,.55),transparent 62%),
    radial-gradient(ellipse 640px 380px at 50% 46%,rgba(255,255,255,.5),transparent 70%),
    linear-gradient(160deg,#eef4fe 0%,#e2edfd 48%,#d8e6fb 78%,#d2e0f9 100%);
}
/* 漂移的雾层：三团大而软的雾在页面后方缓慢流动，纯 CSS，几乎不耗性能 */
[data-theme=mist] body::before{
  content:"";position:fixed;inset:-6% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 560px 300px at 22% 30%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(ellipse 640px 340px at 78% 68%,rgba(203,222,250,.6),transparent 70%),
    radial-gradient(ellipse 420px 240px at 55% 12%,rgba(255,255,255,.55),transparent 70%);
  filter:blur(6px);
  animation:mistDrift 70s ease-in-out infinite alternate;
}
[data-theme=mist] body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 700px 420px at 50% 118%,rgba(255,255,255,.5),transparent 65%);
}
@keyframes mistDrift{from{transform:translate3d(-3%,1%,0)}to{transform:translate3d(3%,-2%,0)}}
[data-theme=mist] #app{position:relative;z-index:1}
/* 雾蓝液态玻璃加强：更透、更糊、顶部高光更亮 */
[data-theme=mist] .shell__topbar{backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);background:color-mix(in srgb,#e6f0fd 45%,transparent)}
[data-theme=mist] .rail{backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%)}
[data-theme=mist] .search__box{backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.12),0 20px 52px rgba(29,78,216,.16)}
[data-theme=mist] .tile__icon{backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.15),inset 1px 0 0 rgba(255,255,255,.2),0 6px 18px rgba(29,78,216,.14)}
[data-theme=mist] .tile__label{text-shadow:0 1px 10px rgba(255,255,255,.95),0 1px 3px rgba(255,255,255,.8)}
[data-theme=mist] .clock__time{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}
[data-theme=mist] .modal{background:rgba(255,255,255,.66);backdrop-filter:blur(32px) saturate(190%);-webkit-backdrop-filter:blur(32px) saturate(190%)}
[data-theme=mist] .layout-switch,[data-theme=mist] .theme-picker__select,[data-theme=mist] .btn,
[data-theme=mist] .ai-hero__item,[data-theme=mist] .chipbar__item,[data-theme=mist] .tabs__item,
[data-theme=mist] .category__icon,[data-theme=mist] .badge{
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),var(--shadow-soft)}
/* 减弱动效时雾层静止不动 */
@media(prefers-reduced-motion:reduce){[data-theme=mist] body::before{animation:none}}