/* ============================================================
   MyNav · iOS 液态玻璃 (Liquid Glass) 设计系统
   低饱和柔和活力配色 · 圆角柔和 · 留白充足 · 卡片分层
   轻微毛玻璃透明 · 无冗余装饰 · 交互流畅轻量化
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 柔和活力低饱和色板（浅色） */
  --lg-bg-1:#eef1fb;   /* 极浅紫蓝 */
  --lg-bg-2:#e6f3f6;   /* 极浅青 */
  --lg-bg-3:#fdeef3;   /* 极浅粉 */
  --lg-glass:rgba(255,255,255,.52);          /* 玻璃底 */
  --lg-glass-strong:rgba(255,255,255,.68);
  --lg-glass-soft:rgba(255,255,255,.38);
  --lg-border:rgba(255,255,255,.72);         /* 内描边高光 */
  --lg-border-outer:rgba(120,130,190,.14);
  --lg-text:#39415a;                          /* 深石板蓝文字 */
  --lg-text-dim:rgba(57,65,90,.55);
  --lg-accent:#6ea8fe;                        /* 主色 柔和天蓝 */
  --lg-accent-2:#a78bfa;                      /* 辅色 柔和紫 */
  --lg-accent-3:#5eead4;                      /* 点缀 柔和薄荷 */
  --lg-ink:#2b3350;
  --lg-shadow:0 8px 30px rgba(90,110,190,.10), 0 2px 8px rgba(90,110,190,.05);
  --lg-shadow-lg:0 18px 50px rgba(90,110,190,.16), 0 4px 12px rgba(90,110,190,.06);
  --lg-blur:18px;
  --lg-r:24px;                                /* 主圆角 */
  --lg-r-sm:16px;
  --lg-touch:#5b7cfa;
}
.dark{
  --lg-bg-1:#0d1226;
  --lg-bg-2:#101a2c;
  --lg-bg-3:#1a1130;
  --lg-glass:rgba(30,36,60,.45);
  --lg-glass-strong:rgba(36,43,72,.6);
  --lg-glass-soft:rgba(255,255,255,.06);
  --lg-border:rgba(255,255,255,.14);
  --lg-border-outer:rgba(255,255,255,.08);
  --lg-text:#dbe3f5;
  --lg-text-dim:rgba(219,227,245,.5);
  --lg-accent:#7fb0ff;
  --lg-accent-2:#b9a6ff;
  --lg-accent-3:#5eead4;
  --lg-ink:#eef2fb;
  --lg-shadow:0 8px 30px rgba(0,0,0,.35);
  --lg-shadow-lg:0 18px 50px rgba(0,0,0,.45);
}

