:root{
  --text:#fff;
  --glass:rgba(255,255,255,.10);
  --glass-strong:rgba(255,255,255,.18);
  --mask:rgba(15,23,42,.45);
  --accent:#2563eb;
  --radius:16px;
  --blur:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  min-height:100vh;
  background:#1e293b;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* ---------- 背景层 ---------- */
.bg-layer{
  position:fixed;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,#1e3a8a,#0f172a);
  transform:scale(1.04);
  opacity:1;transition:opacity .9s ease, background-image .9s ease;
}
.bg-layer.fading{opacity:0;}
.bg-mask{
  position:fixed;inset:0;z-index:-1;
  background:#0f172a;
}
/* ---------- 顶部栏 ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:18px 24px;font-size:14px;gap:12px;
}
.topbar-left{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.chip{
  display:flex;gap:6px;align-items:center;
  background:var(--glass);backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.18);
  padding:7px 13px;border-radius:22px;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.clock-time{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;}
.clock-date{font-size:12px;opacity:.85;}
.weather{cursor:pointer;}
.weather-ext{display:block;font-size:11px;opacity:.8;margin-top:2px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
/* 时间模块位置：topbar-pos-* 修饰 header 本身。
   注意不能复用 .topbar-left/.topbar-right 这两个内部容器类名，否则 header 会
   误命中子元素样式（曾导致后台「位置」设置无效）。
   ⚠️ right 不能用 flex-direction:row-reverse——那会把用户菜单挤到最左边，
   其下拉菜单(right:0 向左展开)会悬出视口左缘被 overflow-x:hidden 裁掉半边。 */
.topbar.topbar-pos-right{justify-content:flex-end;}  /* 时间+登录整体靠右，时间紧挨头像左侧 */
.topbar.topbar-pos-center{position:relative;justify-content:flex-end;} /* 时间绝对居中，登录区仍靠右 */
.topbar.topbar-pos-center .topbar-left{position:absolute;left:50%;transform:translateX(-50%);}
.user-menu{
  position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding-bottom:6px;   /* 预留 hover 通道，见下方 dropdown 的 padding-top 桥接说明 */
}
.user-menu .avatar{width:34px;height:34px;border-radius:50%;border:2px solid #fff;object-fit:cover;}
.user-menu .nick{font-size:13px;}
.user-menu .caret{font-size:10px;opacity:.7;transition:transform .2s;}
.user-menu.open .caret{transform:rotate(180deg);}
/*
 * 下拉菜单：用 padding-top 做「hover 桥接」。
 * 绝对定位元素与其父级之间的空隙会让指针在移动途中短暂脱离 :hover，
 * 导致菜单闪退。padding 属于元素自身盒子，因此这段间隙仍在 hover 区域内；
 * 实际白底交给内层 .dd-inner 绘制。
 */
.user-menu .dropdown{
  display:none;position:absolute;right:0;top:100%;
  margin-top:6px;padding-top:6px;          /* 视觉间隙 + hover 桥接 */
  background:transparent;box-shadow:none;min-width:158px;
  z-index:30;overflow:visible;
}
.user-menu:hover .dropdown,
.user-menu.open .dropdown{display:block;}
.user-menu .dropdown .dd-inner{
  background:#fff;color:#222;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.05);
  animation:ddIn .16s ease-out;
}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.user-menu .dropdown a{
  display:block;padding:11px 16px;text-decoration:none;color:#222;font-size:14px;
  transition:background .12s;
}
.user-menu .dropdown a:hover{background:#f1f5f9;}
.user-menu .dropdown a.danger{color:#dc2626;}
.user-menu .dropdown a.danger:hover{background:#fef2f2;}
.user-menu .dropdown .dd-sep{height:1px;background:#f1f5f9;margin:4px 0;}
.btn-login{
  display:inline-block;padding:8px 18px;background:var(--accent);
  border-radius:22px;text-decoration:none;color:#fff;font-size:14px;
  box-shadow:0 4px 14px rgba(37,99,235,.4);transition:transform .15s,box-shadow .15s;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.55);}
.btn-register{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none;}
.btn-register:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(37,99,235,.25);}
.wx-tip{font-size:12px;opacity:.7;}
/* ---------- 主区 ---------- */
.hero{display:flex;flex-direction:column;align-items:center;padding:7vh 16px 4vh;text-align:center;}
.hero-title{
  font-size:clamp(30px,5.4vw,52px);font-weight:800;letter-spacing:1px;
  text-shadow:0 3px 16px rgba(0,0,0,.45);
  animation:fadeUp .8s ease both;
}
.hero-quote{
  margin-top:14px;font-size:16px;opacity:.92;font-style:italic;
  animation:fadeUp 1s ease .15s both;
}
.hero-sub{
  margin-top:12px;font-size:15px;opacity:.78;letter-spacing:.5px;
  animation:fadeUp .9s ease .1s both;
}
.quote-by{opacity:.7;font-size:14px;margin-left:6px;font-style:normal;}
/* 引擎切换 */
.engine-bar{
  display:flex;gap:10px;margin-top:28px;max-width:92vw;overflow-x:auto;
  padding:6px;scrollbar-width:none;
}
.engine-bar::-webkit-scrollbar{display:none;}
.engine-btn{
  position:relative;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:9px 17px;border:1px solid rgba(255,255,255,.25);border-radius:24px;
  background:var(--glass);
  color:#fff;cursor:pointer;font-size:14px;
  /* 注意：这里不能加 backdrop-filter！引擎栏是 overflow-x:auto 滚动容器，
     Chromium 会把其中 backdrop-filter 的模糊区域渲染成不跟随圆角的矩形，
     在照片背景上会露出一块硬边"方框"。半透明底色 + 描边已足够玻璃感。 */
  /* 缓动统一拉长 + 弹性曲线，激活/悬停的底色与光晕过渡不再生硬 */
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.engine-btn img{width:18px;height:18px;border-radius:4px;}
.engine-btn:hover{transform:translateY(-2px);background:var(--glass-strong);}
/* 激活态光晕：双层大模糊低透明，边缘衰减柔和，不再出现硬边光圈 */
.engine-btn.active{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 3px 8px rgba(37,99,235,.22),0 8px 26px rgba(37,99,235,.3);
}
/* 搜索框 */
.search-box{width:min(660px,92vw);margin-top:20px;animation:fadeUp 1s ease .25s both;}
.search-tabs{display:flex;gap:16px;justify-content:center;margin-bottom:12px;font-size:14px;}
.search-tabs .tab{cursor:pointer;opacity:.85;}
.search-tabs .tab input{vertical-align:-1px;margin-right:3px;}
.search-row{
  display:flex;background:#fff;border-radius:32px;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,0,0,.3);transition:box-shadow .2s,transform .2s;
}
.search-row:focus-within{box-shadow:0 10px 40px rgba(37,99,235,.45);transform:translateY(-1px);}
.search-row input{flex:1;border:0;outline:none;padding:15px 22px;font-size:16px;color:#111;}
.search-row button{
  border:0;background:var(--accent);color:#fff;padding:0 30px;font-size:16px;cursor:pointer;
  transition:background .2s;
}
.search-row button:hover{background:#1d4ed8;}
/* 搜索历史下拉 */
.history{
  position:absolute;left:0;right:0;top:100%;margin-top:8px;z-index:30;
  background:#fff;color:#222;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.3);text-align:left;display:none;
}
.history.show{display:block;}
.history .h-item{padding:10px 18px;cursor:pointer;font-size:14px;border-bottom:1px solid #f1f5f9;}
.history .h-item:last-child{border-bottom:0;}
.history .h-item:hover{background:#f1f5f9;}
.search-wrap{position:relative;width:100%;}
/* ---------- 导航区 ---------- */
.nav-section{max-width:1100px;margin:0 auto;padding:20px 16px 50px;}
.nav-zone-title{
  font-size:17px;font-weight:600;margin:34px 0 16px;padding-left:12px;
  border-left:3px solid var(--accent);line-height:1.2;letter-spacing:.5px;
}
.nav-section > .nav-zone-title:first-child{margin-top:10px;}
.nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;align-items:start;}

/* 卡片：降低饱和、去掉重阴影，靠层次而非浮夸效果取胜 */
.nav-card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:16px 8px 14px 18px;
  transition:transform .18s,background .2s,border-color .2s,box-shadow .2s;
}
.nav-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
/* 分类标题：与网址列表拉开层次 */
.nav-card h3{
  font-size:15px;font-weight:600;margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.nav-card ul{list-style:none;margin:0;padding:0;}
.nav-card li{
  margin:0;display:flex;align-items:center;justify-content:space-between;gap:6px;
  border-radius:8px;transition:background .15s;
}
.nav-card li:hover{background:rgba(255,255,255,.09);}
/* 网址链接：单行省略，绝不因图标/长文本挤压换行 */
.nav-card a{
  flex:1;min-width:0;color:rgba(255,255,255,.9);text-decoration:none;
  font-size:14px;line-height:1.5;padding:7px 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:8px;
  display:block;transition:color .15s,background .15s;
}
.nav-card a:hover{color:#fff;background:rgba(37,99,235,.45);text-decoration:none;}
.nav-card.empty,.nav-empty-li{opacity:.55;font-size:13px;padding:6px 8px;}
/* 删除按钮：平时低调，悬停行内才醒目 */
.del{
  flex-shrink:0;border:0;background:transparent;color:rgba(255,255,255,.35);
  cursor:pointer;font-size:17px;line-height:1;padding:4px 8px;border-radius:6px;
  opacity:0;display:none;transition:opacity .15s,color .15s,background .15s;
}
.nav-card li:hover .del{opacity:1;}
.del:hover{color:#fff;background:rgba(239,68,68,.85);}
.foot{text-align:center;padding:22px;font-size:13px;opacity:.55;}
/* ---------- 访客公网IP 板块（单行胶囊，居中悬挂在搜索框下方） ---------- */
.sysinfo{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:fit-content;max-width:92vw;margin:0 auto 12px;padding:10px 22px;
  background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.12);border-radius:22px;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  animation:fadeUp 1s ease .3s both;
}
.sysinfo-label{opacity:.8;font-size:13px;letter-spacing:1px;}
.sysinfo-value{
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;
  word-break:break-all;line-height:1.35;
}
/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .topbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px;}
  .topbar-right{justify-content:flex-end;}
  /* 窄屏纵向堆叠时，center 的绝对居中让路 */
  .topbar.topbar-pos-center .topbar-left{position:static;transform:none;}
  .weather .weather-ext{display:none;}
  .weather.expanded .weather-ext{display:block;}
  .hero{padding-top:3vh;}
  .hero-title{font-size:clamp(26px,8vw,38px);}
  .hero-quote{font-size:14px;}
  .search-row button{padding:0 20px;}
  .nav-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .sysinfo{padding:8px 16px;font-size:14px;}
}
@media (max-width:380px){
  .hero-quote{display:none;}
  .clock-date{display:none;}
}
/* ---------- 后台管理 ---------- */
.admin-body{background:#eef2f7;color:#1e293b;}
.admin{display:flex;min-height:100vh;}
.admin-side{width:210px;background:#0f172a;color:#cbd5e1;padding:20px 0;flex-shrink:0;}
.admin-logo{color:#fff;font-size:18px;font-weight:700;padding:0 20px 18px;line-height:1.3;}
.admin-logo small{font-size:12px;opacity:.6;font-weight:400;}
.admin-side nav a{display:block;color:#cbd5e1;padding:11px 20px;text-decoration:none;font-size:14px;border-left:3px solid transparent;}
.admin-side nav a:hover{background:#1e293b;color:#fff;}
.admin-side nav a.active{background:#1e293b;color:#fff;border-left-color:#2563eb;}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:#fff;border-bottom:1px solid #e2e8f0;font-size:14px;}
.admin-content{padding:24px;overflow:auto;}
.btn-sm{padding:6px 14px;background:#2563eb;color:#fff;border-radius:8px;text-decoration:none;font-size:13px;}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05);margin-bottom:20px;}
.card h3{margin:0 0 16px;font-size:16px;border-left:4px solid #2563eb;padding-left:10px;}
.form-row{display:flex;flex-wrap:wrap;gap:18px;}
.field{margin-bottom:14px;flex:1;min-width:220px;}
.field label{display:block;font-size:13px;color:#475569;margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;box-sizing:border-box;background:#fff;}
.field input[type=checkbox]{width:auto;transform:scale(1.2);margin-right:6px;vertical-align:-2px;}
.field .hint{font-size:12px;color:#94a3b8;margin-top:4px;}
.btn-primary{padding:10px 22px;background:#2563eb;color:#fff;border:0;border-radius:8px;cursor:pointer;font-size:14px;}
.btn-primary:hover{background:#1d4ed8;}
.btn-danger{padding:5px 12px;background:#ef4444;color:#fff;border:0;border-radius:6px;cursor:pointer;font-size:12px;text-decoration:none;}
.btn-edit{padding:5px 12px;background:#0ea5e9;color:#fff;border:0;border-radius:6px;cursor:pointer;font-size:12px;text-decoration:none;}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;margin-top:6px;}
table.tbl th,table.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid #e2e8f0;font-size:14px;}
table.tbl th{background:#f8fafc;color:#475569;font-weight:600;}
table.tbl tr:hover td{background:#f8fafc;}
.muted{color:#94a3b8;font-size:12px;}
.ok-msg{background:#dcfce7;color:#166534;padding:10px 14px;border-radius:8px;margin-bottom:14px;}
.err-msg{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:8px;margin-bottom:14px;}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.mod-grid .m{background:#fff;border-radius:10px;padding:18px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.mod-grid .m a{color:#2563eb;text-decoration:none;font-weight:600;}
@media (max-width:720px){.admin-side{width:140px;}.admin-side nav a{padding:10px 12px;font-size:13px;}}
/* 我的导航：工具条与表单（卡片/链接/删除按钮样式已统一在上面「导航区」维护，此处不再重复定义） */
.nav-zone-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.nav-zone-btns{display:none;gap:8px;flex-wrap:wrap;margin-left:auto;}
.btn-add{padding:6px 14px;background:#2563eb;color:#fff;border:0;border-radius:8px;cursor:pointer;font-size:13px;transition:background .15s;}
.btn-add:hover{background:#1d4ed8;}
.btn-add-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);}
.btn-add-ghost:hover{background:rgba(255,255,255,.16);}

.cat-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-ops{display:none;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s;}
.my-nav-card:hover .cat-ops{opacity:1;}
.cat-op{
  border:0;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;
  font-size:13px;line-height:1;padding:4px 6px;border-radius:6px;transition:all .15s;
}
.cat-op:hover{color:#fff;background:rgba(255,255,255,.2);}
.cat-op-danger:hover{background:rgba(239,68,68,.85);color:#fff;}

/* 站内搜索结果栏（index.php?q=关键词） */
.search-result-bar{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  width:fit-content;max-width:92vw;margin:0 auto 14px;padding:8px 18px;
  background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.12);border-radius:20px;font-size:13px;
}
.search-result-bar b{font-weight:700;}
.search-result-bar .sr-clear{
  color:#fff;text-decoration:none;padding:3px 12px;border-radius:14px;
  background:rgba(255,255,255,.16);transition:background .15s;
}
.search-result-bar .sr-clear:hover{background:rgba(255,255,255,.32);}

/* 编辑首页：默认只读，仅在 body.edit-mode（点了「编辑首页」）时才显示增删改控件，避免误触删除 */
body.edit-mode .nav-zone-btns{display:flex;}
body.edit-mode .my-nav-card .cat-ops{display:flex;opacity:1;}
body.edit-mode .my-nav-card .del{display:inline-flex;opacity:1;}
body.edit-mode .nav-card li:hover .del{opacity:1;}

/* 用户菜单里的「编辑首页」切换项（与 .dropdown a 同款样式） */
.user-menu .dropdown .dd-item{
  display:block;width:100%;text-align:left;background:none;border:0;font-family:inherit;
  cursor:pointer;padding:11px 16px;color:#222;font-size:14px;transition:background .12s;
}
.user-menu .dropdown .dd-item:hover{background:#f1f5f9;}
.user-menu .dropdown .dd-item.is-on{color:#2563eb;font-weight:600;}

/* 「我的导航」标题旁的「编辑中」徽标 */
.edit-badge{
  display:none;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:#fff;background:rgba(37,99,235,.78);padding:3px 11px;border-radius:12px;
}
body.edit-mode .edit-badge{display:inline-flex;}

.my-nav-form{
  background:rgba(255,255,255,.96);color:#222;padding:14px;border-radius:12px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.my-nav-form input,.my-nav-form select{
  padding:8px 10px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;background:#fff;
}
.my-nav-form input{min-width:170px;}
.my-nav-form select{min-width:150px;}
.my-nav-form button{padding:8px 14px;border:0;border-radius:8px;background:#2563eb;color:#fff;cursor:pointer;font-size:14px;}
.my-nav-form button[type=button]{background:#94a3b8;}
.my-nav-form button:hover{filter:brightness(1.08);}
.nav-empty-li{opacity:.55;font-size:13px;}
/* 搜索引擎图标：首字母兜底（图标加载失败时露出，不出现破图） */
.engine-ico{display:none;}
.engine-btn:not(.has-ico) .engine-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.22);
  font-size:11px;font-weight:700;line-height:1;
}
.engine-btn.active:not(.has-ico) .engine-ico{background:rgba(255,255,255,.35);}
/* 说明：导航卡片的网址图标已按需求移除（前台不展示 icon）。
   后台抓取到的 favicon 仍会写入 nav_sites.icon 字段保留，日后想恢复展示从这里加规则即可。 */
/* 微信内置浏览器兼容 */
img{-webkit-user-drag:none;}
a{-webkit-touch-callout:none;}