/* Lucent 澄光 MorphMenu — 样式移植自 Lucent-澄光-设计系统/components/bundle.css，配合 lucent-morph.js */
.lc-ico {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lc-iconbtn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: var(--fill-control, rgba(0, 0, 0, .05));
  color: var(--ink, rgba(0, 0, 0, .9));
  cursor: pointer;
  transition: background-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}

.lc-iconbtn--glass {
  background-color: var(--glass-fill-strong, rgba(255, 255, 255, .66));
  backdrop-filter: blur(var(--blur-sm, 16px)) saturate(var(--glass-saturate, 200%));
  -webkit-backdrop-filter: blur(var(--blur-sm, 16px)) saturate(var(--glass-saturate, 200%));
  box-shadow:
    var(--shadow-glass, 0 8px 24px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .9)),
    inset 0 0 0 1px var(--glass-rim, rgba(255, 255, 255, .9)),
    0 0 0 1px var(--glass-edge, rgba(0, 0, 0, .08));
}

.lc-iconbtn:focus-visible {
  outline: 2px solid var(--focus-ring, #0a59f7);
  outline-offset: 2px;
}

.lc-morph {
  position: relative;
  display: inline-block;
  flex: none;
}

.lc-morph__panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 400;
  border-radius: var(--radius-xl, 28px);
  background: linear-gradient(180deg, var(--glass-sheen, rgba(255, 255, 255, .5)) 0%, transparent 40%), var(--glass-fill-strong, rgba(255, 255, 255, .66));
  backdrop-filter: blur(var(--blur-lg, 50px)) saturate(var(--glass-saturate, 200%));
  -webkit-backdrop-filter: blur(var(--blur-lg, 50px)) saturate(var(--glass-saturate, 200%));
  font-family: inherit;
  will-change: clip-path;
}

/* 脚本未接管（旧浏览器）时退化为普通弹出菜单 */
.lc-morph:not(.is-morph) .lc-morph__panel { display: none; }
.lc-morph:not(.is-morph) .lc-morph__trigger[aria-expanded="true"] + .lc-morph__panel { display: block; }

.is-morph .lc-morph__panel { border-radius: 0; pointer-events: none; }
.is-morph .lc-morph__panel.is-open { pointer-events: auto; }

.is-morph .lc-morph__trigger {
  position: relative;
  z-index: 401;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: transparent;
}

.is-morph .lc-morph__trigger[aria-expanded="true"] { pointer-events: none; }
.is-morph .lc-morph__trigger .lc-ico { opacity: 0; }

.lc-morph__shadow,
.lc-morph__rim {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  overflow: visible;
}

.lc-morph__shadow { z-index: 399; }
.lc-morph__rim { z-index: 401; }

.lc-morph__inner {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--lc-morph-w, 248px);
  padding: 8px;
  transform-origin: top right;
  will-change: transform, filter, opacity;
}

.lc-morph__glyph {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink, rgba(0, 0, 0, .9));
  pointer-events: none;
}

.lc-morph__glyph .lc-ico { width: 24px; height: 24px; }

.lc-morph__item {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 20px;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink, rgba(0, 0, 0, .9));
  text-decoration: none;
  cursor: pointer;
  will-change: transform;
  transition: background-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(.2, 0, 0, 1));
}

.lc-morph__item:hover {
  color: var(--ink, rgba(0, 0, 0, .9));
  background: var(--fill-hover, rgba(0, 0, 0, .05));
}

.lc-morph__item:active { background: var(--fill-pressed, rgba(0, 0, 0, .1)); }

.lc-morph__item:focus-visible {
  outline: 2px solid var(--focus-ring, #0a59f7);
  outline-offset: -2px;
}

.lc-morph__item .lc-ico { width: 20px; height: 20px; flex: none; }
.lc-morph__item > span { flex: 1; }

.lc-morph__item small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-secondary, rgba(0, 0, 0, .6));
}

.lc-morph__item > .lc-ico:last-child:not(:first-child) {
  width: 16px;
  height: 16px;
  color: var(--ink-secondary, rgba(0, 0, 0, .6));
}

.lc-morph__item--danger,
.lc-morph__item--danger:hover { color: var(--danger, #c42b1c); }

.lc-morph__sep {
  height: 1px;
  margin: 4px 12px;
  background: var(--divider, rgba(0, 0, 0, .1));
}

@media (prefers-reduced-transparency: reduce) {
  .lc-morph__panel,
  .lc-iconbtn--glass {
    background: var(--surface, #fff);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}