@layer components {

.kn-menu__has-children { position: relative; display: flex; align-items: center; }
.kn-menu__parent { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); cursor: default; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; }
.kn-menu__has-children:hover .kn-menu__parent { color: var(--accent-ink); }
.kn-menu__has-children.is-active .kn-menu__parent { color: var(--accent-ink); }
.kn-menu__arrow { transition: transform 0.2s; }
.kn-menu__has-children:hover .kn-menu__arrow { transform: rotate(180deg); }
.kn-sub-menu { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); background: var(--bg); border: 2px solid var(--border-strong); border-radius: 0; padding: 8px; min-width: 300px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; z-index: 110; }

.kn-menu__has-children:hover .kn-sub-menu,
.kn-menu__has-children:focus-within .kn-sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.kn-sub-menu__item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 10px 12px; border-radius: 0; }
.kn-sub-menu__item:hover { background: var(--accent-light); color: var(--accent-ink); }
.kn-sub-menu__item.is-active { color: var(--accent-ink); background: var(--bg-card); pointer-events: none; cursor: default; }
.kn-sub-menu__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.kn-sub-menu__body { display: flex; flex-direction: column; gap: 2px; }
.kn-sub-menu__desc { font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--text-muted); }

.kn-mob-nav__sub-wrap { display: block; }
.kn-mob-nav__sub-parent { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); padding: 14px 0; border-bottom: 0.5px solid var(--border); cursor: pointer; user-select: none; }
.kn-mob-nav__sub-parent .kn-mob-nav__arrow { transition: transform 0.2s; flex-shrink: 0; }
.kn-mob-nav__sub-parent.is-open .kn-mob-nav__arrow { transform: rotate(180deg); }
.kn-mob-nav__sub-items { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.kn-mob-nav__sub-items.is-open { max-height: 200px; }
.kn-mob-nav__sub-items > a { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 10px 0; border-bottom: 0.5px solid var(--border); transition: color 0.15s; }
.kn-mob-nav__sub-items > a:hover { color: var(--accent-ink); }
.kn-mob-nav__sub-items > a.is-active { color: var(--accent-ink); pointer-events: none; cursor: default; }
.kn-mob-nav__sub-items > a:last-child { border-bottom: none; }
.kn-mob-nav__sub-wrap:last-child .kn-mob-nav__sub-parent { border-bottom: none; }

}