/* ---------- 页面背景：柔和渐变 + 动态光斑 ---------- */
.lg-body{
  position:relative;
  background:
    radial-gradient(1200px 700px at 12% -8%, var(--lg-bg-1), transparent 60%),
    radial-gradient(1100px 760px at 108% 12%, var(--lg-bg-2), transparent 60%),
    radial-gradient(900px 900px at 50% 118%, var(--lg-bg-3), transparent 62%),
    linear-gradient(180deg,#f6f7fc,#eef1fb);
  background-attachment:fixed;
}
.dark .lg-body{ background:linear-gradient(180deg,#0c1124,#0a0f1f); background-attachment:fixed; }

/* 背景光斑 —— 玻璃下透出的柔光 */
.lg-orb{
  position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(70px); opacity:.55; will-change:transform;
}
.lg-orb{
  width:420px; height:420px; top:-90px; right:-60px;
  background:radial-gradient(circle at 40% 40%, #a5c8ff, #c4b5fd);
  animation:orbDrift 18s ease-in-out infinite alternate;
}
.lg-orb--2{
  width:360px; height:360px; bottom:-120px; left:-80px;
  background:radial-gradient(circle at 60% 40%, #b8f0e6, #ffe0f0);
  opacity:.5; animation-duration:22s; animation-delay:-6s;
}
.lg-orb--3{
  width:300px; height:300px; top:34%; left:56%;
  background:radial-gradient(circle at 50% 50%, #ffe8c7, #ffd9e8);
  opacity:.35; animation-duration:26s; animation-delay:-12s;
}
@keyframes orbDrift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-40px,30px) scale(1.06); }
  100%{ transform:translate(30px,-20px) scale(.97); }
}

/* 主内容需盖过背景光斑 */
.lg-main, footer{ position:relative; z-index:1; }
/* header 导航需高于 main（搜索下拉浮层 absolute 溢出 header 底部时不能被主内容卡片盖住） */
header.lg-glass-nav{ position:relative; z-index:40; }

/* ---------- 玻璃通用 ---------- */
.lg-glass{
  background:var(--lg-glass);
  backdrop-filter:blur(var(--lg-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(160%);
  border:1px solid var(--lg-border-outer);
  box-shadow:var(--lg-shadow);
}
.lg-glass-soft{
  background:var(--lg-glass-soft);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--lg-border-outer);
}
.dark .lg-glass, .dark .lg-glass-soft{ border:1px solid var(--lg-border-outer); }

/* ---------- 导航栏玻璃 ---------- */
.lg-glass-nav{
  background:var(--lg-glass-strong);
  backdrop-filter:blur(var(--lg-blur)) saturate(170%);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(170%);
  border-bottom:1px solid var(--lg-border);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 24px rgba(90,110,190,.06);
}
.dark .lg-glass-nav{
  background:rgba(13,18,38,.55);
  border-bottom:1px solid var(--lg-border-outer);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 6px 24px rgba(0,0,0,.2);
}

/* 隐形按钮（hover 玻璃） */
.lg-ghost{
  color:var(--lg-text);
  background:transparent; border:1px solid transparent;
  transition:background .2s, border-color .2s, transform .2s;
}
.lg-ghost:hover{
  background:var(--lg-glass-soft);
  border-color:var(--lg-border);
  transform:translateY(-1px);
}

/* ---------- 搜索框 ---------- */
.lg-searchbox{
  background:#fff !important;   /* 纯白实底，去除半透明玻璃穿透 */
  border-color:var(--lg-border);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:var(--lg-text);
  box-shadow:0 2px 10px rgba(90,110,190,.06), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:box-shadow .25s, border-color .25s, transform .2s;
}
.lg-searchbox:focus-within{
  border-color:var(--lg-accent);
  box-shadow:0 0 0 4px rgba(110,168,254,.18), 0 1px 0 rgba(255,255,255,.5) inset;
  transform:translateY(-1px);
}
.dark .lg-searchbox{ background:#1b2240 !important; }
.lg-kbd{
  background:rgba(120,130,190,.12); color:var(--lg-text-dim);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.dark .lg-kbd{ background:rgba(255,255,255,.08); }

/* ---------- 图标钮 / 主按钮 ---------- */
.lg-iconbtn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--lg-text);
  background:var(--lg-glass);
  border:1px solid var(--lg-border);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 2px 8px rgba(90,110,190,.06), 0 1px 0 rgba(255,255,255,.5) inset;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.lg-iconbtn:hover{ transform:translateY(-2px); box-shadow:var(--lg-shadow); }

.lg-btn{
  padding:9px 20px;border-radius:999px;font-size:.875rem;font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,var(--lg-accent),var(--lg-accent-2));
  box-shadow:0 4px 14px rgba(110,140,255,.35), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.lg-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(110,140,255,.45), 0 1px 0 rgba(255,255,255,.35) inset; filter:brightness(1.03); }

/* 下拉浮层（引擎/历史）—— 实底白/深，保留柔投影与圆角，避免半透明穿透 */
.lg-pop{
  background:#fff !important;
  background-color:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid rgba(120,130,190,.14) !important;
  box-shadow:0 14px 40px rgba(80,100,170,.18), 0 2px 8px rgba(80,100,170,.08) !important;
  pointer-events:auto;
}
.dark .lg-pop{
  background:#1b2240 !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2) !important;
}

/* ---------- 网站卡片（分层玻璃） ---------- */
.lg-card{
  display:block; padding:16px;
  border-radius:var(--lg-r);
  background:var(--lg-glass);
  backdrop-filter:blur(var(--lg-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(160%);
  border:1px solid var(--lg-border-outer);
  box-shadow:var(--lg-shadow), 0 1px 0 rgba(255,255,255,.6) inset;
  color:var(--lg-text);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
  will-change:transform;
}
.lg-card::after{ /* 顶部高光折射 */
  content:""; position:absolute; inset:0 0 auto 0; height:46%; border-radius:var(--lg-r) var(--lg-r) 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  pointer-events:none; opacity:.7; transition:opacity .25s;
}
.lg-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--lg-shadow-lg), 0 1px 0 rgba(255,255,255,.7) inset;
  background:var(--lg-glass-strong);
  border-color:rgba(255,255,255,.8);
}
.lg-card:hover::after{ opacity:.95; }
.dark .lg-card::after{ background:linear-gradient(180deg, rgba(255,255,255,.06), transparent); }
.dark .lg-card:hover{ border-color:var(--lg-border); }

/* favicon 容器 */
.lg-fav{
  background:var(--lg-glass-soft);
  border:1px solid var(--lg-border);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}

/* 分类图标 & 数量徽章 */
.lg-cat-ic{
  width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--lg-glass-soft); border:1px solid var(--lg-border-outer);
}
.lg-chip{
  font-size:.7rem; padding:2px 10px; border-radius:999px; font-weight:600; line-height:1.5;
  color:var(--lg-text-dim);
  background:var(--lg-glass-soft); border:1px solid var(--lg-border-outer);
}

/* 置顶角标 */
.lg-pin{
  position:absolute; top:-7px; right:-6px; z-index:2;
  padding:2px 8px; border-radius:999px; font-size:.6rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#ff9a9e,#fecfef);
  box-shadow:0 3px 10px rgba(255,120,140,.4);
  backdrop-filter:blur(4px);
}
.lg-card::after, .lg-pin{ /* 让子元素绝对定位有效 */
  z-index:1;
}
.lg-card > *{ position:relative; z-index:2; }
.lg-card .favicon-box{ position:relative; z-index:2; }

/* 卡片阴影变体 */
.lg-card-shadow{ box-shadow:var(--lg-shadow-lg); }

/* ---------- 通用按钮(后台复用) ---------- */
.lg-btn--ghost{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:12px;
  font-size:.85rem;font-weight:500;color:var(--lg-text);
  background:var(--lg-glass);border:1px solid var(--lg-border-outer);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s,background .2s,border-color .2s;
}
.lg-btn--ghost:hover{ transform:translateY(-1px); background:var(--lg-glass-strong); border-color:var(--lg-border); }

/* ---------- 后台玻璃卡片（复用至 admin 各页） ---------- */
.admin-card, .lg-admin-card{
  background:var(--lg-glass) !important;
  backdrop-filter:blur(var(--lg-blur)) saturate(160%) !important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(160%) !important;
  border:1px solid var(--lg-border-outer) !important;
  box-shadow:var(--lg-shadow), 0 1px 0 rgba(255,255,255,.5) inset !important;
  color:var(--lg-text);
}

/* ---------- 动效：入场 ---------- */
.lg-main section{ animation:rise .6s cubic-bezier(.2,.8,.2,1) both; }
.lg-main section:nth-child(2){ animation-delay:.05s; }
.lg-main section:nth-child(3){ animation-delay:.1s; }
.lg-main section:nth-child(4){ animation-delay:.15s; }
.lg-main section:nth-child(5){ animation-delay:.2s; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ============================================================
   后台（admin）专用玻璃组件
   ============================================================ */
/* 顶部导航项 */
.lg-nav-link{
  color:var(--lg-text-dim);
  background:transparent; border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.lg-nav-link:hover{
  color:var(--lg-text);
  background:var(--lg-glass-soft);
  border-color:var(--lg-border);
}
.lg-nav-active{
  color:#fff; font-weight:600;
  background:linear-gradient(135deg,var(--lg-accent),var(--lg-accent-2));
  box-shadow:0 4px 12px rgba(110,140,255,.28);
}

/* 提示条 flash */
.lg-flash{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lg-flash--ok{ background:rgba(94,234,212,.18); color:#0d9488; border:1px solid rgba(45,212,191,.35); }
.lg-flash--error{ background:rgba(253,164,175,.22); color:#e11d48; border:1px solid rgba(251,113,133,.4); }
.dark .lg-flash--ok{ color:#5eead4; }
.dark .lg-flash--error{ color:#fda4af; }

/* 主内容盖过背景 */
.admin-main-holder{ position:relative; z-index:1; }

/* 统计卡数字色保留 Tailwind，此处仅给图标钮做玻璃 */
.lg-admin-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:12px;font-size:.85rem;
  color:var(--lg-text);
  background:var(--lg-glass);border:1px solid var(--lg-border-outer);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .2s,background .2s;
}
.lg-admin-ghost:hover{ transform:translateY(-1px); background:var(--lg-glass-strong); }