/* ============================================================
   匡匡小工具悬浮面板 kk-tools.css v2.1.1(主页左侧)
   ------------------------------------------------
   引入:<link rel="stylesheet" href="kk-tools.css">
   配合:kk-tools.js 使用。

   v2.1.0:
   - 按钮图标:洛天依「拥抱」动态 GIF,圆形裁剪 + multiply 混合去白底(透明感);
   - 按钮上方:「匡匡小工具」文字标签;
   - 打开面板:遮罩全页面模糊(backdrop-filter blur)。
   ============================================================ */

#kk-tools-wrap{
  position:fixed;left:16px;top:50%;transform:translateY(-50%);
  z-index:99998;display:flex;flex-direction:column;align-items:flex-start;
}

/* ---- v2.1.0 按钮上方文字标签 ---- */
#kk-tools-label{
  margin-bottom:8px;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;color:#1b6ea8;letter-spacing:2px;
  background:rgba(220,238,255,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(70,140,220,.3);
  pointer-events:none;user-select:none;-webkit-user-select:none;
  white-space:nowrap;
}

/* ---- 按钮(动态 GIF 图标) ---- */
#kk-tools-btn{
  width:58px;height:58px;border-radius:16px;cursor:pointer;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(173,216,255,.6) 0%,rgba(135,192,255,.6) 100%);
  backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 4px 16px rgba(70,140,220,.4), inset 0 0 0 2px rgba(255,255,255,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  user-select:none;-webkit-user-select:none;
}
#kk-tools-btn:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(70,140,220,.55), inset 0 0 0 2px rgba(255,255,255,.5);}
/* 动态 GIF(透明背景):铺满圆形按钮,保持原色,轻投影提升辨识度 */
#kk-tools-btn img.kk-ico{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:drop-shadow(0 2px 3px rgba(70,140,220,.3));
}
#kk-tools-btn img.kk-ico:hover{filter:brightness(1.06) drop-shadow(0 2px 3px rgba(70,140,220,.3));}

#kk-tools-mask{
  position:fixed;inset:0;z-index:99997;background:rgba(30,70,130,.28);
  opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s;
}
/* v2.1.0:打开时全页面模糊 */
#kk-tools-mask.show{
  opacity:1;visibility:visible;
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
}
#kk-tools-panel{
  margin-top:12px;width:230px;padding:12px;
  background:linear-gradient(160deg,rgba(185,220,255,.72) 0%,rgba(150,200,255,.72) 100%);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);border-radius:16px;
  box-shadow:0 10px 30px rgba(70,140,220,.35);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  max-height:70vh;overflow-y:auto;
}
#kk-tools-wrap.open #kk-tools-panel{opacity:1;visibility:visible;transform:translateY(0);}
#kk-tools-title{
  font-size:13px;font-weight:700;color:#1b6ea8;letter-spacing:1.5px;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
#kk-tools-title::after{content:'';flex:1;height:1px;background:rgba(27,110,168,.3);}
.kk-tool-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;
  text-decoration:none;color:#14507e;transition:background .2s ease;margin-bottom:3px;
}
.kk-tool-item:last-child{margin-bottom:0;}
.kk-tool-item:hover{background:rgba(255,255,255,.55);}
.kk-tool-ico{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;background:rgba(255,255,255,.65);border:1px solid rgba(27,110,168,.2);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.9);
}
.kk-tool-name{font-size:13.5px;font-weight:600;line-height:1.2;}
.kk-tool-desc{font-size:11px;color:#2a6ea8;margin-top:1px;line-height:1.2;}

/* 手机端:底部抽屉式,不遮挡内容 */
@media (max-width:767px){
  #kk-tools-wrap{left:10px;top:auto;bottom:110px;transform:none;align-items:flex-start;}
  #kk-tools-label{font-size:11px;padding:4px 10px;letter-spacing:1.5px;margin-bottom:6px;}
  #kk-tools-btn{width:50px;height:50px;border-width:2px;border-radius:13px;}
  #kk-tools-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;margin:0;
    max-height:46vh;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    background:linear-gradient(180deg,rgba(200,228,255,.95) 0%,rgba(160,205,255,.95) 100%);
    box-shadow:0 -8px 30px rgba(70,140,220,.4);
  }
  #kk-tools-panel::before{
    content:'';display:block;width:44px;height:5px;border-radius:3px;
    background:rgba(27,110,168,.35);margin:0 auto 12px;
  }
  #kk-tools-wrap.open #kk-tools-panel{transform:translateY(0);}
}