:root{
  --at-green:#7bb56a;
  --at-bg:#efe5cf;

  --at-glass: rgba(255,255,255,.70);
  --at-glass2: rgba(255,255,255,.52);
  --at-border: rgba(58,43,27,.10);

  --at-text:#3a2b1b;
  --at-muted:#9a8a76;

  --at-accent:#7bb56a;
  --at-accent2:#b98cff; /* 二次元紫 */
}

/* ✅ 新增：统一用变量控制“整体上下位置” */
:root{
  --tabbar-offset: 2px; /* 原来是 12px，数值越小越靠下 */
}

.anime-tabbar{
  position: fixed;
  left: 14px;
  right: 14px;

  /* ✅ 核心：整体上下就调这个 */
  bottom: calc(var(--tabbar-offset) + env(safe-area-inset-bottom));

  z-index: 9999;

  display:flex;
  gap:10px;
  padding: 10px 10px;

  border-radius: 18px;
  background: linear-gradient(180deg, var(--at-glass) 0%, var(--at-glass2) 100%);
  border: 1px solid var(--at-border);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.anime-tabbar::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  padding:1px;
  background: linear-gradient(135deg,
    rgba(185,140,255,.55),
    rgba(123,181,106,.55),
    rgba(255,214,140,.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.anime-tab{
  flex:1;
  min-width:0;
  text-decoration:none;
  color: var(--at-muted);
  user-select:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding: 10px 6px;
  border-radius: 14px;

  transition: transform .15s ease, background .15s ease;
}

.anime-tab:active{
  transform: scale(.98);
}

.anime-ico{
  width:30px;height:30px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(58,43,27,.08);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);

  font-size: 18px;
  line-height: 1;
}

.anime-txt{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.anime-tab.active{
  color: var(--at-text);
  background: rgba(123,181,106,.12);
}

.anime-tab.active .anime-ico{
  background: linear-gradient(135deg, rgba(185,140,255,.35), rgba(123,181,106,.35));
  border-color: rgba(123,181,106,.25);
  box-shadow: 0 10px 18px rgba(123,181,106,.18);
}

.anime-tab.active .anime-txt{
  color: var(--at-accent);
}

/* ✅ 给页面底部留出空间，避免被tab遮住（同步减一点） */
body.has-anime-tabbar{
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}