/* ============================================================
   lw_quickref.css — 功能速查面板（全站通用组件）
   复用 V1 token：--lw-glass-strong rgba(255,255,255,.72) +
   --lw-blur blur(12px) + --lw-line-soft 细边框 + --lw-shadow-soft 柔和投影
   层级：悬浮 ? 圆钮 z-index:280（低于顶栏 320）；面板 z-index:3800
   ============================================================ */

/* 隐藏旧版右下角白色 ? 钮（g4_hotkey.js 注入），由本组件毛玻璃圆钮接管 */
#g4HelpBtn { display: none !important; }

/* —— 悬浮 ? 毛玻璃圆钮（右下角，z-index 低于顶栏 320）—— */
#lwQrFab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  z-index: 280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--lw-color-primary-deep, #0284C7);
  background: var(--lw-glass-strong, rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: var(--lw-blur, blur(12px));
  backdrop-filter: var(--lw-blur, blur(12px));
  border: 1px solid var(--lw-line-soft, rgba(15, 23, 42, .08));
  box-shadow: var(--lw-shadow-soft, 0 1px 2px rgba(15, 23, 42, .05)),
              0 6px 18px rgba(56, 189, 248, .16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
  font-family: inherit;
}
#lwQrFab:hover {
  transform: scale(1.08);
  color: #fff;
  background: var(--lw-color-primary, #38BDF8);
  box-shadow: 0 8px 22px rgba(56, 189, 248, .38);
}
#lwQrFab.lw-qr-open { color: #fff; background: var(--lw-color-primary, #38BDF8); }

/* —— 面板遮罩 —— */
.lw-qr-mask {
  position: fixed;
  inset: 0;
  z-index: 3799;
  background: rgba(15, 23, 42, .22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lwQrFade .16s ease;
}
@keyframes lwQrFade { from { opacity: 0; } to { opacity: 1; } }

/* —— 毛玻璃卡片 —— */
.lw-qr-card {
  width: 700px;
  max-width: 94vw;
  height: 580px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--lw-glass-strong, rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: var(--lw-blur, blur(12px));
  backdrop-filter: var(--lw-blur, blur(12px));
  border: 1px solid var(--lw-line-soft, rgba(15, 23, 42, .08));
  border-radius: var(--lw-radius-lg, 14px);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
  overflow: hidden;
  color: var(--lw-color-ink, #0F172A);
  font-size: var(--lw-font-base, 13.5px);
  animation: lwQrPop .18s ease;
}
@keyframes lwQrPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* —— 头部：标题 + 搜索框 + 关闭 —— */
.lw-qr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--lw-line-soft, rgba(15, 23, 42, .08));
}
.lw-qr-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--lw-color-title, #0F172A);
  white-space: nowrap;
}
.lw-qr-search {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--lw-line-strong, rgba(15, 23, 42, .16));
  border-radius: var(--lw-radius-md, 10px);
  background: var(--lw-input-bg, #F8FAFD);
  font-size: 13px;
  outline: none;
  color: var(--lw-color-ink, #0F172A);
}
.lw-qr-search:focus { border-color: var(--lw-color-primary, #38BDF8); }
.lw-qr-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--lw-line-soft, rgba(15, 23, 42, .08));
  background: transparent;
  color: var(--lw-color-sub, #64748B);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex: none;
}
.lw-qr-close:hover { background: rgba(15,23,42,.06); }

/* —— 页签行 —— */
.lw-qr-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.lw-qr-tabs::-webkit-scrollbar { display: none; }
.lw-qr-tab {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--lw-radius-sm, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--lw-color-sub, #64748B);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.lw-qr-tab:hover { background: rgba(56, 189, 248, .10); color: var(--lw-color-primary-deep, #0284C7); }
.lw-qr-tab.lw-active {
  background: rgba(56, 189, 248, .16);
  color: var(--lw-color-primary-deep, #0284C7);
  border-color: rgba(56, 189, 248, .30);
  font-weight: 600;
}

/* —— 内容区（两列：左=名+说明，右=快捷键）—— */
.lw-qr-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
}
.lw-qr-group {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lw-color-primary-deep, #0284C7);
  margin: 12px 0 6px;
  letter-spacing: .02em;
}
.lw-qr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--lw-radius-sm, 8px);
}
.lw-qr-row:nth-child(even) { background: rgba(15, 23, 42, .025); }
.lw-qr-row:hover { background: rgba(56, 189, 248, .08); }
.lw-qr-row-main { flex: 1; min-width: 0; }
.lw-qr-row-name {
  font-weight: 600;
  color: var(--lw-color-ink, #0F172A);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lw-qr-row-desc {
  font-size: 12px;
  color: var(--lw-color-sub, #64748B);
  margin-top: 2px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lw-qr-row-desc .lw-qr-tbd {
  color: #B45309;
  font-weight: 600;
}
/* 右侧快捷键胶囊：不换行，长词不溢出卡片 */
.lw-qr-kbd {
  flex: none;
  min-width: 64px;
  max-width: 150px;
  padding: 4px 9px;
  text-align: center;
  border: 1px solid var(--lw-line-strong, rgba(15, 23, 42, .16));
  border-radius: 7px;
  background: #F4F9FF;
  color: #3E5F8A;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lw-qr-empty {
  padding: 28px 10px;
  text-align: center;
  color: var(--lw-color-faint, #94A3B8);
  font-size: 13px;
}

/* 小屏：面板撑满 */
@media (max-width: 720px) {
  .lw-qr-card { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  #lwQrFab { right: 16px; bottom: 16px; }
}