/* 谐波AI 控制台 · 灵动岛皮肤 2026-10-27
   只做「加层」，不覆盖 new-api 既有布局；出问题删 nginx 注入即可整体失效 */

:root{
  --island-bg:rgba(14,11,24,.72);
  --island-line:rgba(255,255,255,.12);
  --island-txt:#eae6f6;
  --island-dim:#9b93b6;
  --island-hi:#c084fc;
}

/* ===== 页面底色：极光渐变（只改背景，不动任何布局） ===== */
html.island-skin body{
  background-image:
    radial-gradient(ellipse 70% 45% at 12% -5%,rgba(124,58,237,.20),transparent 62%),
    radial-gradient(ellipse 55% 40% at 92% 8%,rgba(190,24,93,.12),transparent 62%),
    radial-gradient(ellipse 60% 45% at 50% 108%,rgba(59,7,100,.22),transparent 66%)!important;
  background-attachment:fixed!important;
}

/* 细滚动条 */
html.island-skin ::-webkit-scrollbar{width:9px;height:9px}
html.island-skin ::-webkit-scrollbar-thumb{background:rgba(192,132,252,.28);border-radius:9px}
html.island-skin ::-webkit-scrollbar-thumb:hover{background:rgba(192,132,252,.5)}
html.island-skin ::-webkit-scrollbar-track{background:transparent}

/* ===== 灵动岛 ===== */
#hb-island{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  z-index:2147483000;
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:40px;width:158px;padding:0 16px;
  box-sizing:border-box;overflow:hidden;
  background:var(--island-bg);
  border:1px solid var(--island-line);
  border-radius:999px;
  color:var(--island-txt);
  font:600 13px/1 -apple-system,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;user-select:none;
  transition:width .42s cubic-bezier(.34,1.3,.4,1),height .42s cubic-bezier(.34,1.3,.4,1),
             border-radius .42s ease,padding .42s ease,box-shadow .3s;
}
#hb-island:hover{box-shadow:0 14px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16)}
#hb-island.hb-open{
  width:min(580px,94vw);height:auto;padding:14px;border-radius:22px;
  display:block;cursor:default;
}

/* 收起态 */
.hb-mini{display:flex;align-items:center;gap:9px;white-space:nowrap}
.hb-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:hbPulse 2.4s infinite}
@keyframes hbPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.hb-mini .hb-word{
  background:linear-gradient(92deg,#f3e8ff,#c084fc 55%,#fb7185);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.5px;font-weight:800;
}
#hb-island.hb-open .hb-mini{display:none}

/* 展开态 */
.hb-full{display:none}
#hb-island.hb-open .hb-full{display:block;animation:hbIn .34s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes hbIn{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.hb-head{display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 10px;color:var(--island-dim);font-size:12px;letter-spacing:.4px}
.hb-head b{color:var(--island-txt);font-size:13px;letter-spacing:1px}
.hb-head .hb-x{color:var(--island-dim);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;
  border-radius:8px;transition:.2s}
.hb-head .hb-x:hover{color:#fb7185}
.hb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hb-item{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px;border-radius:14px;text-decoration:none;color:var(--island-dim);
  font-size:12px;font-weight:600;background:rgba(255,255,255,.04);
  border:1px solid transparent;transition:.22s;white-space:nowrap}
/* 矢量图标（内联 SVG，跟随 currentColor，高亮时自动变深色） */
.hb-item svg{width:18px;height:18px;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hb-head .hb-x svg{width:13px;height:13px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hb-item:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}
.hb-item.hb-on{color:#0a0714;background:linear-gradient(92deg,#c084fc,#f472b6);
  box-shadow:0 6px 18px rgba(192,132,252,.35)}
.hb-item.hb-on:hover{transform:none;color:#0a0714}

/* 移动端：贴顶细条，不挡内容 */
@media (max-width:768px){
  #hb-island{top:8px;height:32px;width:auto;min-width:118px;padding:0 12px;font-size:12px}
  #hb-island.hb-open{width:calc(100vw - 20px);padding:12px;border-radius:18px}
  .hb-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .hb-item{padding:8px 2px;font-size:11px}
  .hb-item svg{width:16px;height:16px}
}