/* ============================================================
   Bee Repair — Morphicons (状态形变微交互图标基元)
   基于纯 SVG + CSS 硬件加速转场，零外部依赖，100% 本地化。
   支持:
     1. menu-to-x (汉堡菜单 ⇄ 关闭叉号)
     2. eye-to-eye-off (密码显 ⇄ 隐)
     3. copy-to-check (复制卡片 ⇄ 成功打勾弹性反馈)
     4. lock-toggle (锁具锁定 ⇄ 解锁弹梁)
     5. chevron-flip (折叠指示箭头 180° 翻转)
     6. plus-to-minus (展开 ⇄ 收拢加减切换)
   ============================================================ */

lord-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    overflow: hidden;
    flex-shrink: 0;
}

lord-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.morph-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.15em;
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    line-height: 1;
}

.morph-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    overflow: visible;
}

/* 物理弹簧缓动 */
:root {
    --morph-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --morph-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
    --morph-duration: 260ms;
}

/* 1. menu-to-x */
.morph-icon[data-morph="menu-to-x"] line {
    transform-origin: center;
    transition: transform var(--morph-duration) var(--morph-spring),
                opacity var(--morph-duration) ease;
}
.morph-icon[data-morph="menu-to-x"].is-active .line-top,
.morph-icon[data-morph="menu-to-x"][data-state="open"] .line-top {
    transform: translateY(6px) rotate(45deg);
}
.morph-icon[data-morph="menu-to-x"].is-active .line-mid,
.morph-icon[data-morph="menu-to-x"][data-state="open"] .line-mid {
    opacity: 0;
    transform: scaleX(0);
}
.morph-icon[data-morph="menu-to-x"].is-active .line-bot,
.morph-icon[data-morph="menu-to-x"][data-state="open"] .line-bot {
    transform: translateY(-6px) rotate(-45deg);
}

/* 2. eye-to-eye-off */
.morph-icon[data-morph="eye-to-eye-off"] .eye-slash {
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    transition: stroke-dashoffset var(--morph-duration) var(--morph-ease);
}
.morph-icon[data-morph="eye-to-eye-off"] .eye-pupil {
    transition: transform var(--morph-duration) var(--morph-spring), opacity var(--morph-duration) ease;
    transform-origin: center;
}
.morph-icon[data-morph="eye-to-eye-off"].is-active .eye-slash,
.morph-icon[data-morph="eye-to-eye-off"][data-state="hidden"] .eye-slash {
    stroke-dashoffset: 0;
}
.morph-icon[data-morph="eye-to-eye-off"].is-active .eye-pupil,
.morph-icon[data-morph="eye-to-eye-off"][data-state="hidden"] .eye-pupil {
    opacity: 0.3;
    transform: scale(0.65);
}

/* 3. copy-to-check */
.morph-icon[data-morph="copy-to-check"] .copy-box {
    transform-origin: center;
    transition: transform var(--morph-duration) var(--morph-spring), opacity var(--morph-duration) ease;
}
.morph-icon[data-morph="copy-to-check"] .check-path {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    opacity: 0;
    transform-origin: center;
    transform: scale(0.85);
    transition: stroke-dashoffset 240ms ease-out,
                transform 240ms var(--morph-spring),
                opacity 160ms ease;
    stroke: var(--success, #10b981);
}
.morph-icon[data-morph="copy-to-check"].is-active .copy-box,
.morph-icon[data-morph="copy-to-check"][data-state="copied"] .copy-box {
    opacity: 0;
    transform: scale(0.6);
}
.morph-icon[data-morph="copy-to-check"].is-active .check-path,
.morph-icon[data-morph="copy-to-check"][data-state="copied"] .check-path {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
}

/* 4. lock-toggle */
.morph-icon[data-morph="lock-toggle"] .lock-shackle {
    transform-origin: 17px 11px;
    transition: transform var(--morph-duration) var(--morph-spring);
}
.morph-icon[data-morph="lock-toggle"].is-active .lock-shackle,
.morph-icon[data-morph="lock-toggle"][data-state="unlocked"] .lock-shackle {
    transform: translateY(-4px) rotate(18deg);
}

/* 5. chevron-flip */
.morph-icon[data-morph="chevron-flip"] svg {
    transform-origin: center;
    transition: transform var(--morph-duration) var(--morph-spring);
}
.morph-icon[data-morph="chevron-flip"].is-active svg,
.morph-icon[data-morph="chevron-flip"][data-state="expanded"] svg,
.morph-icon[data-morph="chevron-flip"][data-state="up"] svg {
    transform: rotate(180deg);
}

/* 6. plus-to-minus */
.morph-icon[data-morph="plus-to-minus"] .plus-vert {
    transform-origin: center;
    transition: transform var(--morph-duration) var(--morph-spring), opacity var(--morph-duration) ease;
}
.morph-icon[data-morph="plus-to-minus"].is-active .plus-vert,
.morph-icon[data-morph="plus-to-minus"][data-state="minus"] .plus-vert,
.morph-icon[data-morph="plus-to-minus"][data-state="expanded"] .plus-vert {
    transform: rotate(90deg) scaleY(0);
    opacity: 0;
}

/* Lucide 图标标准统一度量与对齐 */
.lucide-icon,
svg.lucide {
    display: inline-block;
    vertical-align: -0.18em;
    width: 1.18em;
    height: 1.18em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

.sidebar-icon.lucide-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.65rem;
    vertical-align: -0.2em;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.nav-link:hover .sidebar-icon.lucide-icon {
    transform: scale(1.1);
}

/* 无障碍减少动效支持 */
@media (prefers-reduced-motion: reduce) {
    .morph-icon *,
    .morph-icon svg {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}