html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* iframe全屏铺满 */
#main-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 悬浮书签图标 */
#bookmark-toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    cursor: pointer;
    
    color: #0d59ff; /* SVG 默认填充色会继承这个颜色 */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%; /* 圆形背景 */
    width: 50px;
    height: 50px;
    display: flex; /* 使用 flex 布局居中 SVG */
    align-items: center;
    justify-content: center;
    
    /* === 重点修改：轻微的边缘阴影 === */
    /* 参数: X轴偏移 Y轴偏移 模糊半径 扩展半径 颜色 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 
    
    transition: all 0.3s ease; /* 保持过渡效果，让旋转更平滑 */
    z-index: 9999;
    /* === 新增：防止双击选中页面文本 === */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}

/* SVG 图标的样式 */
#bookmark-toggle .bookmark-icon {
    width: 24px;
    height: 24px;
    /* 确保 SVG 自身也有过渡，这样旋转更平滑 */
    transition: transform 0.3s ease; 
}

/* 悬停/点击时的效果：倾斜旋转 */
/* 注意：这里使用 :hover，如果你需要点击后保持状态，需要配合 JavaScript */
#bookmark-toggle:hover .bookmark-icon {
    /* 倾斜（skew）和旋转（rotate）结合 */
    /* 调整角度可改变效果，例如：-10deg 逆时针倾斜 */
    transform: rotate(-15deg) skewX(0deg); 
}

/* 悬停在整个容器上时，移除原有的放大效果 */
#bookmark-toggle:hover {
    /* 移除发光和放大效果 */
    transform: none; 
}

/* 展开的书签栏 - 保持简洁，稍微调整阴影和按钮 */
#bookmark-bar {
    position: fixed;
    top: 15px;
    left: 70px;
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 25px; /* 稍微小一点的圆角 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 更扁平的阴影 */
    z-index: 9999;
}

#bookmark-bar.hidden {
    display: none;
}

#bookmark-bar button {
    border: none;
    background: #f0f0f0; /* 默认按钮背景更柔和 */
    color: #333333; /* 字体颜色更深 */
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500; /* 字体稍微细一些，更现代 */
    transition: all 0.2s ease; /* 调整过渡时间 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 给按钮也加个微弱阴影 */
}

#bookmark-bar button:hover {
    background: #0d59ff; /* 悬停时使用主色调 */
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px); /* 悬停时稍微上浮 */
}